CMS Development

benji_thecroc
Colaborador | Partner nivel Gold
Colaborador | Partner nivel Gold

Refresh form without refreshing the page

resolver

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 Me gusta
1 Soluciones aceptada
RLeo
Solución
Colaborador | Partner nivel Diamond
Colaborador | Partner nivel Diamond

Refresh form without refreshing the page

resolver

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,

Ver la solución en mensaje original publicado

7 Respuestas 7
AZhu3
Miembro

Refresh form without refreshing the page

resolver

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 Me gusta
RLeo
Solución
Colaborador | Partner nivel Diamond
Colaborador | Partner nivel Diamond

Refresh form without refreshing the page

resolver

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
Miembro

Refresh form without refreshing the page

resolver

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

0 Me gusta
AHubble
Participante

Refresh form without refreshing the page

resolver

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 Me gusta
RLeo
Colaborador | Partner nivel Diamond
Colaborador | Partner nivel Diamond

Refresh form without refreshing the page

resolver

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 Me gusta
valerajoey
Participante | Partner nivel Platinum
Participante | Partner nivel Platinum

Refresh form without refreshing the page

resolver

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
Participante | Partner nivel Elite
Participante | Partner nivel Elite

Refresh form without refreshing the page

resolver

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 Me gusta