How do you get values from iFrame form?

[charper_floqast]

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. 

[JBeatty]

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.