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

    Disable Submit Button with Conditional Logic Using Correct Input Answer

    Asked by johndmg on July 17, 2015 at 12:59 PM

    Is there a way to create an input that requires a person to fill in the “correct’” answer to submit the form? 

    Example:

    Form question:

    Please answer this question: what is 1 + 5?

     

    If the user does *not* type in “6”, the form is not submitted.

    verification math captcha workaround random expression disable submit prevent submission stop submission solve math problem simple math captcha submi
  • Profile Image
    JotForm Support

    Answered by BDAVID on July 17, 2015 at 02:08 PM

    This is simple to accomplish creating conditional logic, you could set to show the submit button only if the condition or conditions are met, if not met, the submit button won't show and form will not be submitted, please check the animated image example:

    Here is my cloned version for you to test it: http://form.jotform.co/form/51975931486873

    You can clone it if you want to take a deeper look: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Here are some guides about conditions that may be of your interest: 

    http://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic

    http://www.jotform.com/help/316-How-to-show-or-hide-a-field-in-the-form-based-on-the-other-field-input-or-selection

    http://www.jotform.com/help/196-Hide-or-Show-Multiple-Fields-at-Once

    http://www.jotform.com/help/297-Show-or-Hide-multiple-fields-at-once-using-form-collapse-tool

    http://www.jotform.com/help/317-Configuring-Change-Thank-You-URL-after-submission-condition

    If you have another question, please open a new thread, we will be glad to assist you.

  • Profile Image

    Answered by johndmg on July 17, 2015 at 02:40 PM

    Thanks! That is a very interesting solution.

    Is there any way that this same scenario could be accomplished while also keeping the submit button visible consistently?

    My only concern with this approach is I'll probably need to explain the technique before hand, as most folks are accustomed to seeing a submit button. If it is missing, they may assume the form is "broken".

    Again, thanks for all of your help!

  • Profile Image

    Answered by grade4pagasa on July 17, 2015 at 02:40 PM

    cool solution, BDAVID !

    what i tried to experiment with is use Random Value Generator to generate random single digit numbers that will be different each time a form is accessed. 

    i also utilized form calculation to get the correct value and compare it to the user's answers.

    which then will trigger (conditional logic) the submit button to show if it's correct.  

    the method i used is tedious. i found some other ways on how to avoid spam by using Captcha variations

    here's the link to my experiment.

  • Profile Image
    JotForm Support

    Answered by BJoanna on July 17, 2015 at 03:02 PM

    @johndmg

    If submit button is shown than your users would be able to submit your form even if they did not insert correct values. Only other was that I could think of is to add page break inside of your form and then hide next button if conditions are not met. But basically it is the same solution as my colleague provided.

    http://form.jotformpro.com/form/51975429134966? 

    @grade4pagasa

    Thank you for workaround you provided. 

  • Profile Image

    Answered by johndmg on July 17, 2015 at 03:50 PM

    I see. Thanks again for everyone's prompt reply.

  • Profile Image
    JotForm Support

    Answered by BJoanna on July 17, 2015 at 04:20 PM

    You're welcome.

    Feel free to contact us if you have any other question. 

  • Profile Image

    Answered by grade4pagasa on July 18, 2015 at 05:58 AM

    hello again, johndmg

    i just couldn't help myself on your question as i was intrigued by it and find it useful. 

    here's the updated demo page with the disabled submit button
    [screen capture at the bottom of this reply (fig. 2)] 

    N.B. i limited the form to allow 5 submissions only.

    disclaimer: i am not a coder. so please bear with my method. i based the idea on the limited knowledge i have on JotForm and by Googling stuff. and feel free to modify as needed.

    here are the steps i did: 

    1. i created 2 submit buttons

    2.  button 1 will be shown when the form loads (fig. 1)

    3. i hid the 2nd button - will appear once the correct answer is entered (fig. 1)

    4. then i entered this script in the CSS section (to set the 1st submit button opacity to 35% and disable the pointer & cursor properties when hovered on the submit button - input_2):

    #input_2
    {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;

    hope this helps.

      

    fig. 1

     

     

    fig. 2

  • Profile Image

    Answered by grade4pagasa on July 18, 2015 at 08:26 AM

    crossed fingers ...

    can the "disabled submit button" be a Feature Request for the Conditions Wizard?
  • Profile Image
    JotForm Support

    Answered by KadeJM on July 18, 2015 at 04:21 PM

    Based on your last two responses above it seems you mean you want to show the submit button and just have it disabled instead.

    It's possible to fake that with just the button plus an image and using conditional logic but I think you'd prefer to have it tied directly to the submit button itself instead.

    Additionally yes, I have passed this along to our developers as a feature request on your behalf. I can't guarantee a timeframe but it will go into consideration and if there's any updates we'll let you know about it here.

  • Profile Image

    Answered by johndmg on July 20, 2015 at 03:01 PM

    "I think you'd prefer to have it tied directly to the submit button itself instead."

    That is correct. Sorry if my question was not clear. I sincerely appreciate the feature request.

    @grade4pagasa

    That is a really great solution and very useful! Thanks again everyone. What a great forum!

  • Profile Image

    Answered by Ben on July 20, 2015 at 04:56 PM

    @grade4pagasa Are you sure you are not a coder by some chance? :)

    I actually had a similar idea as I started reading this thread so here it is in hope it helps someone.

    What is does:

    1. Takes 2 random numbers from 0 to 10 and asks you for the result of their sum
    2. Until the number is correct a false button is shown
    3. Once the numbers match, it shows the new button.

    You can see here how it looks:

    http://form.jotformpro.com/form/52005505865957

    - Of course the top 3 fields with the values and results are going to be hidden and we do that by clicking on them with your right mouse button and select Hide Field option:

    Now, to get numbers that change each time this is what we do - we add 1 form calculation (for now).

    In its wizard we set it like so:

    What is done here?

    We add a random number by utilizing random() function which we get by clicking on that 3 dots button marked in the screenshot.

    Now, since this will create a 0.xyz number and we need it to be from 0 to 10 we multiply it with 10. The same logic applies if you want to have numbers from 0 to 100 by multiplying the numbers with 100 instead.

    Now we also do not want decimal places, so lets remove them by setting the advanced option to 0 decimal places.

    OK, so we have set one field, now it is the hard part of creating that second value.

    You must click on the first Form Calculation (the one that we had just set up) and click on Duplicate field:

    That is it - the hard part is over ;)

    Now we add another Form Calculation widget to the form and we set it up to sum the first and the second.

    We now have a field that holds the total that the customer will need to type in, so the math part is now over :)

    Now we add a text field that the user will type their result into.

    I have used TextBox field for this:

    Right above it I have also added the Text Field:

    Now the Text field allows pipping and that allows us to show the numbers from the form calculations by adding them into the text field using their field names.

    It looks like this:

    <p>How much is {value1} + {value2} ?</p>

    You can see here how to get Field tag / name:  How to find Field IDs & Names

    OK, so that is all set. What we need now is to add another Text field to the form, which we will use for the submit button.

    In this second once, I would place this:

    <div class="form-buttons-wrapper" style="text-align: center;">
     <button class="form-submit-button fakeButton" disabled="" type="button">Submit</button>
    </div>

    It is basically the same HTML code that jotforms have for their submit button, with the slight difference of a fakeButton class.

    Now, we should see 2 submit buttons on our form (one jotform's submit button that was added automatically for us, and the fake one that we have just added).

    I would have gone with the image since usually this is how I did it, but seeing your CSS code @grade4pagasa it was shame not to use it as it will show the same button as the one under it (the real one).

    So this is the CSS code that I have added to the form's custom CSS field:

    .fakeButton {
     pointer-events: none;
     color: lightgray;
    }

    You can add it by following the steps here: Inject Custom CSS Codes

    So what is left are conditions.

    We set them similarly to what was shown by my colleague David at the top, so we have something like this:

    The first Submit - the one that we are showing is the submit button, while the second (the one that we are hiding) is actually the Text element.

    All that is left is to Preview and comment back how you like it :)

    This is the link to the clone with the Form Calculations hidden so you can see the same as your users would: http://form.jotformpro.com/form/52006861010945

  • Profile Image

    Answered by grade4pagasa on July 23, 2015 at 02:13 AM

    cool solution, Ben ! 

    now that's a coder's thought process 😊

  • Profile Image

    Answered by grade4pagasa on July 25, 2015 at 01:41 AM

    COOL ! WOOOHOOOOOO 😊

  • Profile Image

    Answered by johndmg on July 28, 2015 at 12:34 PM

    Wow!, Thanks so much for this!

  • Profile Image

    Answered by Ben on July 28, 2015 at 01:38 PM

    In my colleague's name, you are welcome and I agree this is a very useful feature :)

    Do let us know if you want to have the minus/plus random as well, or have any other questions and we would be happy to assist with them :)