How can I post an html form to hubspot with vanilla javascript (without embedding the hubspot form on my site and without using zapier)?

Question

I want to integrate a hubspot form on my website (webflow built), but without the hubspot branding that you can only get rid of if you pay more. I have my form, styled as needed, with all the form field names matching the field id's of their corresponding fields in my hubspot form. Surely there must be a way to emulate hubspot's embedded form's submit action from my custom form...?

I tried copying bits from the embedded form's post request, but no dice.

Answer 1

If you have your form set up in hubspot, and all the field names in your custom form match the hubspot fieldnames, you can do it pretty simply with some JS.

1. copy & paste the below code into any of the custom script spaces that make sense for your webflow form (NOTE: this will work for any custom project, not just webflow)
2. find the embed script for your hubspot form (Actions > Share)
3. replace [portalId] and [formId] in the url string with the corresponding values found in the embed script.

Oh, and make sure your Id selector matches that in the script (example assumes an Id of contact-form). Then this should work. You can add response actions and whatnot, or do some other conditional stuff like converting webflow's checkbox field values (True/False) to the proper bool values (true/false) so that things like that match up properly.

Hope this helps!

function submitToHubspotForm(event) {
  event.preventDefault();
  const data = new FormData(event.target);
  const value = Object.fromEntries(data.entries());
  const submission = {
    "fields": [],
    "context": {
        //"hutk": ":hutk", // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
        "pageUri": window.location.href,
        "pageName": window.location.pathname
    }
  }
  for (const [key, val] of Object.entries(value)) {
      submission.fields.push({
        "objectTypeId": "0-1",
        "name": key,
        "value": val
      });
    }

  var xhr = new XMLHttpRequest();
  var url = 'https://api.hsforms.com/submissions/v3/integration/submit/[portalId]/[formId]'
  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 || xhr.status == 204)) { 
            // 200 - submission is successful
        } else {
          // 400 - submission is rejected
          // 403 - portal isn't allowed to post submissions
          // 404 - formGuid isn't found
            alert(xhr.responseText);
        }
  }
  xhr.send(JSON.stringify(submission));
}
const contactForm = document.getElementById('contact-form');
contactForm.addEventListener('submit', submitToHubspotForm);