WordPress.org

1. jhorac1
   Member
   Posted 3 years ago #

   Is there any way to change the color of the text that is input into the text fields to black (along with the color of the "Send" button at the bottom!) WITHOUT also changing the color of the text entered into the search bar in the upper right of my blog?

2. drabina
   Member
   Posted 3 years ago #

   Add class attribute to the input and textarea tags in the wp-contact-form-7.php file and then define the class in the stylesheet.css file. All inside the plugins/contact-form-7 folder. No need to change the main stylesheet for the theme.

3. jhorac1
   Member
   Posted 3 years ago #

   Thank you for the suggestion, although I must admit that with my limited CSS experience I only vaguely understand your instructions and wouldn't be able to accomplish this on my own without a slightly more comprehensive guide. Would you be able to paste an example of code, and where to put it, so that I could take a look at it?

   Thank you!

4. drabina
   Member
   Posted 3 years ago #

   Open wp-contact-form-7.php file from the Contact Form 7 directory (under plugins) in your HTML editor. Search for input type="text". Add class="mybg" so the line looks like

   $html = '<input type="text" class="mybg" name=...

   Now search for textarea. Once you find it add the class attribute so the line looks like this:

   $html = '<textarea class="mybg" name=...

   Save the file and upload it.

   Now open stylesheet.css file (from the same directory) and add the following code to the end of the file:

   .mybg{
   	background-color: #e3d7b5;
   }

   Of course change the #e3d7b5 to whatever color you want.

   Hope this helps.

5. bradbnaz
   Member
   Posted 2 years ago #

   I got this to work but I had to open the classes.php file found under the includes directory. I followed the rest of the instructions by drabina and it worked!

6. Takayuki Miyoshi
   Member
   Posted 2 years ago #

   You don't need to edit any source code of the plugin to add a class attribute. You can use class option instead. Like this:

   [text foo-bar class:mybg]

7. ryandesigns
   Member
   Posted 2 years ago #

   Where does

   [text foo-bar class:mybg]

   go?

   (I want to change the SEND text to white)
   Thanks

8. madhavaji
   Member
   Posted 2 years ago #

   The way to set a class name in the Contact Form 7 setting is this..

   Go to the settings page and, for instance, if you want to add your own class name to the submit button so that you can style it yourself then simply change the setting from..

   <p>[submit "Send"]</p>

   to..

   <p>[submit class:myclass "Send"]</p>

   When you re-load your form you'll find that the submit button is now marked up like this..

   <input type="submit" class="myclass" value="Send">

   Huzzah!

Topic Closed

This topic has been closed to new replies.