How To Add A Button To The Divi Contact Form Success Message

This tutorial will show you how to add a button to the Divi Contact Form success message and style the text and button with CSS.

Categories: Divi Contact Form Divi CSS Divi jQuery Tutorials

Direct Users After Submitting A Form

Where do people go after submitting a contact form on your site? Chances are it’s a bit awkward. Why not direct the user to another page instead of letting them exit the site? This is your chance to direct their attention to something else you want to sell or educate the website visitor about, and adding a button is the way to do it. So in this tutorial I am going to show you how to add a button to the Divi Contact Form success message!

FYI: You can do this with a setting directly in the Divi Contact Form module with our popular Divi Contact Form Helper plugin! Take a look, it is so easy!

Divi Contact Form Helper by Pee Aye Creative

1. Add A Custom CSS Class To The Divi Contact Form

The first step to adding a button to the success message after a form is submitted is to add a custom CSS class to the Contact Form module. This is used to target the module with the code shared in steps 2 and 3 of this tutorial. Open the module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-contact-form-success-button” in the CSS Class input field of the Contact Form module.

add custom CSS class to add success button to the Divi Contact Form module

2. Use jQuery To Add A Divi Contact Form Success Button After Submission

By default, Divi already has the option to show a success message as text, so make sure to have something written in the module in the Success Message field like shown in the screenshot below, then proceed with adding the jQuery code which attaches onto the success message text and adds the button.

add a success message to the Divi Contact Form module

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>
jQuery(document).ready(function () {
    jQuery(".pa-contact-form-success-button .et_pb_contact_submit").click(function () {
        if (jQuery(".pa-contact-form-success-button .et-pb-contact-message ul").length == 0) {
            var x = setInterval(function () {
                if (jQuery(".pa-contact-form-success-button .et-pb-contact-message p").length == 1) {
                    jQuery(".pa-contact-form-success-button .et-pb-contact-message").append("<a href='https://YOURDOMAIN.COM' class='pa-success-button'>YOUR TEXT HERE</a>");
                    clearInterval(x);
                }
            }, 200);
 
        };
 
    });
});
</script>

Replace Button Text

Be sure to write your own text for the button. You can update the part of the code that says YOUR BUTTON TEXT HERE with your own call-to-action text.

Replace URL With Your Own

Be sure to replace the URL in the code that says YOURDOMAIN.COM with the URL of the page where you want the user to go to after they submit the form.

3. Style The Success Button With CSS

At this point, a link will show below the success message text. You could leave it as is, or you could style it like a button. In my opinion, it looks great and gets more attention when the link is styled like a button, so if you want to do that you can apply the CSS snippet below and customize the values however you want.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*style the success button*/

.pa-contact-form-success-button a.pa-success-button {
	display: inline-block;
	background: #00d263;
	color: #ffffff;
	font-size: 20px;
	border-radius: 50px;
	padding: .7em 1.3em;
	margin-top: 20px;
	transition: all ease .3s;
}


/*style the sucess button on hover*/

.pa-contact-form-success-button a.pa-success-button:hover {
	background-color: #ebf8f1;
	color: #00d263;
}

Do It With A Setting!

Make life easier and use the Divi Contact Form Helper plugin instead, the ultimate Divi Contact Form upgrade with awesome features and settings!

success button and message settings in the Divi Contact Form Helper plugin

The Divi Contact Form Helper plugin has the option to enable the button with a simple toggle setting! We also have an option to write custom button text, choose either a custom URL or page, input the custom URL or choose a page, and set whether the link opens in the same window or a new tab.

Learn More About The Plugin

Last updated Mar 21, 2022 @ 6:19 pm

That's it!

I hope you have enjoyed learning How To Add A Button To The Divi Contact Form Success Message. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Become A Member!

Gain access to everything we offer!

Learn More



Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Philipp on April 15, 2022 at 2:58 pm

Hi Nelson,

Thank you so much for this tutorial it is incredibly helpful. Can you please say what to change in the code to make it work in the Divi OPT-IN module as well?

I want to allow the person to download an ebook once they have subscribed to my newsletter.

Thank you in advance,
Philipp
Reply
- Hemant Gaba on April 22, 2022 at 10:18 am
  
  Hey Philipp,
  
  I wrote a custom code for this, please go to this URL https://www.codepile.net/pile/q3Y64kKd follow the instructions and let me know how it goes.
  Reply

How To Add A Button To The Divi Contact Form Success Message

Direct Users After Submitting A Form

1. Add A Custom CSS Class To The Divi Contact Form