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!
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.
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.
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!
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.
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
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.
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.
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
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!
Hey Molly,
Could you please share the URL of the page where the form is present for me to investigate it further?
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?
That doesn’t sound normal, if you still face that issue you should contact Elegant Themes.