WordPress.org

Forums

Contact Form 7
[resolved] how to make 2 forms with different styles in contact form 7? (10 posts)

  1. PsYcHo jEsTeR
    Member
    Posted 1 year 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>

    http://wordpress.org/extend/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 1 year ago #

    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.

  3. PsYcHo jEsTeR
    Member
    Posted 1 year ago #

    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?

  4. PsYcHo jEsTeR
    Member
    Posted 1 year ago #

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

  5. buzztone
    Member
    Posted 1 year ago #

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

  6. wild_eyes
    Member
    Posted 1 year ago #

    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 ?

  7. wild_eyes
    Member
    Posted 1 year ago #

    Any Clues ?

  8. WPyogi
    Forum Moderator
    Posted 1 year ago #

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

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

    You can do so here:

    http://wordpress.org/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.

  9. buzztone
    Member
    Posted 1 year ago #

    @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.

  10. clickstars
    Member
    Posted 1 year ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic