Would you like to style the look and layout of your forms 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.
Note: Not sure if CSS Hero is the right solution for you? Try out a live demo of CSS Hero with WPForms.
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 video tutorial for additional guidance.
Finally, create a form and add it to a page or post.
Styling Forms With CSS Hero
Once you have all the necessary plugins installed 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 frontend of your site. Log in to your WordPress admin account, then navigate to the page with the form you want to style.
Once you’re viewing the page, you should see an option in the WordPress admin toolbar at the top of the screen labeled CSS Hero.
This option will load the CSS Hero interface over the top of your page. You can then click on any element on the page to customize its appearance.
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.
Note: Unfortunately, we can’t cover every available customization option provided by CSS Hero in this tutorial. For more details on what you can do with this plugin, please see its documentation.
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.
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, and more.
Once you’ve decided on the styles you want to keep, you can click the Save button in the bottom right corner of the screen. The styles should then become visible on your live site.
Note: If you have a caching plugin installed on your site, you’ll likely need to clear the cache before you can see your custom styles.
To exit the CSS Hero editor, click the power button in the top right corner of the screen. It’s shaped like a circle with a line through it.
Additional Tips for Using CSS Hero
CSS Hero includes tons of options, and some may not sound familiar. Below are a couple of additional tips to help the process of styling your forms go smoothly.
Tooltips
If you’re ever unsure what a style option is, CSS Hero offers helpful clarification with tooltips.
Just hover over the term in question and click the question mark (?) icon that appears. This will display a description of that style option.
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 our submit button example. After selecting the submit button to edit its styles, we’ll click on the Snippets tab in the left panel.
Then we’ll click on the Buttons section to open it.
Several built-in button options will appear. For this example, we’ll use .btn-3d. First, click on the Set Params… button to open additional options for this snippet.
Here, we have the option to change the color scheme for this style using a color picker or HEX code. When you’re happy with any customizations you want to make, click Apply.
This will override our earlier styles and apply this pre-built button design instead.
If you want to undo the changes made by a ready-to-use style, click on Remove under the design you applied.
That’s it! You can now style your forms without touching any code thanks to CSS Hero.
Next, would you like to customize your form emails? Be sure to check out our notification email tutorial for details on how to set them up, change the email background color, and add a logo.
