How to Add submitted page or url to email in Divi contact module

Dear Divi Manics,

Ever wished to embed the page name and URL into the confirmation email dispatched via the Divi Contact module?

Consider scenarios where understanding the origin of a submitted contact form is crucial. For instance, managing a dynamic content-based website like real estate often requires insight into the property a visitor is inquiring about.

But how does one achieve this insight? How can you discern the page from which the contact form submission originates?

By default, Divi doesn’t provide a direct solution for this. However, fear not! This tutorial will equip you with the necessary steps.

Here’s the plan: We’ll augment the contact form by adding two concealed input fields, and using jQuery, we’ll dynamically inject the page’s name and URL. When a user submits the form, these fields will capture the relevant content, presenting it within the email form.

Let’s break it down:

1. Setting up Your Contact Module Begin by adding the contact module to your page. Within this module, integrate two fields, following the example image below. Crucially, ensure you:

• Assign a custom field ID (essential for later use).
• Apply “display: none !important;” in the custom CSS tab to hide these fields from plain view.

2. Adding jQuery to the Child Theme To fetch the page name and URL, a fusion of PHP and jQuery is required. As Divi’s Integrations tab won’t suffice, create a child theme and insert code into the functions.php file.

The code snippet contains comments for clarity. Essentially, it revolves around a WordPress action, “wp_footer,” which injects code into your website’s footer. Within this action, we define variables for the page name and URL. Utilizing jQuery, we populate the input field values with these variables, securing them as read-only to prevent autofill changes.

Here’s the code snippet:

function divi_add_page_name_id() {
    $page_name = get_the_title(); // Retrieves the page name/title
    $page_url = get_permalink(); // Fetches the page URL
    ?>
    <script>
        jQuery(document).ready(function($) {
            $('input[data-original_id="page_name"]').val('<?php echo esc_html( $page_name ) ?>'); // Inserts the page name into the designated field (change "page_name" to match the ID used in the Divi Contact Module for the Page Name)
            $('input[data-original_id="page_name"]').prop('readonly', true); // Prevents autofill from altering the value
            $('input[data-original_id="page_url"]').val('<?php echo esc_html( $page_url ) ?>'); // Inserts the page URL into the designated field (change "page_url" to match the ID used in the Divi Contact Module for the URL)
            $('input[data-original_id="page_url"]').prop('readonly', true); // Prevents autofill from altering the value
        });
    </script>
    <?php
}
add_action('wp_footer', 'divi_add_page_name_id'); // WordPress action to insert code into the footer of your website

Integrating with the Email The final step involves incorporating these inputs into your email form. You have the flexibility to choose your preferred method. Below is an example of how I included them in the form, along with a glimpse of how the email appears upon receipt.

Celebrate Your Success! Give us a virtual high-five as you witness these enrichments in your emails. We genuinely hope this guide proves beneficial, enabling seamless implementation on your websites.

Facing any challenges? Reach out to us. We’re here to assist!

Cheers!

PS
This article was been written based on this tutorial:

https://diviengine.com/how-to-add-the-page-name-and-url-to-the-confirmation-email-in-divi/

(I have also used his images because today I have no time to do different images… sorry.)