How To Change Css Of Contact Form 7 In WordPress

Contact Form 7 is a popular plugin for creating contact forms on your WordPress website. While it has many customization options, sometimes you may want to change the appearance of the form by modifying its CSS. In this article, we will guide you through the process of changing the CSS of Contact Form 7 in WordPress.

Step 1: Install and Activate Contact Form 7 Plugin

If you haven’t already installed the Contact Form 7 plugin, go to your WordPress dashboard and navigate to Plugins > Add New. Search for “Contact Form 7” and install it. Once installed, activate the plugin.

Step 2: Create a New Contact Form

To change the CSS of Contact Form 7, you need to create a new contact form. Go to Contact > Add New in your WordPress dashboard and fill out the necessary fields. You can customize the form by adding or removing fields as needed.

Step 3: Edit the CSS

Once you have created a new contact form, you can edit its CSS by going to Appearance > Customize in your WordPress dashboard. Click on the “Additional CSS” section and paste the following code:

.wpcf7-form {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    padding: 20px;
}
.wpcf7-submit {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
}

This code will change the background color of the form to white, add a border with a light gray color, and modify the submit button’s appearance. You can customize these settings as needed.

Step 4: Save Your Changes

Once you have edited the CSS, click on the “Publish” button to save your changes. Your new contact form should now appear with the modified appearance.

Conclusion

Changing the CSS of Contact Form 7 in WordPress is a simple process that can be done by following these steps. By modifying the plugin’s CSS, you can customize the appearance of your contact form to match your website’s design and branding.