1. Home
  2. /
  3. Divi Theme Tutorials
  4. /
  5. How To Change Text...

How To Change Text On Divi Contact Form Submit Button

by | Jul 27, 2016 | Divi Theme Tutorials | 34 comments

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!

34 Comments

  1. CHRIS

    Worked like a charm. Thank you!

    Reply
    • inovativ

      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
    • inovativ

      You’re most welcome, glad it helped!

      Reply
  4. Omar

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

    Reply
    • inovativ

      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
    • inovativ

      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
    • inovativ

      Glad it worked for you!

      Reply
  7. Jona

    Awesome clean and fast mini tutorial. Thank you!

    Reply
    • inovativ

      You’re most welcome, glad it helped!

      Reply
  8. mamun

    How can I make the contact button full width?

    Reply
    • inovativ

      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
    • inovativ

      My pleasure, hope it helped!

      Reply
  10. Kev

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

    Reply
    • inovativ

      Glad you liked it!

      Reply
    • inovativ

      Glad to help!!

      Reply
  11. Martijn

    Worked after re-typing the quotes! Thanks!!

    Reply
    • inovativ

      Glad to help! 🙂

      Reply
  12. Boris

    You’re an angel.
    Thanks.

    Reply
    • Dustin Reed

      Glad to help! Have a wonderful day!

      Reply
  13. Pawel

    Awesome!

    Reply
    • Dustin Reed

      Glad it helped!

      Reply
  14. Anmol maheshwari

    You solved my issue thanks a ton! 🙂

    Reply
    • inovativ

      Glad it helped you out!

      Reply
  15. Mar

    wonderful!! very easy thanks

    Reply
    • inovativ

      Glad it worked for you!

      Reply
    • Dustin Reed

      Glad to help!

      Reply

Submit a Comment

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

You might also like:

Pin It on Pinterest

Share This