CMS Development

benji_thecroc
Contributeur | Partenaire solutions Gold
Contributeur | Partenaire solutions Gold

Refresh form without refreshing the page

Résolue

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

0 Votes
1 Solution acceptée
RLeo
Solution
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Refresh form without refreshing the page

Résolue

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,

Voir la solution dans l'envoi d'origine

7 Réponses
AZhu3
Membre

Refresh form without refreshing the page

Résolue

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. 

AZhu3_1-1653670805416.png

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

 

0 Votes
RLeo
Solution
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Refresh form without refreshing the page

Résolue

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
Membre

Refresh form without refreshing the page

Résolue

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

0 Votes
AHubble
Participant

Refresh form without refreshing the page

Résolue

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?

0 Votes
RLeo
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Refresh form without refreshing the page

Résolue

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.

0 Votes
valerajoey
Participant | Partenaire solutions Platinum
Participant | Partenaire solutions Platinum

Refresh form without refreshing the page

Résolue

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
Participant | Partenaire solutions Elite
Participant | Partenaire solutions Elite

Refresh form without refreshing the page

Résolue

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 

 

0 Votes