Hello
I am trying to use the HubSpot form API to send information to a form using fields I made with HTML. This is the code:
var formDataA = new FormData(document.getElementById(‘form1’));
var formDataB = new FormData(document.getElementById(‘cotizador_paso2’));
var combinedFormData = new FormData();
combinedFormData.append(‘firstname’, formDataA.get(‘firstname’));
combinedFormData.append(‘lastname’, formDataA.get(‘lastname’));
combinedFormData.append(‘email’, formDataA.get(‘email’));
combinedFormData.append(‘phone’, formDataA.get(‘phone’));
combinedFormData.append(‘escuela_de_procedencia’, formDataB.get(‘cotizador_datospreuniversitario_escuela’));
combinedFormData.append(‘estado_de_procedencia’, formDataB.get(‘cotizador_datospreuniversitario_estado’));
combinedFormData.append(‘periodo_de_ingreso’, formDataB.get(‘cotizador_datosgenerales_periodoingreso’));
combinedFormData.append(‘licenciatura_de_interes’, formDataB.get(‘cotizador_datosgenerales_licenciatura’));
combinedFormData.append(‘eres_preuniversitario_o_padre_de_familia_’, ‘Padre de familia’);
fetch(`https://api.hsforms.com/submissions/v3/integration/submit/myFormID/myPortalID\`, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify(Object.fromEntries(combinedFormData))
})
.then(response => response.json())
.then(data => {
console.log(‘Success:’, data);
alert(“Thanks!”);
})
.catch((error) => {
console.error(‘Error:’, error);
});
The request gets sent successfully, but this is what I receive on the other side:
And all the fields are empty.
If you guys could help me with this I would really appreciate it.
Hi @Gerardo_S and welcome, we are delighted to have you here!
Thanks for asking the Community!
You are trying to update contact properties once a form has been submitted. Please let me know if that’s not the case.
I’d like to share these documentation that might help you:
- Imports API
- Update contacts API
- Properties API
I also wanted to invite a couple of subject matter experts to this conversation: Hi @Teun, @SRalston05, @GRajput and @zach_threadint do you have tips to share with @Gerardo_S, please?
Thanks so much and have a great day!
Best,
Bérangère
Hello, thank you for your prompt response.
Actually, what I’m trying to do is use the “Submit Data for a Form API”. I’ve been using this documentation as a reference: Forms API V3 documentation
When I fill out the form the normal way, the data appears on the submissions tab as normal. However, when I try to send data the way I’m doing in the code, all the columns are empty and it displays some error messages. Here’s what it looks like:
--
--
--
If you need any more details please by all means ask.
Hi @Gerardo_S, thank you for the information and screenshots!
I’d love to put you in touch with some of our Top Experts: Hi @sylvain_tirreau, @MBERARD and @zach_threadint do you have suggestions to help @Gerardo_S, please?
Have a lovely day and thanks so much!
Best,
Bérangère
Hi @Gerardo_S 
A couple of thoughts:
- You’ve specified your API endpoint as https://api.hsforms.com/submissions/v3/integration/submit/**myFormID**/**myPortalID**
- HubSpot’s documentation has the portal ID path parameter first, then the Form GUID, e.g. https://api.hsforms.com/submissions/v3/integration/secure/submit/**:PORTAL\_ID**/**:FORM\_GUID**
- I think it could be helpful for you to share an example request body -- i.e. the contents of Object.fromEntries(combinedFormData)
I hope that proves helpful. Please let me know if you have any follow-up questions.
Hi,
Perhaps your json data are not well shaped.
You send this:
{
"firstname": "John",
"lastname": "Doe",
"email": "john@example.com",
...
}
But I think you should send this:
{
"fields": [
{ "name": "firstname", "value": "John" },
{ "name": "lastname", "value": "Doe" },
{ "name": "email", "value": "john@example.com" },
// etc.
],
"context": {
"pageUri": "https://www.example.com/your-page",
"pageName": "Your Page Name"
}
}
Tell us if it works like that.
Best
