Disable Submit Button with Conditional Logic Using Correct Input Answer

  • Profile Image
    Asked 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? 


    Form question:

    Please answer this question: what is 1 + 5?


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

  • Profile Image
    Answered 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: 






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

  • Profile Image
    Answered 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 on July 17, 2015 at 03:02 PM


    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.



    Thank you for workaround you provided. 

  • Profile Image
    Answered on July 17, 2015 at 03:50 PM

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

  • Profile Image
    Answered 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 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 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.


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

  • Profile Image
    Answered 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:


    - 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>

    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 on July 28, 2015 at 12:34 PM

    Wow!, Thanks so much for this!

  • Profile Image
    Answered 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 :)