APIs & Integrations

Não aplicável

React App Form Creation

resolver

Hi folks,
I'm on a free hubspot account and I'm trying to create and use the Form API.

I've created the following method, which is bring called right after I collect the requisite form information from a JSX object.

When I click submit, and this method is fired, I do not see anything in Hubspot.
The server responses with 200s, no failures as far as I can tell.

I added the tracking cookie into my render method for page I'm creating, but I'm not sure if that's required - is there a way to test whether it's working?

Thanks and looking forward to hearing from this community on the best way to fix this system, thanks.

Here is my method:

handleSubmit = () => {
preventDefault();
var https = require('https');
var querystring = require('querystring');
// build the data object
var postData = querystring.stringify({
'email': this.state.email,
'firstname': this.state.firstName,
'lastname': this.state.lastName,
'company': this.state.company,
'hs_context': JSON.stringify({
"hutk": req.cookies.hubspotutk,
"ipAddress": req.headers['x-forwarded-for'] || req.connection.remoteAddress,
"pageUrl": "https://www.getherd.app/about",
"pageName": "About",
"emailShouldResubscribe": false
})
});
console.log(postData);

// set the post options, changing out the HUB ID and FORM GUID variables.
var options = {
    hostname: 'forms.hubspot.com',
    path: '/uploads/form/v2/4900235/46a2aedd-6cd5-4763-9993-fa91f115f5f7',
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Length': postData.length
    }
}

// set up the request
var request = https.request(options, function(response){
    console.log("Status: " + response.statusCode);
    console.log("Headers: " + JSON.stringify(response.headers));
    response.setEncoding('utf8');
    response.on('data', function(chunk){
        console.log('Body: ' + chunk)
    });
});

request.on('error', function(e){
    console.log("Problem with request " + e.message)
    this.setState({
        message: e.message
    })
});

// post the data
request.write(postData);
console.log(request);
request.end();

}

0 Avaliação positiva
1 Solução aceita
IsaacTakushi
Solução
HubSpot Employee
HubSpot Employee

React App Form Creation

resolver

Welcome, @getherd!

To confirm, are you trying to POST to this form client-side? If so, the v2 Forms API endpoint does not support CORS / AJAX requests, but the v3 Forms API endpoint does.

It looks like you may have already discovered this, as this submission came through successfully yesterday using the AJAX endpoint.

Isaac Takushi

Associate Certification Manager

Exibir solução no post original

0 Avaliação positiva
2 Respostas 2
znwhite
Membro

React App Form Creation

resolver

If you're open to using axios and Hubspot's v3 Forms API, I wrote up a solution here: 

 

https://www.devtwins.com/blog/hubspot-forms-react-submit-form-using-hubspot-api

0 Avaliação positiva
IsaacTakushi
Solução
HubSpot Employee
HubSpot Employee

React App Form Creation

resolver

Welcome, @getherd!

To confirm, are you trying to POST to this form client-side? If so, the v2 Forms API endpoint does not support CORS / AJAX requests, but the v3 Forms API endpoint does.

It looks like you may have already discovered this, as this submission came through successfully yesterday using the AJAX endpoint.

Isaac Takushi

Associate Certification Manager
0 Avaliação positiva