topic Re: Prevent Forms API Submission from creating new Non-HubSpot Form? in APIs & Integrations

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

duncanleung — Fri, 14 Apr 2023 05:35:59 GMT

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

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

himanshurauthan — Fri, 14 Apr 2023 06:16:27 GMT

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.

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

duncanleung — Fri, 14 Apr 2023 09:40:13 GMT

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

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

MrJustinGivens — Fri, 14 Apr 2023 18:17:06 GMT

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

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

duncanleung — Fri, 14 Apr 2023 18:45:22 GMT

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>