How To Change The Button Color In WPForms Without CSS Code

Disclosure: Some of the links in this post are affiliate links. This means, if you click on the link and purchase the product, I will receive a commission at no additional cost to you. Don’t worry, I only recommend products or services that I have personally used and believe will add value to my readers.

Want to change the color of the button on the form that you created using the WPForms plugin?

Given below are the steps to change the button color of the WPForms form:

  1. Install and activate the Elementor plugin.
  2. Install and activate the PowerPack Addons for Elementor plugin.
  3. Edit the page with Elementor on which you want to place the WPForms form.
  4. Once Elementor is active, drag-and-drop the WPForms widget on the page.
  5. In the Contact Form field, select the WPForms form that you want to place on the page.
  6. Go to the Style tab.
  7. Expand the Submit Button panel and set the desired button color in the Background Color field.
  8. Click the Update button to save your changes.

Now, let’s take a look at each of these steps in detail.

How To Change The Button Color In A WPForms Form Using The Elementor And PowerPack Plugins?

First, install and activate the Elementor plugin. Then, install and activate the PowerPack Addons for Elementor plugin.

Once both the plugins are active, edit the page on which you want to place the WPForms form and click the Edit with Elementor button.

Edit with Elementor

You will then be taken to the front-end of your website with Elementor active on the page. Scroll down in the left-side Elementor panel until you see the PowerPack Elements widget group. Drag-and-drop the WPForms widget on the page.

Elementor PowerPack WPForms Widget

You should now see the widget settings in the left-side panel. Here, set the WPForms form that you want to place on the page in the Contact Form field.

Elementor PowerPack WPForms Content Settings

Now, go to the Style tab and expand the Submit Button panel. Then, set the button color that you want in the Background Color field. You can see that I have set green color as my button background color in the below image.

Set WPForms button color

Optionally, you can also set the button text color in the Text Color field. In the above image, you can see that I have set white color as the button text color.

There are a lot of other settings too that you can use to style the button. Play around with those to give you button the exact look-and-feel that you want.

Once you are done styling the button, don’t forget to click the Update button to save your changes.

And that’s it!

That is how you can change the button color of a WPForms form.

But what if you don’t want to use the Elementor or PowerPack Addons for Elementor plugins?

In that case, read this detailed tutorial on 4 different ways to style WPForms. You can use any of the methods mentioned in this tutorial to style your WPForms form without writing any CSS code.

Okay! Now what?

Recommended Further Reading:

Video Tutorial

Download Website Builders’ Toolbox


Next Steps…

PowerPack Addons for Elementor plugin has a lot of styling options that you can use to customize your WPForms forms.

So take a look at them and play around with all the available settings.

Finally, if you liked this small little tutorial, then please share it with your friends. I will really appreciate that.

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *