React App Form Creation

SOLVE
Highlighted
Not applicable

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

}

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
HubSpot Employee

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

Alumnus, HubSpot Developer Support

View solution in original post

Reply
0 Upvotes
1 Reply 1
Highlighted
Solution
HubSpot Employee

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

Alumnus, HubSpot Developer Support

View solution in original post

Reply
0 Upvotes