WPForms Documentation

Documentation, Reference Materials and Tutorials for WPForms

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

Would you like to style the look and layout of your form to match your site’s theme? 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).

In this tutorial, we’ll show you how to use CSS Hero to style your forms with just a few clicks.

Getting Started

First, you’ll need to make sure that WPForms is installed and activated on your site.

If you haven’t already, you’ll also need to sign up for CSS Hero. Then, make sure you’ve installed and activated the CSS Hero plugin on your site. You can follow CSS Hero’s tutorial video for additional guidance with this.

For the last setup step, be sure that you’ve created a form. You’ll need to display your form on a page or post, as well.

Styling Forms With CSS Hero

Now that the basic setup is complete and your form is embedded, you’re ready to start styling your form.

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

Once you’re viewing the page, you should see an option labeled Customize with CSS Hero in the WordPress admin bar at the top of the screen.

Open CSS Hero on WordPress page

This option will load the CSS Hero interface over the top of your page. You can now hover your mouse over any area of the page to customize its appearance.

CSS Hero interface

In our example, we’ll change the design of the form’s submit button. To start, we’ll simply click on the button. This will open customization options in the left panel.

Open customization panel for submit button

First, we’ll change the background color of the button. To do this, we’ll click on the Background section to open it. Then under Background Color, we’ll use the color picker to choose a color.

The change will show up right away in the page preview to the right.

Change the background color of the submit button

There are tons more styles we can add next. For example, we can change the font size and color, the text style (italics, underline), the border thickness and color — any so many others.

Style form button with CSS Hero

Once you’ve decided on the styles you want to keep, you can click the Save & Publish button in the bottom left of the screen. Then, the styles should become visible on your live site.

Save changes in CSS Hero

Note: If you have a caching plugin on your site, you’ll likely need to clear the cache before these style changes appear.

Additional Tips For CSS Hero

CSS Hero includes tons of options, and some may not sound familiar. Below are a couple of additional tips to help smooth the process.

Tool Tips

If you’re ever unsure what a style option is, CSS Hero offers helpful clarification within tool tips.

Just hover over the term in question and click the question mark (?) icon that appears. This will display a description of that style option.

Tool tip in CSS Hero

Ready-to-Use Styles

Instead of changing a form element’s appearance one style at a time, you can choose from some built-in designs.

To demonstrate, we’ll continue with our submit button example. After clicking on the submit button to edit its styles, we’ll click on the Snippets tab in the left panel.

Then we’d need to click on the Buttons section to open it.

Open built in design options

Several built-in button options will display. For this example, we’ll use .btn-pill(). To enable this option, we’ll first need to click the button with three dots ().

Built in button designs in CSS Hero

Now we can choose certain customizations (in this case, the color) and then click Apply.

Customize and apply built in button design

This will override our earlier styles and apply this new button design instead.

Example of built-in button design

That’s it! You can now style your forms without touching any code.

Next, would you like to customize your form emails? Be sure to check out our notification email tutorial for details on how to set these up, and even change the email background color or add a logo.