Thank you message and refresh form without reloading page

I'm using the source code embedded in another page through an iframe because I'm working with Bootstrap and previously I have had problems with jotform and that framework.

I need when the form is submitted the Thank you message appears without reloading the page, but then "disappears" and the form becomes available again (as if nothing had happened). I'm working on a SPA, so I don't want to reload the same page, and I do want a confirmation message when the form is submitted (for an usability issue).

In 2013, Elton Cris came with a solution that showed the confirmation message in a pop-up. I think this is what I need, but I don't know how to implement it on my website.

Can you help me with this please?

EltonCris solution: https://www.jotform.com/answers/267651-How-to-show-the-form-after-submitting-but-without-a-page-refresh
(EltonCris demo: https://shots.jotform.com/elton/user_form/Renuka_vmatechs_form.html)

Thank you

This is a really advanced feature to set up, but as you are already using the custom source code, this should be possible by making some edits on your code.

We have this procedure described on the following support thread, but it is a bit of a longer thread:

https://www.jotform.com/answers/809359#810261

Please try following the same steps with your own form, and let us know how it goes.

As a short summary, in step 1, we get the form's source code, which you already have here:

http://gastronomiaenmovimiento.com/web/itinerante-formulario.html

In step 2, we are adding the Thank You page to within your source code.

In step 3, we add the custom JavaScript script to your form to display our thank you page from step 2, instead of redirecting the form.

Looking forward to hearing how it goes.

Hi,

It doesn't work.

It may look like an advanced option, but the biggest problem is that the form doesn't reappear after the submission.

As I have seen in the forum, this is something that many people request, but I can not find a valid answer. Is there any chance that you will help me find a solution? I tried to implement the script that you suggested but it didn't work, could you tell me if I did something wrong?

-This is the result when I submit the form: http://www.screencast.com/t/SjCFKHd1ct

-This is the URL in which the form is embedded (via iframe): http://gastronomiaenmovimiento.com/web/

-This is the URL of the form: http://gastronomiaenmovimiento.com/web/itinerante-formulario.html

Thank you so much

Hi,

I checked your form source code and I think the only thing you missed is the target attribute on form tag. This is required so the form will load in the target iframe once submitted.

target="thankyou"

By the way, you have embedded the form source code as iframe in your page, I'm not quite sure how this affects the popup functionality but you can give it a try. 

You might also want to consider auto-redirect workaround as explained in this guide https://www.jotform.com/help/89-Create-a-Custom-Thank-you-page-with-Auto-redirect.

Hi,

It worked! 

Thank you very much for your help.

...The popup functionality is not affected by the iframe. 

:)

Hello,

On behalf of my colleague, you are welcome.

Thank you for contacting with us. 

Please feel free to ask whenever you need help about Jotform.

Kindly Regards.