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.
Show submission confirmation as an On-Screen Pop-Up notificationAsked by emilevdende on January 09, 2014 at 10:44 AM
I use Jotform a lot for filling out surveys on iPads. These surveys are being entered and submitted by 1 person, so 1 guy operating the iPad.
I generally embed the source code into my own HTML to make it work perfect and to add some small details (analytics tracking etc).
I don't use a Thank you page, instead (to support quick submissions) I redirect the users to the same URL. So after submission, they will see a new empty form being loaded.
This behavior is OK, however it would be nice to give the user some sort of confirmation (really small) of the succesful submission he just did. Ideally, temporarily shown on top of the newly loaded (empty) form. This gives the user an indication that everything went well.
Now I bumped into these very nice jQuery notifications: http://boedesign.com/demos/gritter/
Very simple, easy to set up and great looking. I want to display those kinds of notifications (the regular notification is perfect for me) on top of the form as soon as the submission has been done and the new form is loaded.
I can obviously just put this inside the code and try to trigger it on a page load, but of course it would be better to connect it to the actual submission. I.e., I only want to show this when the user has clicked submit. Instead of just showing it on a page load. Being able to connect it to real confirmation that the information is stored on your end would be very nice, but even connecting it to the submit button to be clicked is a big win already.
Could you please assist me in achieving the above?
Thanks a lot!
Feel free to submit it to see the result.
You can achieve that by editing your form source code and simply adding this code to your submit button:
onclick="alert('HERE IS WHERE YOU NEED TO ENTER THE MESSAGE YOU WISH TO SHOW')
I hope that helps. Please inform us if you need further assistance with this inquiry.
Oops, sorry, I forgot to paste the example form URL, here it is: https://shots.jotform.com/eliezer/form-uploads/alert%20after%20subtmitting.html
Thanks for your effort and information. However, I would really like it to be shown once the submission is done and the form is reloaded.
Is there any way to trigger it only then?
Plus, the looks of the Gritter jQuery notifications is just soooo nice. So I would prefer to use those, instead of a plain JS alert.
Thank you for your clarifications Emile. This might be hard to implement without native solution, since we will need to somehow get the successful submission callback and process it.
I have attached a feature request ticket to this thread about the native implementation and escalated it to our Development Team.
We will keep you updated via this thread.
Would you be able to assist me with displaying the nice notification on screen when the submit button is clicked (onclick) just like the suggestion that Eliezer has proposed?
In other words, can I replace the standard JS alert with the nice notification?
This would be a sub-optimal solution for me, but OK as an in between solution...
To use the script as Eliezer has described, please embed your form using the source code of your form.
Locate the Submit button tags (<button id="input_#" type="submit" class="form-submit-button">) and enter the script as shown.
Please let us know if this helps.
Thanks for the replies. I will use the Gritter script and include it with document.ready. This way, it will always be shown on a page reload. Which is fine for now.