How to Integrate HubSpot Forms API on Your Website

Integrate the HubSpot Forms API

• Navigate to the HubSpot developer documentation and retrieve the specific API endpoint for form submissions. This is typically an endpoint in the format of "https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid".

 

• Ensure that you have the Portal ID and Form GUID, which are necessary for sending data to the correct form instance within your HubSpot account.

import requests

def submit_form(data):
    portal_id = 'your_portal_id'
    form_guid = 'your_form_guid'
    endpoint = f'https://api.hsforms.com/submissions/v3/integration/submit/{portal_id}/{form_guid}'

    headers = {
        'Content-Type': 'application/json'
    }

    response = requests.post(endpoint, json=data, headers=headers)
    return response.status_code, response.json()

data = {
    'fields': [
        {
            'name': 'email',
            'value': 'example@example.com'
        },
        {
            'name': 'firstname',
            'value': 'John'
        },
        # Add more fields as needed
    ]
}
status_code, response = submit_form(data)
print(status_code, response)

Configure Your Website

• On your website, create a form element with the necessary fields that match those expected by your HubSpot form. Ensure the names of these fields match exactly as they are defined in HubSpot.

 

• Implement JavaScript to handle form submissions, capturing the input data and formatting it to match the JSON structure expected by the HubSpot API.

<form id="hubspot-form">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="firstname">First Name:</label>
  <input type="text" id="firstname" name="firstname">
  
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('hubspot-form').addEventListener('submit', function(event) {
    event.preventDefault();

    const formData = {
        fields: [
            {
                name: 'email',
                value: document.getElementById('email').value
            },
            {
                name: 'firstname',
                value: document.getElementById('firstname').value
            }
            // Similarly, capture other fields...
        ]
    };

    fetch('https://your-server-endpoint/submit-form', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => console.log('Success:', data))
    .catch((error) => console.error('Error:', error));
});
</script>

Secure Your Integration

• Always ensure that any server-side script that deals with the API keys or sensitive data is secure and not exposed to the client-side. This might involve isolating your API keys in a secure server environment.

 

• Consider implementing CAPTCHA or other spam prevention techniques on your form to avoid automated submissions that could result in spam entries in your HubSpot database.

Testing and Error Handling

• Test the entire form submission process to verify that data is reaching HubSpot correctly. Check for any errors in network requests or incorrect status codes.

 

• Implement error handling in your JavaScript and server-side code to gracefully manage networking failures or server errors without disrupting the user experience.

// Example error handling
fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch((error) => {
    console.error('There was a problem with your fetch operation:', error);
});