Help with understanding and using the form API

[newbie12]

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.

[jackcoldrick · Accepted solution]

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

[jackcoldrick · Accepted solution]

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

[Willson · Accepted solution]

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

[newbie12]

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!