I have a HubSpot contact form integrated into my WordPress site. The form works fine and redirects users to a thank you page after submission. However, I need to capture the email address that users enter in the form so I can hash it and send it to Google Analytics for tracking purposes.
I tried writing some JavaScript to grab the email value but it’s not working. Here’s what I attempted:
// My attempt to capture email from form
var contactForm = document.getElementById("hsForm_8a3e4f72-b6d2-5c9a-d4e5-g82d6963bd09");
var emailInput = document.getElementById("email-8a3e4f72-b6d2-5c9a-d4e5-g82d6963bd09");
contactForm.onsubmit = function(){
var userEmail = emailInput.value();
// Send to GA4
dataLayer.push({
'event': 'contact_form_submit',
'enhanced_conversion_data': {
"email": userEmail
}
});
};
Can anyone help me figure out what I’m doing wrong? I just need to extract the email field value when the form is submitted.
Your code’s trying to access DOM elements that don’t exist yet when the script runs. HubSpot forms inject their HTML dynamically, so timing’s everything. I’ve had good luck using the onFormSubmit callback with a small delay. This catches the form data before any redirect happens. Here’s what worked on my last project:
The 100ms timeout gives HubSpot time to process the form data but still fires before the redirect. Works reliably across different WordPress themes - hasn’t failed me yet.
Had the same issue a few months ago. HubSpot forms are tricky with timing. Use the onFormReady callback first to make sure elements exist, then attach your submit handler. This worked for me:
hbspt.forms.create({
// your config
onFormReady: function($form) {
$form.on('submit', function() {
var email = $form.find('input[type="email"]').val();
// your GA code here
});
}
});
onFormReady ensures everything’s loaded before you grab the email field. Worked way better than onFormSubmitted for me.
Your code’s using .value() instead of .value - it’s a property, not a method. But there’s a better way to handle this since HubSpot forms are dynamically generated and DOM elements might not be ready when you need them.
This grabs the email after HubSpot processes the form but before any redirect. I’ve used this on multiple client sites and it’s way more reliable than hooking into DOM events directly.
the problem’s likely that you’re trying to access elements before hubspot injects them into the DOM. skip hunting for specific element IDs - just use a mutation observer to watch for when the form gets added, then attach your listeners. works every time, no matter what the load timing issues are.
The callback approach works but you’re still dealing with HubSpot’s quirks and timing issues. I’ve been down this road - there’s a way cleaner solution.
Skip wrestling with HubSpot’s form callbacks and DOM readiness headaches. Set up a webhook that captures everything automatically. Someone submits your HubSpot form, webhook fires to an automation platform, processes the data, and pushes it to Google Analytics.
Built this exact flow last month. Webhook captures submission data including email, hashes it server-side, sends to GA4 with enhanced conversions. No JavaScript headaches, no timing issues, works every time.
Takes maybe 10 minutes to set up. Get the HubSpot webhook URL, configure it in your form settings, build the automation flow for data processing and GA4 push.
Way more reliable than intercepting form data on the frontend, especially with dynamic forms.
Try using onBeforeFormSubmit instead of regular submit events. It fires right when someone clicks submit but before HubSpot processes anything, so you get clean access to form data without timing headaches.
This grabs the email instantly when users submit - no waiting for HubSpot’s processing or dealing with redirect timing. I’ve been using this for enhanced conversions tracking and it works reliably across different setups.
I’ve had good luck using HubSpot’s form events API instead of dealing with DOM timing headaches. Just listen for the global form events HubSpot sends out:
window.addEventListener('message', function(event) {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
var formData = event.data.data;
var emailValue = formData.find(field => field.name === 'email');
if (emailValue) {
dataLayer.push({
'event': 'contact_form_submit',
'enhanced_conversion_data': {
"email": emailValue.value
}
});
}
}
});
This catches submissions at the browser level and grabs field data straight from HubSpot’s payload. Way more reliable than callbacks, especially with WordPress themes and plugins that love to mess things up. The event fires before redirects, so you get clean access to all the form data.