How to Style WPForms in Divi?

Nazmul Asif

Updated: January 21, 2023
Table of Contents

We have styled an awesome signup form for the Divi website.

Without even writing a single line of code! Yes, it was that simple. 

Aren’t you getting curious?

Hmm! We know what’s going on in your mind: How to style WPForms on the Divi website?

Today, you are going to see the creative and flexible way to customize a signup form made with the WPForms plugin for the Divi website.

Form Made using WPForms Plugin

Instead of building an ordinary form, you will design an attractive form that works for generating effective business resources like email leads.

More importantly, you will also learn a compelling illustration for amplifying trust and relationships.

Let’s see how we have done it.

How to Install and Activate WPForms Plugin?

The styling process needs the WPForms plugin. If you already have this plugin installed. You can skip this part and get to the styling part.

  • Go to the WordPress dashboard. Install and activate the WPForms plugin from the WordPress free repository. Follow Plugins> Add New.
  • You’ll be redirected to the page where you have to browse for “WPForms” on the top-right search bar. Click install, then activate it.
  • Congrats! WPForms is in your dashboard.

How to Add a WPForms in Your Website?

Access your WordPress dashboard to add a WPForms. Here, navigate to WPForms> Add New. And your screen launches the WPForms builder.

And this is what the WPForms builder looks like:

Start from scratch or choose a template to create a form. Check here for a beginner’s guide to creating WPForms.

Now for this tutorial, we are styling a ready-made WPForms template called “Conference Registration Form.” Scroll down to locate this form.

Before going to the next step, name your WPForms first. For our form, it is the “Conference Registration Form.”

As you will find the form, hover over it, and you will see the “Use Template” option. Click it. Or hit the “View Demo” button to see the demo of this form.

So, you have successfully added the form. You can also edit the form anytime. For this, visit WordPress Dashboard > WPForms > All Forms. You will see the list of all WPForms.

Now that we have a WpForms to style with, our next step will be to edit the WPForms to meet the WPForms design we will do.

Change the following field settings from the WPForms builder to organize your form better. Here, note that all the changes will be made from the “Advanced” option of each field setting.

  • Add placeholder text with the Name field. First Name: First, Last Name: Last. Also, check the “Hide Sublabels” option.
  • Make the field size “Large” and include placeholder text “Enter Your Email” in the Email field.
  • Change the choice layout to “Inline” for the Multiple Choice field.
  • And choose “Three Columns” from the Choice Layout option for the Checkboxes field.

Lastly, hit the “Save” button, and you are done with the WPForms builder area. For now, see the amazing WPForms below.

WPForm Before Styling With DiviFlash

This is how we have styled our WPForms on our Divi website. Check this demo here and download it for practice. Let’s drive to our “how to style WPForms in Divi” guide. 

Prerequisite:

  1. Divi Theme.
  2. DiviFlash Plugin.

How to Style WPForms in Divi?

You will start by creating a new page for the signup form.

Section Design

Add a regular section using the visual builder. In the content tab, we will add a gradient background.

In the Content Tab,

Under Background Option,

  • Gradient Background Left Color: #f7f4ff
  • Gradient Background Right Color: #ffffff
  • Gradient Stops: Desktop:57%, Tablet & Mobile: 100%
  • Gradient Direction: 90deg

Next, move to the design tab and make the following changes:

In the Design Tab,

Under Sizing Option,

  • Min Height: 100vh

Under Spacing Option,

  • Padding: 0px (Top & Bottom)

Row Design

At this point, we will add a two-column row (60/40). We just need a few customizations through the design tab here.

In the Design Tab,

Under Sizing Option,

  • Use Custom Gutter Width: YES
  • Gutter Width: 2
  • Width: 100%
  • Max Width: 100%
  • Row Alignment: Center

Under Spacing Option,

  • Padding: Left & Right 50px (Desktop), 25px (Mobile) 

Divi Modules

We will add an image and text module along with our DiviFlash WPForms Styler module to accomplish this design. Let’s insert them into the row.

Modules Designs

Click the gray plus icon inside the row. A module list window will appear. Use the search option or scroll down for your required module. To style our form, we will keep an image module in the first column. Then Add a DiviFlash WPForms Styler module to the second column along with a Text module above it.

So, add them one by one.

Image Module

Simply add an image in the content tab. And align the image to the center from the design tab.

In the Design Tab,

Under Alignment Option,

  • Image Alignment: Center

Text Module

Now, in the second column, we will add a text module. Write the text “Sign Up” here. 

In the Content Tab,

Under Text Option,

  • Body Paragraph: Sign Up

In the Design Tab,

Under Text option,

  • Text Font: Inter
  • Text Font Weight: Medium
  • Text Text Color: #250b59
  • Text Text Size: 32px
  • Text Line Height: 39px
  • Text Alignment: Center

Under Spacing Option,

  • Margin: Bottom 15px

Nothing more to do here. Next, add the WPForms Styler module beneath it.

WPForms Styler Module

First, select your form in the content tab. And, some more click works to do as the following changes:

In the Content Tab,

Under Content Option,

  • WPForms: Conference Registration Form

Note: The form list will show the saved form in your WordPress setup. So, you just need to select your preferred form. For example, in our turn, we labeled it as the default name of the form “DiviFlash WPForms Styling Tutorial.” It is available in the dropdown of the WPForms list.

Under Input & Textarea Background Option,

  • Background Color: #ffffff

Under Button Background Option,

  • User Gradient Background: ON
  • Gradient Color: #8646dd & #5d00ff
  • Gradient Direction: 94deg & On Hover: 266deg

Now, go to the design tab and do the customization below:

In the Design Tab,

Under Label Text option,

  • Label Text Font: Questrial
  • Label Text Font Weight: Bold
  • Label Text Text Color: #250b59
  • Label Text Line Height: 19px

Under Input & Textarea Option,

  •  Input & Textarea Font: Questiral
  •  Input & Textarea Text Color: #c2c2c2

Under Checkbox & Radio Option,

  • Checkbox & Radio Font: Questrial
  • Checkbox & Radio Text Color: #8178a4
  • Checkbox & Radio Line Height: 16px

Under Submit Button Option,

  • Alignment: Center
  • Submit Button Font: Questrial
  • Submit Button Text Alignment: Center
  • Submit Button Text Color: #ffffff
  • Submit Button Line Height: 19px
  • Rounded Corners: 4px (All Sides)

Under Input & Textarea Border Option,

  • Rounded Corners: 2px (All Sides)
  • Border Width: 1.5px
  • Border Color: #efebf8

The last phase of this design is updating the spacing as follows:

Under Spacing Option,

  • Label Margin: 10px (Bottom)
  • Input Margin: -6px (Top)
  • Input Padding: 20px (Top & Bottom)
  • Submit Margin: 10px (Top)
  • Submit Padding: Desktop 13px (Top & Bottom) 45% (Left & Right), Mobile 16px (Top & Bottom) 40% (Left & Right)

Yeah! That’s it. That way, all the design functionalities are drag and drop. And you have no issues with code. We hope now you have designed the best signup form compared to your competitors.

Final Thoughts

Tell us about your experience with our “how to WPForms in Divi website” tutorial. Does it come up with the best solution for your query? Or if you have any other questions or problems with this signup form design. Leave a comment below.

Nazmul Asif

Nazmul is digital marketing & SEO strategist at DiviFlash. He has been involved in data-driven digital marketing and SEO for over 8 years, specializing in growth marketing, content marketing, marketing strategy, link building and outreach. Before working for DiviFlash, he rans SEO business providing consultancy services.

0 Comments

Submit a Comment

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