WPForms Documentation

Documentation, Reference Materials and Tutorials for WPForms

How to Customize WPForms with CSS Hero (Without HTML or CSS)

Want to style the look and layout of your form to match your theme? We made it easy to style WPForms with our CSS Hero integration.

CSS Hero is a premium WordPress plugin that allows you to customize the design of your WordPress theme without writing a single line of code (no HTML or CSS required).

How to Style Forms With CSS Hero

First, you’ll need to have both WPForms and CSS Hero installed and activated. Here’s how to install and activate WPForms.

You’ll also need to have a form created.

CSS Hero allows you to customize your website’s style from the front end of your site. So, instead of using the dashboard, you will have to view your form on your website.

You’ll notice the CSS Hero menu will now display in the upper-right corner of your site.

CSS Hero Floating Menu

Click on the top icon to open up the main CSS Hero menu.

CSS hero main menu

You can now hover your mouse over any area of the page to customize its design in just a few clicks.

In our example, we’ll change the color of the submit button to red, using the built-in color picker.

style WPForms submit button with CSS Hero

It also allows you to easily change the text, border, size, and many other properties.

If you’re not sure how you want to style your forms, CSS Hero includes a number of “readymade styles” you can choose from.

CSS Hero Readymade Styles

There are even a number of readymade form styles to choose from, to make styling your form even faster and easier.

CSS Hero readymade form styles for WPForms

CSS Hero makes it easy to customize the look of your form in just a few clicks, with no coding knowledge required.

If you know CSS and would rather customize your forms styles manually, see our doc on How to Add Custom CSS to Your WPForms.