How To Add A Button To The Divi Contact Form Success Message Tutorial by Pee Aye Creative

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.

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!

Divi Contact Form Helper by Pee Aye Creative
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.

1

Last updated Mar 21, 2022 @ 6:19 pm

Subscribe

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Philipp

    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

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart