React App Form Creation

[#1]

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();

}

[IsaacTakushi · Accepted solution]

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.