This technique allows you to use a standard Email field (required by your CRM) and automatically populate it without the customer seeing or interacting with it.
1. Make the visitor's email available in JS (pre-requisite)
To begin, your technical team must ensure the visitor's email address is available in a global JavaScript variable on the page where the pop-up will display.
In the example below, the email is made accessible via window.userEmail:
window.userEmail = 'example@client.com';
2. Create and hide the Email Field in Wisepops
To meet the requirements of your CRM (Klaviyo, etc.) which needs a visible email field, you must create it in Wisepops and then hide it.
Add the Email Field: In your pop-up form, add a field of type "Email".
Hide the email field (CSS): Use CSS to hide the Email field from the end-user. Add the following CSS code in the Design > Custom CSS tab of the editor:
.wisepops-block-signup input[name=email] {
display: none;
}
3. Automatic Population via JavaScript Callback
Use JavaScript to automatically inject the available email variable (from Step 1) into the masked field when the form is submitted.
Navigate to the Callbacks Tab: In your pop-up, click on "JS callbacks" in the left panel.
Click on +Add new script
Select the "Before form submit" event
Add the following script:
// Automatically fill up the email field
event.target.elements['email'].value = window.userEmail;
Result
The pop-up appears without a visible Email field. When the customer clicks "Submit":
The JS Callback automatically fills the masked Email field with
window.userEmail.The form is submitted to your CRM.
Your CRM receives the email (to identify the profile) and the other form data (to update properties), all without friction for the customer.