[Solved] How to add page's URL of the submitted contact form module (Divi)?

  

3
Topic starter

Hi, in my Divi WordPress theme - into the Contact Form module I would like to add custom attribute (message pattern);

I would like to know the:

  1. Name of the product
  2. Page's url

The goal is: to track from which page the customer wrote the message and recieve an e-mail sent from the Divi site.

How can I do it?

Thanks

1 Answer
2

You can do it in 3 steps:

1. Add the custom code below into your Child Theme into functions.php:

function add_page_url_name_divi() {
    $page_url = get_permalink(); // Page's URL
    $page_name = get_the_title(); // Page's name/title
    ?>
    <script>
        jQuery(document).ready(function($) {
            $('input[data-original_id="page_url"]').val('<?php echo esc_html( $page_url ) ?>'); // inserts the page url into the page url field
            $('input[data-original_id="page_url"]').prop('readonly', true); // stops auto fill from changing the value
            $('input[data-original_id="page_name"]').val('<?php echo esc_html( $page_name ) ?>'); // inserts the page name into the page name field
            $('input[data-original_id="page_name"]').prop('readonly', true); // stops auto fill from changing the value
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_page_url_name_divi'); // wordpress action to insert code into the footer of your website

This PHP function (code with included jQuery script) will be added into your WordPress footer and will be used for tracking the page's URL + page's name;

You can read the comments to understand the code better.

It will look like this in the source of your Divi site (to see the source code of the web-site use: CTRL + U):

source code of the custom php code in Divi Child Theme

2. On the page with the Contact Form Module create 2 additional fields with the display: none CSS property (see the screenshots below).

The names should be:

  • page_url
  • page_name

Here are the screenshots with the properties:

custom page url and name in contact  form module - Divi - screenshot 1

custom page url and name in contact  form module - Divi - screenshot 2

custom page url and name in contact  form module - Divi - screenshot 3

custom page url and name in contact  form module - Divi - screenshot 4

The same properties should be added to the page_name attribute:

custom page url and name in contact  form module - Divi - screenshot 5

3. Add %%page_name%% and %%page_url%% as message patterns into the e-mail template.

It should look something like this:

message pattern in Divi contact form module

 

Your e-mail will look like this:

email message from Divi contact form module

Share: