What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Showing JS alertbox as thank you page (+ refresh form)

    Asked by emilevdende on April 18, 2013 at 07:53 AM

    Hi,

     

    As I've read in the topic below, it is possible to show a popup with a thank you message instead of redirecting someone to another page (obviously involving to modify the source a bit).

    http://www.jotform.com/answers/181798-Is-there-a-way-to-ceate-a-pop-up-thank-you-message-when-a-form-is-submitted-This-way-the-user-can-simply-close-the-pop-up-window-go-back-to-site-

     

    For my project, very little steps in submitting a form are key (input device is an iPad). So ideally, I would like to confront my users with a simple JS 'thank you' alert box (see attached example below) when a form has been submitted. While this box is shown (or after user clicked OK), I want the form to clear its contents so the next submission can be done.

    How should I tackle this?

    Thanks in advance!

    Kind regards,

    Emile

    Screenshot
    refresh JotForm Thank You message source ipad
  • Profile Image

    Answered by sidharth_kch on April 18, 2013 at 08:06 AM

    @emile

    Are you okay to use the form source code embed method? 

    Let us know in which form you want to implement this functionality we will try to provide you with a work around. 

    Idea is to show a javascript message when user submit the form and redirect to the same form using custom url.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 18, 2013 at 08:42 AM

    Hi Sidharth,

    Great that you can help me!

    Yes, I am ok with using the source code embed method.

    This is my form: http://form.jotformpro.com/form/31072798844969?

     

    Worth to note is that I have adjusted the HTML in which the form is embedded a little bit so that the Safair browserbars (top and bottom) on iOS are hidden. Then the whole thing looks more like an app (works only when the site is bookmarked on iOS home screen):

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    I am not sure how the browser will behave when a redirect URL is called, but we'll see.

    Thanks again!

  • Profile Image

    Answered by sidharth_kch on April 18, 2013 at 08:47 AM

    @emilevdende

    Okay i will work on this and get back to you latter today. Will that be okay?

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 18, 2013 at 08:53 AM

    Sure, thanks in advance for your efforts!!

  • Profile Image

    Answered by emilevdende on April 19, 2013 at 06:11 AM

    Hi Sidharth,

     

    Any progress you can share already?

    Thanks!!

    Emile

  • Profile Image

    Answered by sidharth_kch on April 19, 2013 at 07:17 AM

    @emilevdende

    I will be able to send it to you in a while now.

    Thanks,

    Sidharth

  • Profile Image

    Answered by sidharth_kch on April 19, 2013 at 07:34 AM

    @emilevdende

    Please download your updated code from here: http://pastie.org/7660599

    Currectly after form submit I am redirecting to "http://form.jotformpro.com/form/31072798844969" but when you embed your form in your website, you need to change the Thank you custom URL to the URL of your form.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 19, 2013 at 09:48 AM

    Hi Sid,

     

    Thanks a lot!!! This behaves exactly like I wanted it to behave!

    1 more thing though; would it be possible for you to highlight the changes you have made to the code so that I can re-use this solution in other forms as well?

     

    Kr,

    Emile

  • Profile Image

    Answered by sidharth_kch on April 19, 2013 at 10:25 AM

    @emilevdende

    You are welcome.

    This code is added in the code:

     

     function validateForm() {

          alert("Form data submitted successfully.");

      }

    And this line is updated:

     

     

     

    Let us know if you need further assistance.

    Thanks,

    Sidharth

  • Profile Image

    Answered by sidharth_kch on April 19, 2013 at 10:28 AM

    @emilevdende

    You are welcome.

    This code is added in the code:

     

     function validateForm() {

          alert("Form data submitted successfully.");

      }

    And this line is updated:

     <form class="jotform-form" action="http://support.jotform.com/submit.php" method="post" enctype="multipart/form-data" name="form_31072798844969" id="31072798844969" accept-charset="utf-8" onsubmit="validateForm();">

     Let us know if you need further assistance.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 19, 2013 at 11:13 AM

    Thanks! You've been of great assistance!

     

    I would like to improve it a little bit more though, hope you can still advice me :)

    - Ideally the JS alert only shows up when validation of all fields are OK (now it shows at any time, even if required fields are empty)

    - The time that the JS alert is shown is directly onsubmit, however it would be more logical if it shows after the data has been sent succesfully (e.g. just before the page is reloaded or as part of the 'thank you action')

    Hope it's clear!

    Thanks again!

    Emile

  • Profile Image

    Answered by sidharth_kch on April 19, 2013 at 11:28 AM

    @emilevdende

    Let me think.. As the data is submitted to a different page, I am not sure how to show a JS msg when the data is successfully submitted. 

    But again let me think on this and i will get back to you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 20, 2013 at 04:12 AM

    Hi Sidharth,

     

    Did you find any solution yet? 

    The trick would be to fire the alert just before or while the thank you URL is called...right?

    Thanks again!

    Emile

  • Profile Image

    Answered by sidharth_kch on April 20, 2013 at 09:04 AM

    @emilevdende

    Well i haven't come up with any solution yet but trying to provide an alternative to this. I will get back to you on this.

    You are right that we should trigger the message before the thank you url is called but that doesn't happen within the form and is taken care on server side.

    Let me get back to you one this.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 21, 2013 at 09:12 AM

    Hi Sid,

    Any news? I would like to use this solution in production Tuesday, so ideally I can test it tomorrow.

    Thanks!

    Emile

  • Profile Image

    Answered by sidharth_kch on April 21, 2013 at 09:43 AM

    @emilevdende

    Alright. I will have somthing for you in a while now.

    Sorry for the delay.

    Thanks,

    Sidharth

  • Profile Image

    Answered by sidharth_kch on April 21, 2013 at 10:43 AM

    @emilevdende

    Please download the updated code form here: http://pastie.org/7682096

    This is the only possibility i could think off. You will only see the message when the form is ready to be submitted.

    Let me know if this works for you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 21, 2013 at 11:28 AM

    Hi Sid,

    This looks good! Which changes did you make?

     

    Thanks!

    Emile

  • Profile Image

    Answered by emilevdende on April 21, 2013 at 02:58 PM

    Hi Sid,

    I made a comparison to see the difference between old and new. It looks like there is a validation in the form for just showing the alert right? This is not connected to the actual form validation correct? (so it actually runs 2 validations).

    Transferring this to my other forms seems error prone and quite intensive. Should you find another way to do this more easily, please let me know.

    I really appreciate the time you have spent to help me out and try to find a solution! I think you have a great product and an even more awesome support team! Keep up the good work.

    Emile

  • Profile Image

    Answered by sidharth_kch on April 21, 2013 at 03:09 PM

    @emilevdende

    Thats correct.

    How do you find it to be error prone? Let me know and i will try to sort it out. Do you men to say that you want to implement this same soltion to your other forms?

    I will try to explore other possibilities but i still bilieve this would work for you while we look for other options.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 21, 2013 at 03:15 PM

    Yes, that's basically my idea, I want to reuse this solution on my other forms. These other forms would probably have other questions and question types, which makes the validation different in each case.

    So me re-building this validation for each different form, would be error prone (typo's by me etc ;)

    Please keep me updated if you find any other solutions!

    Maybe a nice feature to add to the "Thank you" options? (simple JS alert and reloading the form)

    Kind regards,

    Emile

  • Profile Image

    Answered by sidharth_kch on April 21, 2013 at 03:24 PM

    @emilevdende

    One quick solution i can think of is this:

    Create a custom page on your server (maybe a php / asp.net) page. When a user submit you form user will be redirected to your custom page and we will pass your form id as query string. In this php/asp.net page we will show a javascript message and then based on the form id we redirect the user to same form.

    Hope his works for you.

    Thanks,

    Sidharth

  • Profile Image

    Answered by emilevdende on April 22, 2013 at 01:31 PM

    Hi,

     

    Thanks for the suggestion, I will consider it!

    Thanks again for all your efforts!!

    Kind regards,

    Emile

  • Profile Image

    Answered by sidharth_kch on April 22, 2013 at 01:40 PM

    @emilevdende

    You are welcome.

    Let us know if you need further assistance.

    Thanks,

    Sidharth