Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

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

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 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
      • Philipp

        Thank you so much. It worked like a charm.

        The only thing I cannot make the button, when clicked, to download the link (it is a pdf file) straight to the pc and not open in a separate tab. I have tried to add the “download” attribute after the link but it does not work.

        Do you have any ideas?

        Thanks.

      • Hemant Gaba

        Hey philipp,

        In the anchor tag that we are appending, you need to place a attribute name “download” to download the file directly to the machine like this:


        YOUR TEXT HERE

  2. Molly

    Hi Nelson,

    Thanks, as always for sharing this tutorial – super helpful! I’ve added the code and all looks great when I submit a successful form, however if I skip a field and hit “submit” the button still pops up among the field errors. Is there additional code needed to only display the button if a successful form is submitted? Thanks!

    Reply
    • Hemant Gaba

      Hey Molly,

      Could you please share the URL of the page where the form is present for me to investigate it further?

      Reply
  3. Luc

    Great post. I’ve implemented this, but when a user doesn’t fill all mandatory fields in the form, the button is shown before the form is submitted. How can I avoid that?

    Reply
  4. Tom

    Hi Pee-aye Creative/Nelson,

    Firstly, thank you for all of your great tutorials.

    I have the same question as many other users(Molly, Luc & Eranpm) and was wondering if there is a working solution for this, I’ve used your method on my website and it works well. However, the button also appears when the Divi form gives an error message, and in that case, the button’s location is quite random depending on the number of errors/blank fields. How can I make it appear only in case of a success message and not in case of an error message?

    Reply
    • Hemant Gaba

      Hi Tom!

      Thank you for reporting the issue. We’ll look into the issue further and update the guide.

      Reply

Submit a Comment

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

Recent Posts

0

Your Cart