Divi Theme Tutorials

In this quick Divi Theme Tutorial, I am going to show you a fairly simple way to change the text on the Divi contact form submit button.

 

Here are the steps to accomplish this tutorial:

  1. The first step is to build your form using the Divi contact form module. You will need to give your form a unique custom CSS class in the Custom CSS section of the contact form module. For this example I will be using “free-consultation” as my unique CSS class, but you may use whatever you like.
  2. Next you will need to copy the code below and paste it into Divi -> Theme Options -> Integration -> Add code to the < head > of your blog. **you will need to change the “free-consultation” in red to whatever you used in step 1, and change “Get Your Free Consultation” to whatever you would like your submit button to say.**

     
    Here is the code that makes the magic happen –

    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(“.free-consultation button.et_pb_contact_submit”).text(‘Get Your Free Consultation‘);
    });
    </script>

 

*If for some reason this isn’t working, try removing and re-typing the single and double quotes in the code above and see if that works for you. Sometimes copy/paste can affect the code and this should fix it for you.*

**You can repeat the steps above to set the text for as many forms as you’d like, just make sure to set a different CSS class for each form and change the code to use the new CSS class.**

 

That’s it, simple right?

You can see an example of this on the form below.

I hope you find this simple Divi Theme Tutorial helpful and if you ever need help building your Divi website, please consider contacting us!

Need Help With Your Divi Website?


30 Comments

  1. CHRIS

    Worked like a charm. Thank you!

    Reply
    • mm

      You’re most welcome, glad it worked for you!

      Reply
  2. Litbea

    Thank you very much! At first it didn’t work for me, but after reading the comments and deleting the quotes it worked. Also, I am reusing the class in many forms.

    Maybe you could paste the code in a way that quotes are not a problem when copying? Just a suggestion…

    Reply
  3. Bjarte

    That saved my day, thank you so much 🙂

    Reply
    • mm

      You’re most welcome, glad it helped!

      Reply
  4. Omar

    Thanks, this saved my day, kinda weird divi didnt made it simple.

    Reply
    • mm

      Glad it worked for you Omar!!

      Reply
  5. John

    Thanks a bunch, works great 😉
    But I still don’t get why a field “button name” is not a standard for the contact form module…

    Reply
    • mm

      Glad to hear it worked for you!
      That is a good question, maybe in a future update…

      Reply
    • gene

      Good point John. I am looking forward to this too. This is such a struggle…

      Reply
  6. Marcos

    It worked the first time because I did everything, including the quotes thing ^_^

    Reply
    • mm

      Glad it worked for you!

      Reply
  7. Jona

    Awesome clean and fast mini tutorial. Thank you!

    Reply
    • mm

      You’re most welcome, glad it helped!

      Reply
  8. mamun

    How can I make the contact button full width?

    Reply
    • mm

      You could try adding custom CSS like this (you will need to adjust the 20% to get the desired width you need)-

      .et_pb_contact_form_0.et_pb_contact_form_container .et_contact_bottom_container .et_pb_contact_submit.et_pb_button {
      padding-left: 20% !important;
      padding-right: 20% !important;
      }

      Hope that helps!

      Reply
  9. Phil

    Thanks a lot for this tutorial. Like it was said, don’t know why Elegant Themes didn’t solve this issue yet.

    Reply
    • mm

      My pleasure, hope it helped!

      Reply
  10. Kev

    Thanks for the tutorial, I have saved it to my Divi snippets folder.

    Reply
    • mm

      Glad you liked it!

      Reply
    • mm

      Glad to help!!

      Reply
  11. Martijn

    Worked after re-typing the quotes! Thanks!!

    Reply
    • mm

      Glad to help! 🙂

      Reply
  12. Boris

    You’re an angel.
    Thanks.

    Reply
    • mm

      Glad to help! Have a wonderful day!

      Reply
  13. Pawel

    Awesome!

    Reply
    • mm

      Glad it helped!

      Reply
  14. Anmol maheshwari

    You solved my issue thanks a ton! 🙂

    Reply
    • mm

      Glad it helped you out!

      Reply

Submit a Comment

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