Creating a form with tabs as can be seen in web page

  • give2kids
    Asked on April 8, 2016 at 11:47 AM

    Hello --

    Is there a way to create multiple versions of a web form, within one form, as can be found here?

    http://www.kars4kids.org/

    I would also like to create a web form similar to the above, in that it
    has a text label on top of the drop-down boxes (as opposed to text being over the box, or to to one side).
    ie: "Make" Model", etc.

    In other words, I'd like to create a form that has a very similar functional structure to the example.

    Thank you in advance for any help!

    Ron

  • victor
    Replied on April 8, 2016 at 1:28 PM

    Thank you for contacting us. Yes, it is possible to create a similar form as in the pages you have given. I have created a small sample of how this can work. You can always adjust the form using CSS so it will look better

    https://form.jotform.com/60985018622963

    You may clone the form and analyze it as you like.

    Creating a form with tabs as can be seen in web page Image 1 Screenshot 30

    In reality this is a multiple page form with tabs and not different forms.

    Once you have create a multiple page form, you can add the FORM TAB widget which will create tabs for each page.

    Creating a form with tabs as can be seen in web page Image 2 Screenshot 41

    If you are having problems designing the form using CSS, you may always ask and we will do our best to help.

  • give2kids
    Replied on April 8, 2016 at 3:53 PM

    Hello Victor,

    Thank you very much for your help!

    I had hoped to find a way for the drop-down labels (Year, Make, Model, etc.) to be
    on top of the drop-down box itself (per example) instead of above them, but can
    live without that, if it's complicated.

    I will move forward with form as you've designed. Thanks again.

  • victor
    Replied on April 8, 2016 at 5:31 PM

    Thank you for your clarification. I am assuming that you would like to have the label inside the dropdown field, but not have it as an option. This is can also be done. I have adjust the form so you make take a look.

    Creating a form with tabs as can be seen in web page Image 1 Screenshot 20

    I am assuming that the form on the site is link to a DB where it pulls all the models and populates it in the dropdown. Jotform, does not allow you to connect to DB and populate a dropdown. But using condition and other dropdowns, you can see that this can be simulated.

    If you have any other question, please let us know.

     

  • give2kids
    Replied on April 8, 2016 at 5:37 PM

    Wow! Fantastic service... thank you Victor! Looks great!

    Last question: how do I add 3 more tabs across the top (that I can label later)?

    Not asking you to do it -- (unless it's easier for you to just
    make it, than to explain it to me).

  • David JotForm Support Manager
    Replied on April 8, 2016 at 6:45 PM

    Simply add more Page Break fields, each one will create a new tab(page), example:

    Creating a form with tabs as can be seen in web page Image 1 Screenshot 20

    Let us know if you need more help.

     

     

  • give2kids
    Replied on April 8, 2016 at 7:04 PM

    Fantastic. Thanks again Victor!

  • liyam
    Replied on April 8, 2016 at 11:26 PM

    On behalf of my colleagues, you are welcome.

    If you have other questions, please do not hesitate to let us know. We'll be more than happy to assist.

    Thanks.