WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Customize Contact Form 7 for each form (2 posts)

  1. Hannah4web
    Member
    Posted 3 months ago #

    Hi,
    I have diferent form in my website ans I tried to customize each of them.
    Link to my website :www.imaginationpixel.com
    My first form is [contact-form-7 id="244" title="Inscription_Newsletter"]and my second is [contact-form-7 id="242" title="News_parfum"]
    I was looking around and code as follow in my style.css sheet:
    .wpcf7 input[type="email" id="242"] {background-color: red;color: #4b4b4b; }

    .wpcf7 input[type="email" id="244"] {background-color:#fff;color:black; }
    But it doesn't work

    Thank in advance for your help

    https://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 3 months ago #

    Adding input[type="email" id="242"] to .wpcf7 input[type="email" id="242"] doesn't work because it is not CSS - see ‚ÄčStyling a Specific Contact Form 7 Form

    You can now also add an id and class to a form by adding the html_id and html_class attributes into a [contact-form-7] shortcode.

    Example: [contact-form-7 id="1234" title="Contact form 1" html_id="contact-form-1234" html_class="form contact-form"]

    See http://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

    This is a good way of styling multiple CF7 forms

    See also Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

Reply

You must log in to post.

About this Plugin

About this Topic