Submitting form via API creates new 'non-hubspot' form

DMakos — Thu, 05 Oct 2023 14:55:52 GMT

Hi,

I'm using Next.js with react-hook-form to handle my forms. I managed to get everything up and running but... the form is getting submitted twice! The second submission seems to be caused by your hubspot tracking script that I have attached via GTM. When I turn it off, the submission happens only once and data is going to the correct form. Once I turn on that tracking script again the form is submitted second time and creates a new 'non hubspot form' and names it by my CSS classes (which to me, is extremely silly).

I tried inlcuding the usertoken cookie but it didn't have any effect.

After submitting I get the following:

The above is correct, but after a moment the second request pops in:

The page does not refresh after submission as obviously I'm using preventDefault() method on the event to stop the default form submission and handle it with my own JS.

Why is this happening? How can I prevent it? I provided everything as requested in your docs including optional parameters but I just can't stop this second request from happening via your script...

I want to keep tracking users but still be able to use my custom form and just submit it thorugh the API endpoint...

Re: Submitting form via API creates new 'non-hubspot' form

DMakos — Fri, 06 Oct 2023 09:48:11 GMT

I solved it by doing this:

1. My submit button was changed to

2. As I lost submit event by hitting enter on my form, I had to handle this as well for accessibility:

<form onKeyUp={(e) => handleKeyUp(e)}>

const handleKeyUp = (e) => { if (e.key === 'Enter') { handleSubmit(onSubmit)(e); } };

3. Finally just handle the submission

const onSubmit = async (data, e) => { e.preventDefault(); // do stuff... }

Hope this helps someone with similar situation.

topic Submitting form via API creates new 'non-hubspot' form in APIs & Integrations

Submitting form via API creates new 'non-hubspot' form

Re: Submitting form via API creates new 'non-hubspot' form