By default, when the Contact Form module is successfully submitted, we have the opt-in module to display a custom Success message.
The Success message can be set by editing the Contact Form module > Content Tab > Text > Success Message.
We can also have the visitor be redirected to a specific URL of our choice by enabling the Redirect URL and setting up the desired URL to which the visitors will be redirected after successful submission.
In the following steps, we will display a custom button that the users can click on, and they will get redirected to the URL of their choice.
Edit the Contact Form module and go to the Advanced Tab
In the Advanced Tab, locate CSS ID & Classes, and enter
divi-cf-success-buttonas a custom CSS class. This class will be utilized in the CSS and JS code later on.
Add the following JS code to Divi > Theme Option > Integration tab > Header.
<script id="divi-add-a-custom-button-to-the-success-message">
(function ($) {
$(document).ready(function () {
$('.divi-cf-success-button .et_pb_contact_submit').click(function () {
$(document).ajaxComplete(function () {
$('.divi-cf-success-button .et-pb-contact-message').append(
"<a href='redirection_url_here' class='divi-cf-success-button'>Button Text Here</a>",
);
},
);
})
});
})(jQuery);
</script>To style this custom button, add the following CSS code to Divi > Theme Options > General Tab > Custom CSS:
/*Style the custom success button*/
.divi-cf-success-button a.divi-cf-success-button {
display: inline-block;
background: #6c2fb9;
color: #ffffff;
font-size: 20px;
border-radius: 50px;
padding: .7em 1.3em;
margin-top: 20px;
transition: all ease .3s;
}
/*Style the custom sucess button on hover*/
.divi-cf-success-button a.divi-cf-success-button:hover {
background-color: #e4e4e4;
color: #6c2fb9;
}
Note:
The button we just created has the CSS class of
divi-cf-success-button- You can use that class to add more style or change the abovementioned ones.Make sure that in the JS code (step 3) the
hrefvalue is changed to your desired URLMake sure in the above JS code, you change the Button's text by replacing the
Button Text Herewith your own.
The final result can be seen in the GIF below:
