Would you like to easily customize the look and feel of your WordPress forms? Our form styling feature lets you style your forms without writing any CSS.
This tutorial will show you how to style your forms with the WPForms visual builder in the block editor.
In This Article
Requirements: To be able to style your forms in the block editor, you’ll need to have the following in place:
- WordPress version 6.0 or greater
- Block editor or a theme with full site editing
Before getting started, ensure WPForms is installed and activated on your WordPress site and that you’ve verified your license.
Enabling Modern Markup
Modern markup in WPForms includes increased accessibility and allows you to customize your forms visually in the block editor.
Note: With WPForms version 1.8.1 and later, new users have modern markup enabled by default, and the disable option isn’t visible in the WordPress dashboard. Simply proceed to start customizing your forms in the block editor.
To activate form styling, you’ll need to enable modern markup from your WPForms settings page. For this, go to WPForms » Settings and select the General tab.
Next, scroll to the General section and ensure the Include Form Styling option is set to Base and form theme styling.
After that, check the Use Modern Markup checkbox to enable it.
Be sure to save your changes after enabling this option.
Note: Forms with the deprecated Credit Card field aren’t compatible with modern markup. If you’re using this field, you won’t be able to use modern markup in WPForms. Please see our FAQ section to learn how to bypass this restriction.
Customizing Your Forms
After enabling the modern markup option, create a new form and add the form to a page or post.
In the block editor, click on the form to open additional options for the WPForms block.
In the WPForms block settings, you’ll find options for styling your form fields, labels, and button without writing any CSS. You’ll also find additional options to copy style settings from one form to another in the Advanced section.
We’ll cover each of these options in more detail below.
Under Field Styles, you’ll find the Size, Border Radius, and Colors settings. The Size settings allow you to change the size of your form fields. Available sizes include Small, Medium, and Large.
Next, you’ll find the Border Radius settings. This allows you to use rounded corners on your forms.
The default unit is pixels (px). However, you can change it to the unit you prefer.
In the Colors settings, you’ll find the option to update the background color, border color, and text color of your fields.
When you click on a particular color option, an overlay with available theme colors will appear.
Click on the color swatch to open the color picker.
If you already have a brand color you wish to use for your forms, go ahead and paste the hex color code into the Hex field.
In the Label Styles section, you’ll find the option to update the size and colors of your form labels. Available size options include Small, Medium, and Large.
Under the Colors section, you’ll find the option to update colors for labels, sublabels, and error messages. Below we’ve explained the available label color options.
- Label: This option controls the text color of your main field label.
- Sublabel & Hint: This option controls the color of field sublabels and hints that appear when WPForms suggests values to users in the frontend.
- Error Message: The color of the text that shows if an error occurs when users fill out your form.
The Button Styles settings allow you to change the design of your buttons. To change the button’s size, click the Size dropdown and select the option you’d like to use.
If you’d like to apply a border radius on the button, simply enter the value in the Border Radius field.
In the Colors panel, you’ll find the option to update the background and text colors of your button.
Note: The background color you set for your button will also be used as the default accent color. This means the focus state color for fields, progress bars, radio buttons, and checkboxes will use the button’s background color.
In the Advanced settings section, you’ll see the CSS code that contains all the styles you’ve added to the form under Copy / Paste Style Settings.
This option allows you to copy styles from one form to another.
If you’ve copied style settings from another form, you’ll be able to quickly paste it here. After pasting the code snippet, the form will use the styles from the previous form.
If you’d like to reset any customization you’ve added to your form, click the Reset Style Settings button. This would restore your form to its original state without any custom styling.
You can optionally add custom CSS classes you’ve created in the ADDITIONAL CSS CLASS(ES) box. To learn more, check out our tutorial on adding custom CSS classes.
After styling your form, be sure to save your changes by either publishing the page or saving it as a draft.
Note: If you embed the form you’ve customized on another page, it will retain your configured style settings.
Testing Your Forms
The last step is to run a quick test to ensure your form looks and works how you expect.
To test it out, you’ll simply need to submit an entry to your form. To learn more, please check our full form testing checklist.
Frequently Asked Questions
Below, we’ve answered some of the most common questions we receive about styling your forms in the block editor.
Heads up! Some of the FAQs in this doc contain PHP code and is intended for developers. We offer this code as a courtesy but don’t provide support for code customizations or 3rd party development.
If you’d prefer a simpler approach to adding custom code to your site, please see WPBeginner’s guide to using WPCode.
I can’t find the Use Modern Markup option. How do I enable Modern Markup in WPForms?
Users with at least one form on their website before updating the WPForms plugin to version 1.8.1 will see the modern markup option.
If you just installed the WPForms plugin on your WordPress site, you won’t see the Use Modern Markup option on your settings page. Your site will be set to use the modern markup by default.
If you’d like to show this option on your settings page, you’ll need to add the following code snippet to your site.
add_filter( 'wpforms_admin_settings_modern_markup_register_field_is_hidden', '__return_false' );
How do I force WPForms to use modern markup?
If using the deprecated Credit Card field prevents you from enabling modern markup, you can bypass this restriction by adding a custom filter. To force WPForms to enable the modern markup option, add the following code snippet to your website.
add_filter( 'wpforms_admin_settings_modern_markup_register_field_is_disabled', '__return_false' );
After adding the code, you’ll be able to enable/disable modern markup from your WPForms settings page.
That’s it! Now you know how to customize the look and feel of your WordPress forms using WPForms and the block editor.
Next, would you like to use icons to improve your form’s display? Be sure to check our tutorial on using icon choices to learn how.