Hey guys, I am trying to use hubspot api to submit my weblow form to a hubspot form.
The contact is created correctly in hubspot but certain properties are not passed in specific the checkboxes saying “This value did not pass to the Contact record.« On »is not one of the allowed options.”
From what I understand that weblow sends the checbox when is checked with a value of “on” instead of “true”, But in the webflow forms dashboard if you have it, put it as “true”.
POST https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid
<!-- Header Code -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<!-- Footer Code -->
<!-- Minified use this in production -->
<script>$('form[action^="https://api.hsforms.com"]').each(function(e,n){$(n).submit(function(e){e.preventDefault();const n={fields:[...new FormData(e.target).entries()].map(e=>({name:e[0],value:e[1]})),context:{pageUri:window.location.href,pageName:document.title}},t=JSON.stringify(n);$.ajax({url:e.target.action,method:"POST",data:t,contentType:"application/json",success:function(n){n?(n.inlineMessage&&(parent=$(e.target.parent),parent.children("form").css("display","none"),parent.children(".w-form-done").css("display","block")),n.redirectUri&&(window.location.href=n.redirectUri)):console.log(n)},error:function(){console.log("error")}})})});</script>
<!-- Documented, dont use this in production -->
<script type="text/javascript">
$('form[action^="https://api.hsforms.com"]').each(function(i,el){ // intercept forms whos action goes to hubspot
$(el).submit(function(e){ // when the form submits
e.preventDefault(); //stop the form from submitting to webflow
const formData = new FormData(e.target); // get the form data
const parsedFormData = [...formData.entries()].map(dataObject => ({ // convert data to array
name: dataObject[0], // make sure the name of the input is the same as the hubspot input name
value: dataObject[1] // the value of the input
}))
const data = { // the data we send to hubspot
"fields": parsedFormData, // set the form data
"context": {
"pageUri": window.location.href, // log the current url
"pageName": document.title // log the pages title
}
}
const final_data = JSON.stringify(data) // turn that javascript object into a json string
$.ajax({ // start a network request
url: e.target.action, // sending to the form action url
method: "POST", // method post so it uses https and stays secure
data: final_data, // our form data
contentType: "application/json", // set the content type to json so hubspot can consume the data
success: function(data){ // if it works
if (data) { // we should get a data object
if (data.inlineMessage) { // if we have an inline message
parent = $(e.target.parent); // if so we get the forms parent element
parent.children('form').css('display','none'); // and hide the form
parent.children('.w-form-done').css('display','block'); // while showing the success screen
}
if (data.redirectUri) { // if we have a redirect uri
window.location.href = data.redirectUri; // redirect to the uri
}
} else {
// need to figure out how to show error
console.log(data)
}
},
error: function(){
// the network request to send the data to hubspot failed
console.log('error')
}
});
});
});
</script>