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:
- 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.
- 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!
Worked like a charm. Thank you!
You’re most welcome, glad it worked for you!
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…
That saved my day, thank you so much 🙂
You’re most welcome, glad it helped!
Thanks, this saved my day, kinda weird divi didnt made it simple.
Glad it worked for you Omar!!
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…
Glad to hear it worked for you!
That is a good question, maybe in a future update…
Good point John. I am looking forward to this too. This is such a struggle…
It worked the first time because I did everything, including the quotes thing ^_^
Glad it worked for you!
Awesome clean and fast mini tutorial. Thank you!
You’re most welcome, glad it helped!
How can I make the contact button full width?
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!
Thanks a lot for this tutorial. Like it was said, don’t know why Elegant Themes didn’t solve this issue yet.
My pleasure, hope it helped!
Thanks for the tutorial, I have saved it to my Divi snippets folder.
Glad you liked it!
Excellent! it works really nice!
Glad to help!!
Worked after re-typing the quotes! Thanks!!
Glad to help! 🙂
You’re an angel.
Thanks.
Glad to help! Have a wonderful day!
Awesome!
Glad it helped!
You solved my issue thanks a ton! 🙂
Glad it helped you out!
wonderful!! very easy thanks
Glad it worked for you!
Thank you very much! At first it didn’t work for me, but after reading the comments and deleting the quotes it worked.
Glad to help!