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.

---

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.