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
Hola, Lo he probado y funciona a la perfección.
Lo único que necesito que envíe la descripción corta del producto en vez de la URL.
Saben como puedo hacerlo?
Gracias
Sorry we do not have a tutorial for this – but it would be similar method of hiding the short description on the page and then on load, to automatically add this text
hey there! I think i’ve tried this correctly – would it make any difference on a WP Multisite? I’m receiving the email, but where the info would be is blank / empty.
To recap I’ve added two fields (Input Field), made them display:none, added the code to my functions.php file in child theme, and added the fields to my email, e.g. %%page_name%%
Yes should work – send a link to the page so I can see, might be able to find out
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!