Contact Form 7 supports two methods for adding multiple CSS classes to the submit button. Both work in all current versions of the plugin. Here is the syntax for each:
Method 1 — Separate class: attributes:
[submit class:btn class:btn-primary class:btn-lg "Send"]Method 2 — Space-separated classes in quotes:
[submit class:"btn btn-primary btn-lg" "Send"]Both produce identical HTML output. Choose whichever you find easier to read. The rest of this guide covers common use cases, CSS framework examples, styling the default class, and fixes for when classes are not applying.
Where to Add the Code
Log into your WordPress dashboard and go to Contact → Contact Forms. Click the form you want to edit. In the form editor, find the submit button tag — it typically looks like [submit "Send"] near the bottom of the template. Replace it with your updated tag including the class attributes. Click Save. The classes are now applied to the rendered HTML button on your site.
To verify the classes are present, visit the page containing the form, right-click the submit button, and select Inspect. In the HTML you should see something like:
<input type="submit" class="wpcf7-submit btn btn-primary btn-lg" value="Send">Notice that Contact Form 7 always keeps its own wpcf7-submit class on the button — your custom classes are added alongside it, not instead of it. This means you can also target .wpcf7-submit in your CSS without adding any custom class at all, which is useful for site-wide submit button styling.
Bootstrap Submit Button
If your site uses Bootstrap, apply the standard Bootstrap button classes directly in the CF7 tag:
[submit class:btn class:btn-primary "Submit Form"]For a larger button:
[submit class:btn class:btn-primary class:btn-lg "Submit Form"]For an outline style:
[submit class:btn class:btn-outline-primary "Submit Form"]Bootstrap’s button classes work immediately if Bootstrap is already loaded on your site. No additional CSS required. If Bootstrap is not loaded globally, you will need to enqueue it or add the relevant button styles manually to your theme’s stylesheet.
Tailwind CSS Submit Button
Tailwind’s utility-first approach means you will be adding more classes, which makes the quoted method cleaner:
[submit class:"bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-200" "Send Message"]
This applies background color, hover state, text color, font weight, padding, border radius, and transition in one tag. Tailwind classes only work if Tailwind is loaded on your site and its JIT compiler has scanned the CF7 template for class names — which it typically will not do by default since CF7 templates are not standard PHP files. The safest approach with Tailwind is to add the utility classes you need to your CSS manually using @apply:
.wpcf7-submit {
@apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-200;
}This way you do not need to add Tailwind classes directly to the CF7 tag at all — the default wpcf7-submit class handles the styling automatically. This is also the better approach for on-page SEO and performance since it keeps your HTML cleaner and reduces class bloat in the markup.
Custom CSS Without a Framework
If you are not using a CSS framework, target either your custom class or the default wpcf7-submit class in your stylesheet. Add CSS through Appearance → Customize → Additional CSS or your theme’s stylesheet:
.wpcf7-submit {
background-color: #0073aa;
color: #ffffff;
border: none;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.wpcf7-submit:hover {
background-color: #005177;
}If you want to style only one specific form’s button without affecting others, use your custom class to scope the rule:
.contact-page-submit {
background-color: #e74c3c;
color: #fff;
padding: 14px 32px;
border: none;
border-radius: 3px;
cursor: pointer;
}Then in the CF7 tag: [submit class:contact-page-submit "Send"]
Adding Classes to Other CF7 Fields
The same class: syntax works on all Contact Form 7 form tags, not just the submit button. This is useful when you want to apply framework grid classes or custom styles to individual fields:
[text* your-name class:form-control placeholder "Your Name"]
[email* your-email class:form-control placeholder "Your Email"]
[textarea your-message class:"form-control message-field" placeholder "Your Message"]For adding an ID to a field instead of a class, use id: the same way:
[text* your-name id:name-field class:form-control placeholder "Your Name"]You can also add an ID and class to the entire form wrapper by modifying the shortcode that embeds the form on your page:
Error: Contact form not found.
This is particularly useful when managing multiple forms on the same page — for example in WordPress admin workflows where controlling interface elements for specific user roles requires scoping styles precisely per form instance.
Troubleshooting — Classes Not Applying
If your classes appear in the HTML but the styles are not showing on the button, the cause is almost always one of three things:
CSS specificity conflict. Another rule targeting the submit button has higher specificity than yours and is overriding it. Open browser DevTools (F12), click the submit button, and look at the Styles panel. Struck-through rules are being overridden. Fix by making your selector more specific:
.wpcf7-form input.wpcf7-submit.your-class {
/* your styles */
}Caching. Your browser or a caching plugin is serving an old version of the page. Clear your browser cache (Ctrl+Shift+Delete), then clear your WordPress caching plugin cache — in LiteSpeed Cache go to LiteSpeed → Dashboard → Purge All. Never purge UCSS. If you use Cloudflare, also purge the CDN cache.
Curly quotes instead of straight quotes. If you copied the CF7 tag from a word processor or rich text editor, it may have replaced straight quotes with curly quotes (” “). CF7 requires straight double quotes. Always type the tag directly in the CF7 editor or paste via a plain text editor first.
Space after class:. The syntax class: btn with a space after the colon will break class assignment. It must be class:btn with no space.
Frequently Asked Questions
How do I add multiple classes in Contact Form 7?
Use either [submit class:btn class:btn-primary "Send"] with separate class: attributes, or [submit class:"btn btn-primary" "Send"] with all classes in quotes separated by spaces. Both methods produce the same HTML output.
How do you add a class to a Contact Form 7 field?
Add class:your-class-name after the field name in the CF7 tag. Example: [text* your-name class:form-control placeholder "Name"]. For multiple classes: [text* your-name class:form-control class:custom-field placeholder "Name"].
Should wpcf7-submit be in front of a Contact Form 7 class?
You do not need to include wpcf7-submit in your CF7 tag — CF7 adds it automatically to every submit button. Your custom classes are added alongside it. In your CSS you can target either .wpcf7-submit alone or combine it with your custom class for higher specificity: .wpcf7-submit.your-class.
How do I add multiple submit buttons in a form?
Contact Form 7 does not natively support multiple submit buttons in a single form. The standard workaround is to use separate forms for different actions, or use a multi-step CF7 plugin that adds navigation buttons between steps alongside the final submit.
How do I add multiple emails in Contact Form 7?
Go to the Mail tab in your CF7 form editor. At the bottom you will find an Additional email settings checkbox. Enable it to configure a second email recipient with its own subject, body, and recipient address. This is separate from the submit button but a common question in CF7 setups.
Can I add an ID to the CF7 submit button?
Yes. Use id:your-id in the tag: [submit id:submit-btn class:btn "Send"]. This is useful when you need to target the button with JavaScript for analytics events or custom behaviour. For WordPress development tasks like this, understanding how to handle programmatic operations in WordPress follows the same principle of using hooks and selectors precisely.
Why is CF7 adding wpcf7-submit instead of my class name?
CF7 always adds wpcf7-submit to submit buttons — it does not replace it with your class. Your custom classes appear alongside it. If only wpcf7-submit appears and your class is missing, check for a space after class:, curly quotes, or a typo in the class name.
Do CF7 classes work with page builders like Elementor?
Yes. Classes added in the CF7 tag render in the HTML regardless of whether the form is embedded via shortcode in Elementor, Gutenberg, or a theme template. Style conflicts can occur if the page builder adds its own button styles with high specificity — use .wpcf7-form input.wpcf7-submit as your selector to increase specificity above most page builder defaults.
