how to make 2 forms with different styles in contact form 7?

  • Resolved ffej

    (@psycho-jester)


    11 years, 5 months ago

    how to make 2 forms which with different styles in contact form 7? i have getting hard time figuring things out, i have search the forum but none of them works please help thanks

    .wpcf7 input.wpcf7-text { height: 30px; width: 450px; }
    .wpcf7-form textarea { height: 30px; width: 450px; }

    i have used this code in the style css sheat in contact form 7 plugin, i have created two forms, but the problem is they show the same style, i wanted the form 1 just to use the above code and the form 2 with different width and height..

    here are my to forms in contact form 7:

    <div class=”Contact form 1″>

    [text* your-name akismet:author placeholder “Your name *”]

    [email* your-email akismet:author_email placeholder “Your email *”]

    [text your-subject placeholder "Subject"]

    [textarea your-message placeholder “Your message here…”]

    [submit “Send Message”]

    </div>

    <div class=”Contact form 2″>

    [text* your-name akismet:author placeholder “Your name *”]

    [email* your-email akismet:author_email placeholder “Your email *”]

    [text your-subject placeholder "Subject"]

    [textarea your-message placeholder “Your message here…”]

    [submit “Send Message”]

    </div>

    https://www.ads-software.com/extend/plugins/contact-form-7/

Viewing 9 replies - 1 through 9 (of 9 total)

  • Each CF7 form has a unique ID like wpcf7-f8-p275-o2. Use Firebug or Chrome Dev Tools to find the ID of each form and then target your CSS changes to each individual form e.g.

    #wpcf7-f8-p275-o2 .wpcf7-form {
    background:#dcc8a5;
    padding:20px;
    border:2px solid #f6efdf;
    margin-bottom:30px;
}

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    Thread Starter ffej

    (@psycho-jester)

    thank you for the reply, i just want to ask where i can find unique id of the form in contact form 7? where is it located?

    Thread Starter ffej

    (@psycho-jester)

    it works thanks i just figure it out how the code works thanks for the help ??

    If this resolves your question, it helps others contributing here, if you can flag your post as [resolved]

    Hi Guys,

    I’ve got into a problem, I have 2 different contact forms with different ID’s found from firebug.

    #wpcf7-f4150-w1-o1

    #wpcf7-f4152-p4153-o1

    I am trying to change the background color field of the first form from white to gray and change the width, but when I change it, both forms change color.
    I am unable to find them in the style.css of my template.
    should I add individual style for them ? if yes how ?
    or where else can I find the specific css file related to them ?

    Any Clues ?

    @wild_eyes – this thread is already resolved. Please start your own thread per the forum guidelines –

    https://codex.www.ads-software.com/Forum_Welcome#Where_To_Post

    You can do so here:

    https://www.ads-software.com/support/plugin/contact-form-7#postform

    Also note that bumping is against the forum rules – these forums are free and 100% volunteer, so you may not get help as quickly as you’d like.

    @wpyogi – great to see the Volunteer Moderators so active in this forum.

    Note I generally ignore questions from members that post other questions in resolved threads. Bumpers also usually ignored.

    a bit confuse about the ID, here is my code [contact-form-7 id=”10270″ title=”need help”] // using Version 3.5.3

    so my css should be

    #wpcf7-10270 .wpcf7-form textarea {
    height: 10px;
    }

    any idea?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘how to make 2 forms with different styles in contact form 7?’ is closed to new replies.