How to add custom CSS styles for wpforms plugin on your WordPress website

If you’d prefer to watch a short tutorial video, you can do so below.

(to be updated for a youtube video – How to add custom styles for WPForms plugin)

Table of Contents

The WPForms plugin allows users to create forms easily using drag & drop functionality. It comes with a lot of features like a captcha, validation, email confirmation, etc. You can customize the look and feel of the form fields using CSS.

I’ve been using WPForms for a while now, and basically, it’s my plugin for creating contact forms on a WordPress website. I use it on for contact forms for my services. It’s easy to use and has a lot of great features.

Our goal is to make your forms look great, so your visitors will love filling them out. I’ll cover a few different topics in this tutorial, including how to change the colors of your form, add custom CSS to your form, and style-specific form fields.

By the end of this tutorial, you’ll have a beautiful form that looks great and is easy to use.

Now, so let’s get started on how to create custom CSS styles for the WPForms tutorial.

Install and Activate WPForms Plugin

First, you’ll need to ensure that you have installed and activated the WPForms plugin on your website. If you don’t have the WPForms plugin installed and activated, you can download and install WPForms by going to the WordPress plugin directory website and searching WPForms, or installing the plugin by going to the WordPress admin dashboard in “Plugin > Add New.

How to add WPForms forms plugin
How to add the WPForms forms plugin

By the way, I purchased a WPForms yearly license(WPForm pricing), which has a few more useful features built-in. However, you can use the free version, which will work just the same.

Go to the WPForms settings dashboard

Go to the WPForms > Settings > General dashboard and find the “Advanced” section. In the “Advanced” section, you will see the “Form CSS Class” field. In this form field, “Form CSS Class,” I will add our first custom class name. I will use the class name “contact-form-wrapper.” You can use whatever you like for the custom class name, but in this tutorial, I will use the class name “contact-form-wrapper” for the form field “Form CSS Class.”

WPForms Settings Dahsboard
WPForms settings dashboard. Add custom CSS class name

Adding Custom CSS Using Theme Customizer

In the WordPress admin dashboard, users can add custom CSS directly by navigating to the Appearance » Customize section. After clicking Customize, it will launch the WordPress theme customizer interface. Next, you will see your site’s live preview with options on the left pane. Finally, click on the ‘Additional CSS’ tab from the left panel, and you will be able to see your changes with a live preview instantly.

Remember to navigate to the content(post/page) where your form shows via the WordPress admin Customizer. Just take a look at the image below to see where you can find it.

WordPress Global CSS styles - Additional CSS
WordPress Global CSS styles – Additional CSS

Adding CSS styles to WPForms – Custom styles of the main form container

(to be continued)

WPForms Sample the Default CSS styles and with the Custom CSS styles

WPForms – The contact form with the default styles (No custom CSS styles).

Sample WPForms contact form with the custom CSS styles

(to be continued)

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.