Using Form Themes

Ready to improve the overall design of your forms without writing any custom CSS? The form themes feature in WPForms provides ready-made designs that you can easily apply to your form.

This tutorial covers how to use the form themes feature in WPForms.

Note: The form themes feature is only available in the block editor. You’ll need a site with block editor support to access it. See our tutorial on styling WPForms without custom CSS for more details.

Before getting started, make sure WPForms is installed and activated on your WordPress site.

Accessing Form Themes

To access the form themes feature in WPForms, you’ll first need to create a new form or edit an existing one to access the form builder.

You can also use one of our form templates to get started easily. After selecting a template, you’ll be able to add new fields or edit existing fields in the template you selected.

Once you’re done customizing your form’s field options and settings, be sure to save your changes and embed the form to a page or a post on your site.

Customizing Form Themes

In the block editor, you’ll see options to style and customize your WordPress forms. The Themes section includes all the available theme styles WPForms provides.

Themes section in the block editor

Note: If you’re using the Lite version of WPForms, you’ll only have access to the Classic and Default theme styles. You’ll need to upgrade to a Pro license or higher to access premium theme styles.

In the next sections, we’ll showcase some of the form themes WPForms provides out of the box. This will give you an overview of how they’ll look when applied on your site.

Modern (Default)

This is the theme applied to all forms on your site by default. It uses a blue accent color for elements like the submit button and progress bar.

Default modern theme

After selecting a theme, you can update the theme styles similar to how you would when styling your form in the block editor.

Once you update any of the themes, it creates a copy of the original theme with the new styles you’ve added. This new theme would have (Copy) appended to the name of the theme. For our example, the name is Default (Copy).

Copy of Default theme

You can rename the custom theme by updating the text in the Theme Name field.

Update theme name

Below the Theme Name field, you’ll find the Delete Theme link. This link is helpful if you want to delete custom form themes on your site.

Delete theme

When you click on it, an overlay will appear asking you to confirm whether or not you’d like to proceed with the delete action. Simply click the Yes, Delete button to proceed.

Note: This step is irreversible and you won’t be able to access the custom theme after deleting it from your site.

Confirm delete


The classic theme style uses very minimal CSS with a gray accent color for the submit button.

Classic theme


The ocean form theme looks similar to the Modern style with a dark teal accent color for form elements like buttons and number sliders.

Ocean theme


The Tangerine style uses similar styling options for the fields. However, it applies an orange accent color to form elements like buttons, progress bars, number sliders, etc.

Tangerine theme


The Aero design applies a light gray background color to the form’s container with a blue accent color. It also has a box shadow applied to the container. This gives the form a modern elevated look and feel.

Aero theme


The Concrete style uses a pink accent color for form elements like buttons, pagination, and number sliders. It also adds a dark concrete background image to the form’s container.

Concrete theme

The first time you select a theme that requires a background image, you’ll need to download the image before the styles will be applied. An overlay will appear prompting you to download the image. Click Continue to download and import it.

Instll background for themes

Note: Downloading the background image for a theme will also download all the stock images other theme requires. So you won’t need to run through the process if you select a theme with a different background image.

If you’d like, you can update the background image from the Background Styles section.

Background styles section

You can choose between your site’s media library or stock photos as the image source. If you select the Stock Photo option, you’ll be able to choose from the available stock images by clicking on the existing image.

Select stock photo

The Background Styles section also contains options to customize the image size, position, and repeat.

Background styles options

If you’d like to remove the background image, click the Remove Image button.

Click the Remove image button


The Elegance theme style applies a border radius around the form’s container. It also uses a background image for the form container widget. Giving it an appealing, modern look.

Elegance theme


The Fresh theme style adds a background image with fresh green leaves. It also uses green as the accent color for form elements like buttons.

Fresh theme


This form theme style acts as a dark mode theme with a dark background around the form’s container. It uses a green accent color for form elements like buttons and number slider fields.

Gloom theme


The Hallway theme uses a dark accent color for form elements like buttons, number sliders, etc. It also applies a background image to the form’s container.

Hallway theme


This form theme applies box shadows and rounded corners to the form’s container. It also uses a stock image as the background of the container widget.

Lush theme


The Monstera theme uses a modern design with a green accent color and rounded corners for the form’s container. It also applies a nice-looking stock image as the background of the form container.

Monstera theme


This form theme uses a modern design with a sunset image as the background. It also applies styles like borders, border radius, and box shadows to the form’s container.

Range form theme


The Spring form theme adds box shadow to the form’s container and uses a gradient stock image as the background. It also uses a blue accent color for form elements like the submit button.

Spring form theme


This form theme comes with a vintage look and feel. It uses a custom background color for the form’s container and a yellow accent color for form elements.

Vintage form theme

After choosing a theme for your form, you’ll need to either publish the page or save it as a draft to save your changes.

Save changes

Once done, you can embed the form to any part of your site and it’ll retain the styles you’ve configured in the Themes section.

Frequently Asked Questions

These are answers to some of the top questions we see about using form themes in WPForms.

Can I apply form theme styles to form templates?

Absolutely. Once you’ve selected the form template you want to use, proceed to embed it on a page with block editor enabled. In the block editor, you’ll be able to choose from the available theme styles to design your form template. See the customizing form themes section for more details.

That’s it! You’ve now learned how to access and use form themes in WPForms.

Next, would you like to learn how to accept payments through your WordPress forms? Our tutorial on creating a payment form covers all the steps in detail.