Refresh form without refreshing the page

[benji_thecroc]

Hi,

We have a couple of form modules that currently display an inline message after submission.

I was wondering if there was a way to reload the form to it's original state on a button click?

In our template a user can fill out the form and then click through to a different screen state where the form is hidden, ideally we'd want to form to reload at this point and be submittable again btu I don't think there's a way to do this without refreshign the page. I considered setting the form up so that it redirects to the page but with a # in the URL and fire a function to dynamically put the user back to the relevant screen state btu I can't do this.

Thanks,

Benji

[AZhu3]

Hubspot does not provide an api for reload form. After the first submission, the form cannot be used, i have tried many methods to no avail. Finally, i found that the iframe that refreshes the form page can reload the form. 

onFormSubmitted: function($form) {
    document.getElementById('hs-form-iframe-0').src=document.getElementById('hs-form-iframe-0').src;
}

[RLeo · Accepted solution]

Hi YChuskit,

I know its a bit late, but one way I found is to create the form again after submitting the form. Just make sure to display a thank you message on the form settings (no redirect).

Tested it and works:

$(document).ready(function(){
 
    window.addEventListener('message', event => {
         if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
             hbspt.forms.create({
              region: "na1",
              portalId: "{{ADD YOUR PORTAL ID HERE}}",
              formId: event.data.id,
              target: ".modal-body" // Add the element class where you need to create the form again
            });
         }
      });
    
  });

Regards,

[spotted123]

Should this work with a raw form? Been trying for hours and can't get this to work.

[AHubble]

Hi RLeo,

Trying to do this myself. Are you adding this code to the module in HubDB, or to the Source Code in the Thank You Message?

[RLeo]

Hi AHubble,

This was tested while the form was in an external or Hubspot page, so this script goes in that page. Haven't tested if it works on a module, I think it should.

[valerajoey]

hey Benji,
I have two solutions that you can try. 
First one needed you to set up a server, the Idea is to create a separate form from scratch. and hitting the submit button will first send its data to HubSpot via API, the next function will it's up to you. You can clear its field content or you can create a preloader and just refresh the form.

The second solution is, creating the form through form embed, 
    hbspt.forms.create({
                         portalId: '',
                         formId: '',
                         onFormSubmitted: function($form) { // YOUR SCRIPT HERE }
});

and after submitting try creating a new HubSpot Form. make sure you are using the inline message. 
I'm not sure if this will work though, but worth a try. 

[YChuskit]

hey @valerajoey,

hbspt.forms.create({
portalId: ‘2333626’,
formId: ‘9a3ba836-f31f-4869-8d28-d264cc4259a8’,
onFormSubmit: function($form) {
$form[0].reset();
}
});

is this rigth code ? what should be the js here

 onFormSubmit: function($form) {
what should i write here ?
}

i tried above code but i am getting error