By default, there is no option to add Dynamic Content in a contact form field. That's why we cannot use the current post title using the built-in options of the form. This article will help to add the current post title to the form through a hidden field. Not only post but also this solution is applicable for any post type's single view.
Here are the steps:
1. Adding a field in the contact form:
We need to create a new field in the Contact Form Module to store the post title in this field.
The field's ID is essential that will be used later. I've used the following one.
post_title
Take a look at the screenshot for reference.
It could be anything else, according to the context. For example, if you use it on a product, you may use product_title.
2. Adding a CSS class to the Contact Form Module:
It's not mandatory, but I decided to use a CSS class for the module to avoid unnecessary conflicts with other modules. Also, you might need to use this feature in two different contact form modules on the same page, in which case, the custom class will be helpful to keep them separate.
I've used the following class for this case.
cs_form
Please check this article on how to add a custom CSS class to a Divi Module.
3. Installing a Child Theme or a Code Snippets plugin:
We need to use a child theme because it requires adding some PHP code to the functions.php file. Here's a great comprehensive article showing instructions for creating a child theme. If you have downloaded one, it needs to be installed from here WordPress Dashboard → Appearance → Themes → Add New.
Alternatively, if you don't want to use a child theme, feel free to use the following Code Snippet plugin that can be used to write PHP code.
4. Adding code:
Here's the code we need to add to the functions.php file of the activated child theme. Or, if you use the Code Snippet plugin, you can create a new snippet and add it there.
// Add current post title to a contact form hidden field
function add_post_title_to_cf_field(){
// Get post title
$title = get_the_title();
?>
<!-- Script for adding the retrieved title into the hidden field -->
<script>
(function($){
jQuery(document).ready(function(){
jQuery('.cs_form p[data-id=post_title] input').attr('value','<?php echo $title; ?>');
});
})(jQuery);
</script>
<!-- Hide the field -->
<style>
.cs_form p[data-id=post_title] {
display: none;
}
</style>
<?php
}
add_action('wp_footer', 'add_post_title_to_cf_field');
This code has three different parts.
The first one is the PHP code that fetches the current post title.
The script code adds the retrieved title into the contact form predefined field.
CSS for hiding the contact form field.
I've kept all those codes in a single place to avoid confusion. Otherwise, we could add the script here Divi → Theme Options → Integration Tab → Head Box and CSS here Divi → Theme Options → Custom CSS.
If you used a different class than the one I used, you must adjust the above code with the new class by replacing the cs_form class.
That's all! 🙂
Here's the output of the email body. I've tested it on a product page, and as a result, I've got the product title from where the form was submitted.
