APIs & Integrations

duncanleung
Participant

Prevent Forms API Submission from creating new Non-HubSpot Form?

SOLVE

Hi all,

 

The issue I'm facing:

When I submit data to an existing Hubspot "Regular" form:

  • a new "Non-HubSpot form" is created in the Forms dashboard (Marketing > Lead Capture > Forms)
  • Data is submitted to --both-- the "Regular" form and the "Non-HubSpot form"

 

To me, this is unexpected behavior.

I don't want my marketing team to be confused by data being submitted to two forms.

 

I'm using the Form API:

POST https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid

https://legacydocs.hubspot.com/docs/methods/forms/submit_form

 

I'm building a form in React

  • NextJS
  • react-hook-form
  • TailwindCSS

 

Is there a way to prevent the "Non-HubSpot form" from being created?

 

Thanks for the help!

Duncan

0 Upvotes
1 Accepted solution
MrJustinGivens
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Prevent Forms API Submission from creating new Non-HubSpot Form?

SOLVE

Hey @duncanleung with the react js handling the form POST, it's working as expected.

 

But you probably have the HubSpot Site tracking (js-scripts) codes added to the site so it doesn't know that form and is create a new form that is type of "non-hubspot-form".

 

The way to get around this is to not trigger the onSubmit in the HTML form (or the button), and handle it all in javascript onClick of the specific button you want.

 

Cheers,
Justin









View solution in original post

4 Replies 4
MrJustinGivens
Solution
Top Contributor | Gold Partner
Top Contributor | Gold Partner

Prevent Forms API Submission from creating new Non-HubSpot Form?

SOLVE

Hey @duncanleung with the react js handling the form POST, it's working as expected.

 

But you probably have the HubSpot Site tracking (js-scripts) codes added to the site so it doesn't know that form and is create a new form that is type of "non-hubspot-form".

 

The way to get around this is to not trigger the onSubmit in the HTML form (or the button), and handle it all in javascript onClick of the specific button you want.

 

Cheers,
Justin









duncanleung
Participant

Prevent Forms API Submission from creating new Non-HubSpot Form?

SOLVE

Thanks for the help @MrJustinGivens 

That worked! 🎉🎉

 

Yes, we do have the HubSpot site tracking (js-script) added as well, to include the cookie value with the form submission.

 

 

I had to disable react-hook-form from trying to submit the form on 'Enter' keypress.

I also removed the onSubmit event handler on the <form /> element.

 

const checkKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') e.preventDefault();
};
<form
action="/"
method="post"
onKeyDown={checkKeyDown} >

...
</form>

 

And used the onClick event on the button to submit the form:

 

import { useForm } from 'react-hook-form';

const { handleSubmit } = useForm();

<
Button
type="submit"
onClick={() => {
void handleSubmit(onSubmit)();
}}>
Submit
</Button>
himanshurauthan
Thought Leader | Elite Partner
Thought Leader | Elite Partner

Prevent Forms API Submission from creating new Non-HubSpot Form?

SOLVE

Hello @duncanleung 

prevent the creation of a "Non-HubSpot form" when using the Hubspot Forms API.

This behavior occurs because Hubspot generates a unique identifier for each form submission, and if the identifier doesn't match an existing form in the dashboard, a new form is created.

To avoid this, you can pass the existing form GUID as a parameter in your API request. This way, Hubspot will recognize the form and use it for the submission instead of creating a new one.

Here's an example of how you can modify your API request:

POST https://api.hsforms.com/submissions/v3/integration/submit/:portalId/:formGuid?hutk=<hutk>&hsFormsCallbackFunction=<callback function>&formId=<existing form GUID>

Replace <existing form GUID> with the GUID of your existing Hubspot form, and make sure to include the other required parameters.

By passing the formId parameter, Hubspot will recognize the existing form and use it for the submission, without creating a new one in the dashboard.

 

Digital Marketing & Inbound Expert In Growth Hacking Technology
0 Upvotes
duncanleung
Participant

Prevent Forms API Submission from creating new Non-HubSpot Form?

SOLVE

Hi Himanshu,

 

Thanks for the reply.

 

Unfortunatley, passing the query params into the API call did not resolve the issue.

Submitting the form still creates a new "Non-HubSpot form".

 

Moreover, I believe I'm already passing these values in the API call:

  • formGuid: I'm passing this in the URL path /submit/:portalId/:formGuid
  • hutk: I'm passing this in the JSON body of the POST

 

Thanks,

Duncan

0 Upvotes