APIs & Integrations

Not applicable

React App Form Creation

SOLVE

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 Upvotes
1 Accepted solution
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

React App Form Creation

SOLVE

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

View solution in original post

0 Upvotes
2 Replies 2
znwhite
Member

React App Form Creation

SOLVE

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 Upvotes
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

React App Form Creation

SOLVE

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 Upvotes