How do I prevent accidentally submitting the form every time I mistakenly press ENTER after completing a field?

  • worldpeaceforall
    Asked on February 13, 2016 at 9:02 PM
  • Nik_C
    Replied on February 14, 2016 at 7:27 AM

    Hi, 

    Easiest way to do this is to make your fields required, if user taps enter key it will try to submit your form but it won't submit it because all required fields are not filled. You can use either that, or you can add code to form that prevents form from submitting.

    To make fields required you click on field that you want to make required, and make sure it looks like in the picture.

    How do I prevent accidentally submitting the form every time I mistakenly press ENTER after completing a field? Image 1 Screenshot 60

     

    For other option you need to download your forms source code.

    You do that by clicking on "Publish" button.

    How do I prevent accidentally submitting the form every time I mistakenly press ENTER after completing a field? Image 2 Screenshot 71

    In wizard choose option to embed form

    How do I prevent accidentally submitting the form every time I mistakenly press ENTER after completing a field? Image 3 Screenshot 82

    There you can see an option to choose what kind of embed you want to do. You need to choose Source code from the dropdown menu 

    How do I prevent accidentally submitting the form every time I mistakenly press ENTER after completing a field? Image 4 Screenshot 93

    When you:

    1. picked Source code option from dropdown menu.

    2.Click on download source code button.

    How do I prevent accidentally submitting the form every time I mistakenly press ENTER after completing a field? Image 5 Screenshot 104

    Download should begin and you should get a zip archive containing your forms source code. You can open your forms source code in any text editor. After you downloaded your forms source. You need to open your html file, it should be named YOUR_FORM_NAME.html open it in any text editor and insert the following code Blue lines is what you need to insert. 

    <html>

    <head>

    <script type="text/javascript"> function disableEnterButton() { if (event.keyCode == 13) { event.cancelBubble = true; event.returnValue = false; } } </script> 

    </head>

    <body>

    <form id="your_form_id" name="your_form_name" method="GET" action="your_form_action" style="your_form_style"> <input id="textfield2" name="textfield2" onDISABLEDkeydown="disableEnterButton();">

    <input id="textfield2" name="textfield2" onDISABLEDkeydown="disableEnterButton();">

    <input type="submit"" value="submit">

    </form>

    </body>

     </html>

     

    You must add  onDISABLEDkeydown="disableEnterButton();"  for every field for which you want to disable submission on enter key.

    Remember, every time you want to change something in your form, you must update your form code. That means you must re-embeed your form to your website every time.

    I recommend first option because it is easier to solve your problem.

     

    I hope this helps you, please let me know if this solved your problem.

     

    Best regards