[Plugin: Contact Form 7] Change color of text?

  • 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?

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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.

    Thread Starter jhorac1

    (@jhorac1)

    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!

    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.

    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!

    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]

    Where does

    [text foo-bar class:mybg]

    go?

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

    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!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: Contact Form 7] Change color of text?’ is closed to new replies.