topic Re: Form API in APIs & Integrations

Form API

Niuscha — Sat, 08 Feb 2020 14:01:17 GMT

Hi,

I am new to Hubspot and need to understand how I can use the different HubSpot APIs. I want to capture all the contact detail from my landing page FORM and add them to contacts via API.

Can you please support?

Thanks

Niuscha

Re: Form API

WendyGoh — Mon, 10 Feb 2020 02:27:51 GMT

Hey @Niuscha,

Just to clarify, is the form on your landing page a HubSpot form? If it is a HubSpot form, upon a form submission > contacts will automatically be created.

If it's not a HubSpot form, have you explore the option of toggling on the non-HubSpot form feature (Use non-HubSpot forms)? So that contacts are automatically created within HubSpot.

If the above option are not something that your team had like to look into, upon getting your landing page form details, you can use the Create or update a group of contacts | Contacts API to create contacts within HubSpot.

Hope this helps to shed some lights and do let me know if you'd further clarification on this.

Re: Form API

Niuscha — Mon, 10 Feb 2020 21:08:24 GMT

Hi,

Thanks for your suport! It is a none-Hubspot form. I have created a website with Bootstrap and want to connect it to Hubspot via Hubspot APIs.

Thanks for your support

Niuscha

Re: Form API

WendyGoh — Tue, 11 Feb 2020 01:10:47 GMT

Hey @Niuscha,

Thanks for the clarification!

When looking to send non-HubSpot form data, you can use the Submit data for a form (AJAX support) | Forms API or Submit data to a form | HubSpot Forms API. Once the form data has been submitted over to HubSpot successfully, contact will be created successfully. You do not have to call another endpoint to create contact.

Re: Form API

Niuscha — Tue, 11 Feb 2020 12:16:48 GMT

Thanks for the great support.

This is my first time using an API.

How do I embed the API in my website?

Thanks again for the great support

Niuscha

Re: Form API

WendyGoh — Wed, 12 Feb 2020 01:08:39 GMT

Hey @Niuscha,

When looking to submit HubSpot form using an API, your developer will have to ensure that they are posting the form data matching the JSON body below:

{
  "submittedAt": "1517927174000", // This millisecond timestamp is optional. Update the value from "1517927174000" to avoid an INVALID_TIMESTAMP error.
  "fields": [
    {
      "name": "email",
      "value": "example@example.com"
    },
    {
      "name": "firstname",
      "value": "Jeff"
    }
  ],
  "context": {
    "hutk": ":hutk", // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
    "pageUri": "www.example.com/page",
    "pageName": "Example page"
  },
  "legalConsentOptions": {
    "consent": { // Include this object when GDPR options are enabled
      "consentToProcess": true,
      "text": "I agree to allow Example Company to store and process my personal data.",
      "communications": [
        {
          "value": true,
          "subscriptionTypeId": 999,
          "text": "I agree to receive marketing communications from Example Company."
        }
      ]
    }
  }
}

On this documentation - Submit data for a form (AJAX support) | Forms API > We have an example code on how you can use the formv3 endpoint on nodeJS.

If you do not have a developer team, I'd advise you to Use non-HubSpot forms by toggling on the `Collect data from website forms` settings.

Re: Form API

Niuscha — Thu, 13 Feb 2020 11:14:12 GMT

Hi,

Thanks for your great support. So to explain the situation in full:

- I have created a landing page with a form using the Bootstrap Framework

- This means I have used HTML code to create the landing page

- Now I need to connect my lading page form with Hubspot

- The form is not from Hubspot

I understand to use this Hubspot API:

https://developers.hubspot.com/docs/methods/forms/submit_form_v3

And my question is do I copy the Json code into my HTML code in order to transform the data from my none Hubspot form to Hubspot?

Can you please advise!

Thanks

Niuscha

Re: Form API

WendyGoh — Fri, 14 Feb 2020 01:54:41 GMT

Hey @Niuscha,

The JSON code is an example of the data body. The actual AJAX function that you would need to include in your HTML code is something like this:

function formv3(){
    // Create the new request 
    var xhr = new XMLHttpRequest();
    var url = 'https://api.hsforms.com/submissions/v3/integration/submit/62515/fcc69886-915b-4fef-b35f-27850ef461e1'
    
    // Example request JSON:
    var data = {
      "submittedAt": "1517927174000",
      "fields": [
        {
          "name": "email",
          "value": "example@example.com"
        },
        {
          "name": "firstname",
          "value": "Jeff"
        }
      ],
      "context": {
        "hutk": ':hutk', // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
        "pageUri": "www.example.com/page",
        "pageName": "Example page"
      },
      "legalConsentOptions":{ // Include this object when GDPR options are enabled
        "consent":{
          "consentToProcess":true,
          "text":"I agree to allow Example Company to store and process my personal data.",
          "communications":[
            {
              "value":true,
              "subscriptionTypeId":999,
              "text":"I agree to receive marketing communications from Example Company."
            }
          ]
        }
      }
    }

    var final_data = JSON.stringify(data)

    xhr.open('POST', url);
    // Sets the value of the 'Content-Type' HTTP request headers to 'application/json'
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) { 
            alert(xhr.responseText); // Returns a 200 response if the submission is successful.
        } else if (xhr.readyState == 4 && xhr.status == 400){ 
            alert(xhr.responseText); // Returns a 400 error the submission is rejected.          
        } else if (xhr.readyState == 4 && xhr.status == 403){ 
            alert(xhr.responseText); // Returns a 403 error if the portal isn't allowed to post submissions.           
        } else if (xhr.readyState == 4 && xhr.status == 404){ 
            alert(xhr.responseText); //Returns a 404 error if the formGuid isn't found     
        }
       }


    // Sends the request 
    
    xhr.send(final_data)
 }

This can be found on this documentation - Submit data for a form (AJAX support) | Forms API > Under the 'Node JS' tab.

You would need to include this piece of code (and modify accordingly) as a javascript which means it is within the <script> </script> tag.

Re: Form API

Niuscha — Fri, 14 Feb 2020 12:57:43 GMT

Thanks for you amazing support! I will try it at the weekend 😉

Re: Form API

kennethbrenes — Tue, 03 Nov 2020 22:41:21 GMT

Hi @WendyGoh

Is there a way to add more security in those forms? I mean, to avoid bots submissions what is the best practice around?

Thanks!

Re: Form API

WendyGoh — Wed, 04 Nov 2020 07:18:43 GMT

Hey @kennethbrenes,

As mentioned by Jenny on this dev forum here,

From within HubSpot you can enable captcha and block free email providers or specific domains from submitting the form. I wanted to share this article which outlines this for your reference.

Hope this helps 🙂