WordPress.org

1. link82
   Member
   Posted 11 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.

2. zex2911
   Member
   Posted 11 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. :)

3. link82
   Member
   Posted 11 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.

4. zex2911
   Member
   Posted 11 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

Reply

You must log in to post.