Customising your WPForms can be a challenge, especially if you’re not familiar with the specific CSS selectors WPForms uses. To save you time, we’ve compiled a handy set of CSS selectors you can copy and paste directly into your WordPress website.
This allows you to style all the key elements in your WPForms — including inputs, checkboxes, dropdowns, buttons, and error messages — without having to hunt for the right selectors.
Once pasted into your theme’s stylesheet, custom CSS area, or a plugin like WPCode, you can easily apply your preferred fonts, colours, and spacing to make your forms match the rest of your site.
/* General Form Containers */
.wpforms-container {}
.wpforms-container-full {}
.wpforms-container-full:not(:empty) {}
/* Spacing Between All Fields */
.wpforms-container .wpforms-field {}
.wp-core-ui div.wpforms-container .wpforms-field {}
/* General Field Container */
.wpforms-form .wpforms-field-container .wpforms-field.wpforms-field-content {}
/* Textareas, Inputs, Select Fields */
.wpforms-field textarea {}
.wpforms-field input {}
.wpforms-field select {}
.wpforms-field-url {}
/* Focus States */
.wpforms-field textarea:focus {}
.wpforms-field input:focus {}
.wpforms-field select:focus {}
.wpforms-field-url:focus {}
/* Field Labels */
.wpforms-field-label {}
/* Dropdown Select Fields */
.wpforms-field-select {}
/* Multi-Page Step Indicator */
.wpforms-page-indicator-page {}
/* Checkbox and Radio Buttons */
.wpforms-field-checkbox {}
.wpforms-field-radio {}
.wpforms-field-checkbox input[type="checkbox"] {}
.wpforms-field-radio input[type="radio"] {}
.wpforms-field-radio input[type="radio"]:checked:before {}
.wpforms-field-radio input[type="radio"]:before {}
.wpforms-field-radio input[type="radio"]:checked:after {}
/* Submit Button */
.wpforms-submit {}
.wpforms-submit:hover {}
.wpforms-submit:active {}
/* Privacy Consent Field */
.wpforms-field.wpforms-field-privacy label {}
/* Multi-Page Navigation Buttons */
.wpforms-page-button {}
.wpforms-page-prev {}
.wpforms-page-prev:hover {}
.wpforms-page-prev:active {}
.wpforms-page-next {}
/* Range Slider Thumb */
.wpforms-field-number-slider input[type=range]::-webkit-slider-thumb {}
/* Error Messages */
.wpforms-error {}
/* Success Message */
.wpforms-confirmation-container-full {}
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {}
How to Use This Code
To apply this styling to your WPForms:
- Copy all the CSS above.
- Go to your WordPress Dashboard.
- Navigate to Appearance > Customise > Additional CSS, or use a plugin like WPCode to add custom CSS.
- Paste the code into the editor.
- Adjust the colours, fonts, and spacings to match your site’s design.
- Click Publish to save your changes.
Why Customise WPForms?
Out of the box, WPForms is easy to use but often doesn’t match the look and feel of your website. By adding this CSS, you gain complete control over:
- Field spacing and layout
- Button styling
- Checkboxes and radio buttons
- Error and success messages
- Overall form appearance
This makes sure your forms look professional and match your brand, improving the user experience for your visitors.
Final Tip
If you want these styles to only apply to specific forms, you can add a custom form class under WPForms > Edit Form > Settings > General > CSS Classes. Then, replace .wpforms-container with .your-custom-class .wpforms-container in the CSS above.
Wrapping Up
With these pre-built CSS selectors, styling WPForms has never been easier. Whether you’re a beginner or a seasoned designer, this ready-to-go snippet saves time and gives you full control over how your forms look.
Want more useful tips for digital marketers and website developers? Check out our blog.