Styling Your Forms

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.

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.

WPForms setting page

Next, scroll to the General section and ensure the Include Form Styling option is set to Base and form theme styling.

Include form styling option

After that, check the Use Modern Markup checkbox to enable it.

Use modern markup

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

Note: If you’re using Elementor, and would like to style your forms from the Elementor builder, check our guide on customizing your forms with Elementor to learn how.

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.

Field styles

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.

Available styling options

We’ll cover each of these options in more detail below.

Field Styles

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.

Field size

Next, you’ll find the Border Radius settings. This allows you to use rounded corners on your forms.

Border radius

The default unit is pixels (px). However, you can change it to the unit you prefer.

Change border radius unit

In the Colors settings, you’ll find the option to update the background color, border color, and text color of your fields.

Available field colors

When you click on a particular color option, an overlay with available theme colors will appear.

Change background color

Click on the color swatch to open the color picker.

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.

Enter hex value

Label Styles

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.

Label sizes

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 colors

  • 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.

Button Styles

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.

Button size

If you’d like to apply a border radius on the button, simply enter the value in the Border Radius field.

Button border radius

In the Colors panel, you’ll find the option to update the background and text colors of your button.

Button colors

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.

Advanced Styling

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.

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.

Reset style settings

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.

Additional CSS classes

After styling your form, be sure to save your changes by either publishing the page or saving it as a draft.

Save page as 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.

How can I make style changes not available in the block editor?

If you would like to make other changes to your forms’ styles that aren’t available as options in the block editor, you can use CSS Hero. This plugin enables you to change your site’s appearance on the frontend without writing any code.

Or, if you would like to style your forms with CSS, we recommend using WPCode to add your custom styles to your site.

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.