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

how to add the page id/name to divi contact module
how to add the page id/name to divi contact module
how to add the page id/name to divi contact module

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.

how to add the page id/name to divi contact module
how to add the page id/name to divi contact module

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