Back to Community
Home / Community / Plugin → Contact form 7

How to Style Your Contact Form 7 Submit Button with Custom CSS

46 threads Sep 16, 2025 Plugin → Contact form 7

Content

One of the most common questions from Contact Form 7 users is how to customize the appearance of the submit button. Whether you want to change its color, size, add a border, or fix it when it's not showing up correctly, the solution almost always involves adding custom CSS to your site.

Why Styling Isn't Built Into Contact Form 7

Contact Form 7 is designed to be a lightweight, functional form plugin. By default, it outputs minimal HTML and relies on your WordPress theme to provide the styling. This is why your form's appearance can change drastically between different themes or even different pages using the same theme. The plugin itself does not include a visual style editor; customization is done through CSS.

Common Submit Button Issues and Solutions

1. The Submit Button is Missing or Not Visible

As seen in the sample threads, a theme or other plugin's CSS can sometimes hide the submit button. A common fix is to ensure the button's display property is not set to 'none'.

.wpcf7-form-control.wpcf7-submit {
    display: block !important;
}

If switching to a default WordPress theme (like Twenty Twenty-Four) makes the button appear, the conflict is with your main theme's stylesheet.

2. Changing the Button's Color, Size, and Font

To style the button, you need to target it with the correct CSS selector. The most reliable selector is input.wpcf7-submit or .wpcf7-form-control.wpcf7-submit.

input.wpcf7-submit {
    background-color: #d59541 !important; /* Your desired color */
    color: #fff !important;
    border: none !important;
    padding: 12px 24px !important; /* Controls the size */
    font-size: 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: "Your Font", sans-serif !important; /* Change the font */
}

3. Styling the Hover State

To change the button's color when a user hovers their cursor over it, add a :hover pseudo-class.

input.wpcf7-submit:hover {
    background-color: #b37a30 !important; /* A darker shade for hover */
}

4. Adding Spacing Around the Button

If the <br> tag isn't creating space before your button, use CSS margins instead.

input.wpcf7-submit {
    margin-top: 20px !important;
}

How to Add This CSS to Your Website

  1. In your WordPress dashboard, navigate to Appearance > Customize.
  2. Look for a section called Additional CSS or Custom CSS.
  3. Paste your custom CSS code into the provided box.
  4. Publish the changes.

Important Troubleshooting Tip

If your CSS changes aren't taking effect, it's likely because your theme's styles are more specific. Using the !important declaration (as shown in the examples) can often override these styles. For more complex issues, use your browser's inspector tool (right-click on the button and select 'Inspect') to identify the exact CSS rules being applied by your theme.

For more general information on styling forms, the Contact Form 7 team suggests reviewing their documentation on styling contact forms.

Related Support Threads Support