Sending data with onFromSubmit: data gets sent only for existing contacts

Developer Support APIs & Integrations
1

Hi there!
I’m trying to send data through my HB form using hidden fields. We’re testing the form with my team is it seems like the data gets sent for people that are already a HB contact, but for new contacts we just get an email with their email address (which is the only non-hidden field in the form).

Any idea why this is?
Here’s my code:

 hbspt.forms.create({
 portalId: "2961853",
 formId: "b9bc4c6d-ce95-4275-ac7c-1ca703211196",
 onFormSubmit: function($form) {
 const form = $form[0]
 const email = form[0].value
 const companySize = $('#slider')[0].value
 const paymentPeriod = annually.prop('checked') === true ? 'annually' : 'monthly'
 const currency = $('.currency')[0].innerHTML
 const total = $('#final-price')[0].innerHTML
 const data = {
 fields: [
 {
 name: "builder_company_size",
 value: companySize
 },
 {
 name: "builder_payment_period",
 value: paymentPeriod
 },
 {
 name: "builder_currency",
 value: currency
 },
 {
 name: "builder_price",
 value: total
 },
 {
 name: "email",
 value: email
 }
 ],
 legalConsentOptions: {
 consent: { // Include this object when GDPR options are enabled
 consentToProcess: true,
 text: "I agree to allow Starred to store and process my personal data.",
 communications: [
 {
 value: true,
 subscriptionTypeId: 999,
 text: "I agree to be contacted by Starred."
 }
 ]
 }
 }
 }
 $.ajax({
 type: "POST",
 url: 'https://api.hsforms.com/submissions/v3/integration/submit/2961853/b9bc4c6d-ce95-4275-ac7c-1ca703211196',
 data: JSON.stringify(data),
 success: 'success',
 dataType: 'json',
 contentType: 'application/json'
 });
 }
});
2

Hey @romidg,

Looking at your code, I do have a couple of clarification points:

1. Are you looking to use the Submit data for a form | Forms API or How to customize the form embed code?

2. If you’re looking to embed the form and use jquery to manipulate the form field data, you would need to implement something like this:

 hbspt.forms.create({
	portalId: "portalId",
	formId: "form ID",
 onFormReady: function($form) {
 $form.find('input[name="builder_company_size"]').val(companySize).change();
 $form.find('input[name="builder_payment_period"]').val(paymentPeriod).change();
 $form.find('input[name="builder_currency"]').val(currency).change();
 $form.find('input[name="builder_price"]').val(total).change();

 }
});
3

hi Wendy, thanks for the reply. I implemented the code above, but the problem i have now is that is passes the values that are selected when you first go to the page (https://www.starred.com/pricing-builder/) instead of the ones the user selects.

4

Hey @romidg,

This is likely because on the code that I shared, I’m using the `onFormReady` event. If you’d like to change the value after submission, you’d need to use the `onFormSubmit` event.

To learn more about global form events, you may want to check out this documentation: Using Global Form Events.

5

Hi Wendy,

It worked! Apparently using val() doesn’t fire the change() function, so I just removed all the change() and change the onFormReady to onFormSubmit like you said. Thanks a lot!