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.
Want to try out a demo? Click here to open 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 tutorial video for additional guidance with this.
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.
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.
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.
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 — any so many others.
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.
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.
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.
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.
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 (…).
Now we can choose certain customizations (in this case, the color) and then click Apply.
This will override our earlier styles and apply this new button design instead.
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.