All Collections
Divi Documentation
Customizing Divi
How to add a Button to the Contact Form Success Message
How to add a Button to the Contact Form Success Message

After succesfully submiting a Contact Form, display a custom bottom after the success message.

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated this week

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.

Contact Form module custom thank you 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.

  1. Edit the Contact Form module and go to the Advanced Tab

  2. In the Advanced Tab, locate CSS ID & Classes, and enter divi-cf-success-button as a custom CSS class. This class will be utilized in the CSS and JS code later on.

  3. 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>",

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


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

  2. Make sure that in the JS code (step 3) the href value is changed to your desired URL

  3. Make sure in the above JS code, you change the Button's text by replacing the Button Text Here with your own.

The final result can be seen in the GIF below:

Did this answer your question?