How To Change Contact Form 7 Text Color

by

Contact Form 7 is a popular plugin for WordPress that allows you to easily create contact forms on your website. One of the customization options available with this plugin is the ability to change the text color of the form fields and buttons.

Step 1: Install and Activate Contact Form 7

If you haven’t already, install and activate the Contact Form 7 plugin on your WordPress site. You can do this by going to Plugins > Add New in your dashboard and searching for “Contact Form 7”. Once installed, activate the plugin.

Step 2: Create a New Contact Form

If you haven’t already created a contact form with Contact Form 7, do so now. Go to Contact > Add New in your dashboard and create a new form. You can customize the fields and settings as needed.

Step 3: Customize Text Color

To change the text color of the form fields and buttons, you’ll need to edit the CSS for your theme or use a plugin like WPBakery Page Builder. Here are the steps to do so:

  1. Open the page where your contact form is located in your dashboard.
  2. Click on the “Text” tab in the toolbar above the text box where you enter your content.
  3. In the “Custom CSS” field, add the following code:
    4. .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form input[type="datetime"], .wpcf7-form input[type="datetime-local"], .wpcf7-form input[type="month"], .wpcf7-form input[type="time"], .wpcf7-form input[type="week"], .wpcf7-form input[type="color"], .wpcf7-form input[type="file"], .wpcf7-form textarea {
    color: #000;
  }
  4. Save your changes and preview the page to see if the text color has been changed.

Conclusion

Changing the text color of Contact Form 7 is a simple process that can be done by editing the CSS for your theme or using a plugin like WPBakery Page Builder. By following these steps, you can customize the look and feel of your contact form to better match your website’s design.