Help with understanding and using the form API

Developer Support APIs & Integrations
1

I have been using normal hubspot forms for my pages. Currently one form requires additional validations and since it cannot be done in the form itself(or can it be done?) I decided to use the Form API but I have been having a hard time.

Form:

<form id="form_name">
 <div>
 <label for="label1">Device type</label> 
 <input type="text" id="label1" name="label1" required>
 </div>
 <div>
 <label for="label2">Email</label> 
 <input type="email" id="label2" name="label2" required>
 </div>
 <div> <input id="submit_form" name="submit" type="submit" value="submit"> </div>
</form>

JS:

$('#submit_form').click(function() {
 var formJSON = $('#form_name').serializeArray();
 var data = {
 "fields": formJSON
 }
 $.ajax({ url: 'https://api.hsforms.com/submissions/v3/integration/submit/portalID/formID', type: "POST", contentType: "application/json", dataType: "json", headers: { "accept": "application/json", "Access-Control-Allow-Origin":"*" }, data: data, success: function (result) { console.log(result); }, error: function (status, error) { console.log(error, status); } });
});

When clicking on the button, nothing happens. I dont get any errors either, so I have no idea where or what I am doing wrong.

Im not good with APIs and ajax so any help is really appreciated.

Thanks.

2

Hey @newbie12,

I would recommend using “submit()” handler in JQuery instead of the “click()”. If you want to check out a working example here feel free to do so. If you view the source you can see how I’ve structured my request.

Heres the page:

http://jack.emea-tc.com/forms/api/example-1.html

I hope this helps!

Jack

3

Hey @jackcoldrick, @newbie12

Just reposting the instructions to get to the live example as this view-source link is blocked.

To get to the source, head to the link below and then right-click on the page and select ‘View PageSource’ or you can press Option+Command+U for Mac or CTRL+U for Windows once on the page.

Heres the page:

http://jack.emea-tc.com/forms/api/example-1.html

4

Thanks a lot @jackcoldrick @Willson !

Your example helped me to structure and changing the click event to a on submit event helped. Now im getting the submissions to the form in hubspot! Thanks a lot once again!