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
- Install and Activate WPForms Plugin
- Go to the WPForms settings dashboard
- Adding Custom CSS Using Theme Customizer
- Adding CSS styles to WPForms – Custom styles of the main form container
- WPForms Sample the Default CSS styles and with the Custom CSS styles
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 aljunmajo.com 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.“
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.”
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.
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)