Hello!
We are in the process of implementing a HubSpot form on our site, and have encountered a couple of problems. Any assistance gratefully appreciated.
Specifically:
We need the understand the following details:
- Form version
- Endpoint url.
Right now we are using an ajax method to submit the form as the HubSpot form embed does not allow us to change the UI of the form to match our site’s look and feel. We are currently getting a 204 Status code from hubspot.
Any guidance appreciated.
Thanks!
Hi @Saftrus,
When looking to submit HubSpot form using AJAX, you can use the HubSpot form version 3 and this is the documentation: Submit data for a form.
Below is a sample of how to implement the v3 form
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form id="myform">
First name:<br>
<input type="text" name="firstname" id="firstname">
<br>
Last name:<br>
<input type="text" name="lastname" id="lastname">
<br>
Email:<br>
<input type="text" name="email" id="email">
<br><br>
<button type="button" onclick="formv3()">submit</button>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/{{portalId}}.js"></script>
<!-- End of HubSpot Embed Code -->
<script>
function formv3(){
// Create the new request
var xhr = new XMLHttpRequest();
var url = 'https://api.hsforms.com/submissions/v3/integration/submit/{{portalId}}/{{formId}}';
var getEmail = document.getElementById("email").value;
var getFirstName = document.getElementById("lastname").value;
var getLastName = document.getElementById("firstname").value;
var getCookie = document.cookie.replace(/(?:(?:^|.;\s)hubspotutk\s*\=\s*([^;]*).$)|^.$/, "$1");
// Example request JSON:
var data = {
"fields": [
{
"name": "email",
"value": getEmail
},
{
"name": "firstname",
"value": getFirstName
},
{
"name": "lastname",
"value": getLastName
}
],
"context": {
"hutk": getCookie, // 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)
setTimeout(function() {document.getElementById('myform').submit();}, 3000);
}
</script>
</html>
Let me know if there’s any further questions on this.
Side note: With a 204 status code it means that the request has suceeded and so I would be keen to know the concern that your team has.