How to add the page name and url to the confirmation email that gets sent out using the Divi Contact module.
Have you ever wanted to know what page the contact module is submitted from? Maybe you have a website with dynamic content such as real estate and you want to know what property the visitor is enquiring about.
How do you know this? How do you know what page the contact form is submitted from?
Divi by default does not have a way to do this, but after this tutorial, you will know how.
What we will be doing is to add two input fields to the contact form, hiding them and then using jQeury to add the name and URL of the page. When the user submits the form, these fields have the content that we can show in the email form.
1. Set up your Contact module.
The first thing you need to do is to add the contact module to your page.
Add two fields like we have done in the below image. The important thing to do here is:
– add a custom field ID (you need this later)
– add “display: none !important;” to the custom CSS tab. This will hide it from being visible
2. Add Jquery to Child Theme.
We need to use a mixture of PHP and jQuery to get the page name and URL, so we can’t use the Divi Intrgrations tab. We will have to create a child theme and add some code in the functions.php file.
The code has comments next to it to explain but in a nutsell we are adding a WordPress action “wp_footer” which adds code to the footer of your website. In this action we are defining variables which are the page name and url. We then use jQuery to change the value of the inputs to these variables and make them readonly so no autofill will change it.
The code is as follows.
3. Add to email.
The final step is to add these inputs to our email form. You can choose how you want to do this, below is an example of how I added them to the form and how it looks when you get the email.
4. Celebrate with a high-five!
Virtual high-five us as you see this appear on your emails. We hope this has helped you in some way and that you have a great time implementing this on your websites.
Any issues, let us know
Please disregard my previous comments, it’s working now!
Perfect thanks!
This works BRILLIANTLY in a post or regular page, but I’m having trouble using it in a Product template in the Theme Builder. I get the error message “invalid email” (even though email is valid) when attempting to submit the form. Any advice?
Wonderful tip and clear instructions, thank you! I’m trying to use this in the Theme Builder for a Woo Commerce Product Template, but get the error message “invalid email” when submitting the form (even though the email is valid). I tested your method in a regular post and it works great, but it won’t work in a Theme Builder template for “All Products.” Any suggestions?? Thanks in advance!
Nice, It’s working! The only problem is that when I include ID’s in the content of the message, I start getting emails in spam
What do you mean including ID’s?
when I select an attribute, the url changes, but it is not visible at the url address in the received message … what i’m missing here
What attribute?
Thank you ! It’s working !
Perfect thanks!
Hi! Thanks for this.
I tried it on Divi 4.7.5, but it doesn’t work.
Peeked into the source of the generated page, and the script is inserted into the page, but other than that, I can’t see the variables within the page.
Any hint is highly appreciated.
Hahahaha. Silly me. I forgot to thoroughly read the instructions.
The same is happening to me… what i’m missing?
this is very interesting!! Thanks! I would like to change also the name of the mail when arrive to the owner. Default it arrive with “[email protected]…”. is it possible to change “mail” with somenthing like. [email protected]…” ?
Do you mean to change who the email goes to?
no, just the name of the mail that arrive from the form to my computer. My site is cristina.com and the emails from my contact form arrive like : [email protected] in my PC. To identify the emails from the form I would like to receive : [email protected] Don’t know if is possible 😉
Not sure, if you are using Gmail or similar, you could set up a filter to add a tag or put it in a folder automatically
Is there a way to do this without creating a child theme and without having the custom code overwritten with any updates?
Perhaps with a plugin that can dynamically insert the necessary code in function.php?
maybe, this is our solution for now
Thx a lot !
You save my day
Pleasure – have a great week!