IMPORTANT RULES:
- Maintain the original formatting (markdown, HTML tags, links, etc.)
- Keep technical terms and proper nouns as appropriate
- Preserve code blocks and technical syntax exactly
- Maintain the same tone and style
- Only output the translated text, no explanations or comments
Previously, I published a post titled Contact Form 7 Transformation Definition where I explained how to configure form transformations using the Contact Form 7, a simple, practical, and long-standing popular plugin for WordPress that provides an interactive form.
Now, continuing on this topic, during the evaluation process with Hotjar and its transformation flow, I will explain how to make the values entered into form elements visible. Let’s proceed step by step.
You can find support requests for Hotjar here.
Hotjar Whitelisting Input Fields
As I mentioned in my Hotjar article, for privacy reasons, screen recordings listed under Recordings display form content and numbers as * (suppress) unless otherwise specified1. After the update regarding privacy, users who wish to record form elements can now do so by checking the corresponding checkbox in their site settings2 3 4.
IMPORTANT RULES:
- Maintain the original formatting (markdown, HTML tags, links, etc.)
- Keep technical terms and proper nouns as appropriate
- Preserve code blocks and technical syntax exactly
- Maintain the same tone and style
- Only output the translated text, no explanations or comments
The first step we need to take is: Hotjar > Settings > Sites & Organizations, then select the relevant site from the list of sites and view its Site Settings section. Here, you should be able to see the option “Record keystroke data on whitelisted input fields”. After selecting this option, you can close the window by saving the updated settings. The next step is to mark form elements using the data-hj-whitelist attribute.
data-hj-whitelist
The data-hj-whitelist attribute ensures that specific form elements are excluded from screen recording (whitelisting). Now let’s move to the main topic we’re addressing and see how we can include a field in a form created with the Contact Form 7 (CF7) plugin without encryption.
Contact Form 7 and Whitelisting Process
We’ve created a contact form and are tracking how visitors reach it through our Funnel. However, we’re also curious about how visitors complete certain fields within the form. Since Hotjar automatically encrypts form content by default, we’re unable to observe this behavior. At this stage, what we need to do is open the functions.php file of our active WordPress theme using our code editor and add the following code snippet, then save it.
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
$str_pos = strpos( $content, 'name="input-name"' );
$content = substr_replace( $content, ' data-hj-whitelist ', $str_pos, 0 );
return $content;
}The code snippet ensures we can perform operations on form elements via wpcf7_form_elements5. Inside the code snippet, you’ll notice the name="input-name" attribute serving as a specific identifier. If any form contains an element with the input-name name value, this element will be assigned the data-hj-whitelist attribute.
The textarea element shown in the above example has the your-message name value. Therefore, we must update the input-name field to your-message. The final result will look like this:
add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
//...
$str_pos = strpos( $content, 'name="form-name"' );
//...After this code execution, any element with the form-name name value added through Contact Form 7 will now be marked with data-hj-whitelist. Of course, you can maintain a unique identifier and ensure that only a specific form element is not encrypted by Hotjar, or you can extend the list of elements you want to exclude from encryption by using a class instead of the _name attribute. In fact, by taking the opposite approach, you can ensure that all fields remain unencrypted while selectively encrypting only the designated fields. Naturally, in this case, we would need to adjust the site settings accordingly and replace the data-hj-whitelist expression in the code snippet within the functions.php file with data-hj-suppress.