[Plugin: Contact Form 7] Two Forms, Need to Customize Text Area…

  • link82

    (@link82)


    11 years, 10 months ago

    Hi everyone,

    I am creating two forms using Contact Form 7. One form will be located in the side bar and another one by itself on the ‘Contact Us’ Form.

    I’ve placed the first one in the sidebar and the problem is that the text area width is longer than the name/email/# fields.

    How can I customize this?

    I found this somewhere:
    .wpcf7 textarea {height: 50px; width: 300px;}

    But if I do this, won’t it affect both Contact Forms? Also, I’d like to modify the text colour of the one in the sidebar to be white. The other one’s text colour needs to remain black.

    I’m weak with CSS but willing to learn. I’d appreciate any help… thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • zex2911

    (@zex2911)

    11 years, 10 months ago

    If you go to your dashboard/contact and choose form you want to change, just add class to the field you want to style, and then style it in css the way you want. So you want something like this:

    <p>Your Name (required)<br />
    [text* your-name class:formOneNameField] </p>

    and in your style.css:
    .formOneNameField{width:1000000000px}(or something that suits you)

    Hope that helps. 🙂

    Thread Starter link82

    (@link82)

    11 years, 10 months ago

    Hi zex,

    Thanks for the response. So.. I need to brush up on basics apparently.

    So here are the form details (the code I need to stick on sidebar to get it to display):
    [contact-form-7 id=”11″ title=”Contact form 1″]

    Text I want to modify is “name”, “email” fields:
    <p>Your Name (required)
    [text* your-name] </p>

    .formOneNameField, what are you referring to here?
    Thanks zex and anyone else who can help.

    zex2911

    (@zex2911)

    11 years, 10 months ago

    <p>Your Name (required)
    [text* your-name class:formOneNameField] </p>

    As you can see, i added class:formOneNameField to your text field. Of course, you can call it how ever you want, and add same style to the style.css file

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Contact Form 7] Two Forms, Need to Customize Text Area…’ is closed to new replies.