APIs & Integrations

charper_floqast
Member

How do you get values from iFrame form?

Hi, I can't get values from my iframe form. I need to take extracted values and pass it to a third party api.

 

This is how I'm trying it:

 

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
var firstName;
var lastName;
var businessEmail;
var phoneNumber;
var companyName;
var jobTitle;
var evalTime;
hbspt.forms.create({
region: "na1",
portalId: "7800846",
formId: "930a9a49-e26a-4e89-b379-4a628a2d78d3",
onFormSubmit: function($form) {
firstName = jQuery('input[name=firstname]').val();
lastName = jQuery('input[name=lastname]').val();
businessEmail = jQuery('input[name=email]').val();
phoneNumber = jQuery('input[name=number]').val();
companyName = jQuery('input[name=company]').val();
jobTitle = jQuery('input[name=jobtitle]').val();
evalTime = jQuery('select[name=evaluation_timeline]').val();
// console.log(firstName, lastName, businessEmail, phoneNumber, companyName, jobTitle, evalTime)
alert(firstName, lastName, businessEmail, phoneNumber, companyName, jobTitle, evalTime)
}
});
</script>

 

Based on this answers this is how it seems you do it:

 

https://community.hubspot.com/t5/CMS-Development/Getting-field-value-on-form-submit/td-p/326508

 

But my code doesn't work. I have confirmed my names are correct. 

 

How do you get hubspot iframe form values. 

 

 

 

0 Upvotes
1 Reply 1
JBeatty
Guide | Diamond Partner
Guide | Diamond Partner

How do you get values from iFrame form?

Hi @charper_floqast,

 

Since you are working within the onFormSubmit try using the $form instead of your jquery object.

 

 

//Change this
firstName = jQuery('input[name=firstname]').val();
//To this
firstName = $form.find('input[name=firstname]').val();

 

 

I believe the issue is that by just using the "jQuery" object you are working within the object, and not within the form's iframe. Switching to use the $form object should place you in the correct scope.

 

Or if you wish to avoid using jQuery entirely you can use:

document.getElementById('hs-form-iframe-0').contentWindow.document.querySelectorAll('[name="firstname"]')[0].value

Just ensure that this form is the first and only form on your page, hence the "hs-form-iframe-0" id.

 

✔️ Was I able to help answer your question? Help the community by marking it as a solution.

Joshua Beatty
Software Developer with Pearagon

Still have questions? Let's Talk

0 Upvotes