APIs & Integrations

Jonas_Kaj_Jense
Member

Stop formsubmit from refreshing the page

I have a Hubspot landing page with a form that i’m submitting with javascript. The form is using “Inline message when submitting”, but whenever the form is submitted, the page refreshes itself before showing the message.

How do i prevent this “refresh”? I have another iframe on the landing page, that is getting reset due to this.

0 Upvotes
10 Replies 10
nickdeckerdevs
Contributor | Diamond Partner
Contributor | Diamond Partner

Stop formsubmit from refreshing the page

@Jonas_Kaj_Jensen

Check out my post here: https://community.hubspot.com/t5/COS-Design-Support/Hubspot-Form-submission-Using-AJAX/m-p/15582/hig...

You would need embed the form with the JS embed code and make it an inline message. That will prevent the form from refreshing the page.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Stop formsubmit from refreshing the page

@Jonas_Kaj_Jensen Is this a custom form or a HubSpot form?

0 Upvotes
Jonas_Kaj_Jense
Member

Stop formsubmit from refreshing the page

It’s a Hubspot form.

I have inserted a script on the Hubspot landing page that runs a $(‘theHubspotForm’).submit().

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Stop formsubmit from refreshing the page

@Jonas_Kaj_Jensen Why did you insert the JQuery script? The submit button the form should submit for you and then display the inline message.

0 Upvotes
Jonas_Kaj_Jense
Member

Stop formsubmit from refreshing the page

There is an Iframe on the landing page, that decides when the Hubspot form is submitted, so when the landing page recieves this information, it should submit the Hubspot form, with the data from the iframe.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Stop formsubmit from refreshing the page

@Jonas_Kaj_Jensen Why do you have an iframe? Sorry for all the questions I don’t yet understand why you can’t just have a form on a lading page which should eliminate your problems.

0 Upvotes
Jonas_Kaj_Jense
Member

Stop formsubmit from refreshing the page

We are using a calculator embedded in an Iframe on a Hubspot landing page. When the user submits the calculator form, we want it to register as a “Submission” in Hubspot too, so the analytics is correct (Views and Submission).

The workaround was making an invisible Hubspot form on the landing page, and then submitting the form when a lead is being generated in the calculator.

If it’s not possible preventing a ‘refresh’, we’ll figure something else out.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Stop formsubmit from refreshing the page

@Jonas_Kaj_Jensen There are ways to prevent the page refreshing on a form. I’m not sure if we can do that in your current set up. Can you link me the page? If you are embedding a calculator form on the page I’m lost how it is also a HubSpot form.

0 Upvotes
Jonas_Kaj_Jense
Member

Stop formsubmit from refreshing the page

Forget about the iframe, it’s not important in the issue.

I have this landing page:
http://leaddoubler-3321684.hs-sites.com/testld

When i click “submit”, it reloads the page and displays the inline block.
I have tried changing target for the form to an iframe, but that doesn’t work.

I’m not interested in a redirect, a reload or a message. I just want the page to submit the form, without refreshing the page.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Stop formsubmit from refreshing the page

@Jonas_Kaj_Jensen One option you could try would be to embed the form onto the lp. It wouldn’t be ideal but an embedded form won’t make the page reload.

0 Upvotes