Show/Hide fields based on selected options.

  • 416soclean
    Asked on April 29, 2024 at 10:57 PM

    Hello support. Need your assistance. I have a form that has 2 selections -

    Ask a question OR Book An Appointment

    If the client requests Ask a Question - I need a set of fields to be visible - name/email/phone number and additional information to be visible with the captcha and then the submit button.


    If the client selects Book an Appointment, I need the second part of the form to be activated allowing them to select the services they require followed by the rest of the form details and a submit button.

    I have tried multiple options to make this happen, however, have had no success. Any assistance would be appreciated.

    Form location below -

    https://form.jotform.com/241198207617257

    Thanks.

  • Eliza JotForm Support
    Replied on April 30, 2024 at 2:18 AM

    Hi 416soclean,

    Thanks for reaching out to Jotform Support. I'm sorry you're having difficulties setting up the conditions. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

    Thanks for your patience and understanding.

  • Eliza JotForm Support
    Replied on April 30, 2024 at 2:37 AM

    Hi 416soclean,

    Thanks for your patience while I look into this. I can see two parts of the form that has the name, email address and phone number fields. To clarify, if the form filler selects 'Ask a Question', do you want to show the part of the form shown in the screenshot below?

    Show/Hide fields based on selected options Screenshot 80

    If yes, you can move the CAPTCHA field right below the 'Please enter your request' field, and add another Submit button below the CAPTCHA field. Here's how to do that:

    1. In Form Builder, click on the CAPTCHA field. Then, hold and drag it to the upper part of the form.
    2. Click on Add Form Element in the upper-left corner of the page, then drag and drop the Submit button below the CAPTCHA field.
    3. Click on the Gear icon to open Properties.
    4. Under General, select Center for the Button Alignment.

    Show/Hide fields based on selected options Screenshot 91

    Next, let's set up conditions to only show certain fields when 'Ask a Question' is selected:

    1. Click on Settings in the orange navigation bar at the top part of the page.
    2. Go to Conditions, and click on Add Condition.
    3. Select Show/Hide Field, and set the conditions as shown in the screenshot below.
    4. Click on Save.

    Show/Hide fields based on selected options Screenshot 102

    Here's a screencast of how it's done:

    Show/Hide fields based on selected options Screenshot 113

    Check out the screencast below to see my results:

    Show/Hide fields based on selected options Screenshot 124

    Now, as for the 'Book an Appointment' option, do you want all the fields under 'Book an Appointment' to appear if it's selected? If yes, let's set up another conditions:

    1. Still under Conditions, click on Add Condition.
    2. Select Show/Hide Field, and set the conditions as shown below:
    • IF: I would like to
    • STATE: Is Equal To
    • VALUE: Book an Appointment
    • DO: Show Multiple
    • FIELD: You need to select numbers 9 to 82.

    4. Click on Save.

    Here's a screencast of how it's done:

    Show/Hide fields based on selected options Screenshot 135

    Check out the screencast below to see my results:

    Show/Hide fields based on selected options Screenshot 146

    You can also clone my Demo Form if you like. If that’s not exactly what you’re looking for, can you explain a bit more, so I can help you better?

    Once we hear back from you, we'll be able to help you with this.

 
Your Answer