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

Develop, Build & Integrate APIs & Integrations
1

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

2

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.

3

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

4

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

5

Thanks for the help @MrJustinGivens

That worked! :tada::tada:

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

<formaction="/"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();<Buttontype="submit"onClick={() => { void handleSubmit(onSubmit)();}}> Submit</Button>