Customize Contact Form 7 for each form

  • Hannah4web

    (@hannah4web)


    10 years 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/

Viewing 1 replies (of 1 total)
  • Neil Murray

    (@buzztone)

    10 years 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.

Viewing 1 replies (of 1 total)
  • The topic ‘Customize Contact Form 7 for each form’ is closed to new replies.