Say NO to Ugly Divi Form Notices

Yes yes, beauty is all about what is on the inside and not the outside, but what if you can have both? Would you say no? Wouldn’t you want to know how to create Custom Divi Form Notices Using the Divi Builder along with a little plugin called the Divi Form Builder? I sure do, and when you see how quick and easy it is to do, so will you.

These Divi Form Notices are a great way to convey extra information to the user after they have completed your form. Some uses could be next steps, a coupon code or just a general thank you for them being them.

Why don’t you join me as I explore one of the many features you’ll find in this solid 10 in both the beauty and brains department. Just like colored contact lenses, you don’t need to tell people you wear them, all they’ll do anyway is stare in awe.

BUT!

And there always is a but, but let me start by showing you how one would do some basic styling just using some sweet sweet lines of CSS code. After that, we’ll do something we’ve not done in a while, which is to do a quick tutorial on one of our plugins that just basically makes life 1000% easier.

We’ll dive into how you’d go about creating custom success or failed Divi form notices. To do this we’ll be using Divi Form Builder and the Divi Builder you already know about as well as that one itchy spot you can’t reach that drives you nuts.

Good news! Divi Form Builder was designed to scratch the itches the stock Divi Form Module does not. In about 5 minutes flat we will build a form using Divi Form Builder, build a form notice layout using the Divi Builder, then assign that layout and scratch that itch. Now, as always, I ramble on and get into more detail in the videos so I definitely recommend you watch that instead, but here follows the also expertly crafted text version.

Ready?

Preview:

BEFORE
Standard Divi Form Notices
AFTER
Styled Divi Form Notice with CSS
AFTER ++
Customized Divi Form Notices

Video Tutorial

PART 1

Style the Divi Form Success Message with CSS

So let’s chat quickly about the limitations here. Divi definitely allows you to change the text of your Success and Failed form notices, but where it lacks is in the ability to easily style the text that is displayed in those notices. For this, we need to use a little workaround that requires some CSS. It is also important to note that all we can do here is style the text, we can’t use the Divi Builder or anything fancy like that, so temper your expectations, hehe.

Let’s do that, shall we?

First, we will add some CSS to the Divi Theme Options that will style our Divi Form Success Notices.

Divi > Theme Options > Custom CSS

Adding Custom CSS to Divi

Copy and Paste the code below in the Custom CSS box.

Voila! You already have a somewhat better-looking Divi Form Notice going on. This was pretty easy, but your options are also pretty limited.

Now, let’s get out the big guns and look at how we can completely transform your Divi Forms using the Divi Form Builder plugin.

PART 2

Building the Divi Form Builder Layout

How exciting! You own the Divi Form Builder plugin, so the power to create custom Divi form notices with the Divi Builder rests in your hands. Go you! Now before we gel our hair, bust out the cologne, and get all fancy, we first need to set the stage by building a form for our custom Divi form notice.

Let’s do that, shall we?

To start, Add a New Page, Single Column Row, and Divi Form Builder Module.

Pages > Add New > Add a Single Column Row > Add a Divi Form Builder Form Module

Add a Divi Form Builder Form Module

Divi Form Builder Form Module Settings

Add New Form Field

Field Options

Field Title: “Name”
Type:Β Input Field
Required Field: YES

Layout Options

Field Label Position: Top
Placeholder Text: “Enter your name”
Enable an Icon on the input: YES
Icon: Search “person” and add an icon

SAVE

Add New Form Field

Field Options

Field Title: “Email”
Type: Email Field
Required Field: YES

Layout Options

Field Label Position: Top
Placeholder Text: “Enter your email”
Enable an Icon on the input: YES
Icon: Search “email” and add an icon

SAVE

Add New Form Field

Field Options

Field Title: “Sign Here”
Type: Digital Signature Field
Required Field: YES

Layout Options

Field Label Position: Top

SAVE

When you’re done, you should see something like the image below after you submit the form.
Standard Divi Form Notices

Building the Custom Divi Form Notice Layout

Boom, we got that Divi Form Builder form done with our unique digital signature field in no time, so now we can get to the fun and how you how to create a custom Divi form success message using the Divi Builder and Divi Form Builder. Yes, those sound the same.

Divi > Divi Library > Add New

Layout Name: “Success Notice”
Layout Type: Layout

New Divi Library Layout
Add a Divi Form Builder Form Module

Great, now we just need to structure this layout with the needed rows and modules. You definitely shouldn’t build the layout I’m building because I am a terrible designer, here you have the freedom to create what you want. Just makes sure it conveys the information to the user that you want them to know AFTER submitting the form.

Let’s add a Two-Column Row then a Text Module.

Text Module Settings

CONTENT TAB
Text

Body(Text View):
<h1>Thank you!</h1>
We appreciate you submitting our form, here is a coupon for ya.

DESIGN TAB
Text

Text Font Weight: Light
Text Text Color: #2d3436
Text Text Size: 21px
Text Letter Spacing: 1px

Heading Text (H1)

Heading Font Weight: Ultra Bold
Heading Text Color: #2d3436
Heading Text Size: 47px

SAVE

We will add some spice by including a coupon code for folks that submitted their form. Do note that we won’t be actually creating the coupon code, this is just to demonstrate a use-case for the custom Divi from notice.

Let’s add another Text Module.

Text Module Settings

CONTENT TAB
Text

Body: “COUPON CODE: YOURCOUPON”

Background

Background Color: #f4f4f4

DESIGN TAB
Text

Text Text Size: 22px

Spacing

Padding Top/Bottom/Left/Right: 15px

Border

Border Width: 1px
Border Color: Red
Border Style: Dashed

SAVE

Divi Form Notice Layout half-way done

Right now we are at the halfway point and your form should look something like this. Now we’ll wrap things up for this Custom Divi Form Notice layout by adding some extra bells and whistles.

Let’s add an Image Module in the second column.

Image Module Settings

CONTENT TAB
Image

Image: Pick a portrait photo from Pexels.com

DESIGN TAB
Sizing

Max Width: 300px

SAVE

Let’s wrap it up by adding some styling to the Row.

Row Settings

DESIGN TAB
Spacing

Padding Top/Bottom/Left/Right: 50px

Border

Border Width: 1px
Border Color: #2d3436
Border Style: Dotted

SAVE

Completed Divi Form Notice

All done, now all that is left to display this custom Divi Form Notice is to assign the layout in the Divi Form Builder Form Module.

Assigning the Divi Form Notice Layout to the Form

Down to the last super simple step, we just need to head back to the Page we created in the first step and go assign this custom Divi form notice to the Divi Form Builder form we created. This is as easy as 1-2-3 so let’s go.

Pages > Edit Page > Form Settings

Assigning the Divi Form Notice Layout

Divi Form Builder Form Module Settings

CONTENT TAB
Notices

Success Message Type: Divi Layout
Success Message Layout: Success Message (or whatever you named the layout you created)

SAVE

And that is it! After you submit your form now, it should display this custom Divi Form Notice. Not too shabby!

Customized Divi Form Notices

Formidable? Not so much…

Conclusion

Sorry, I forgot to tell you to boil some water for your coffee before we started learning how to create Custom Divi Form Notices Using the Divi Builder and our Divi Form Builder plugin because that would have been ready just about now. My bad. That said, hopefully, you followed along and are now saddled with the skills needed how to quickly build some amazing notices that will convey extra information, convert visitors into customers, or just add some pazazz to your Divi sites.

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!

Catch you folks next week!