How can I create a table similar to this?

  • poonk
    Asked on January 7, 2019 at 10:51 AM

    I do however have another question, how can I customize a table on my form, similar to something like this:


    How can I create a table similar to this? Image 1 Screenshot 20

  • Support_Management Jotform Support
    Replied on January 7, 2019 at 12:30 PM

    Hey @poonk - For this, you can use the INPUT TABLE field. You can find this field by clicking the ADD FORM ELEMENT button > go to the BASIC tab > scroll down to the SURVEY ELEMENTS section > then drag the field to your form.

    How can I create a table similar to this? Image 1 Screenshot 20

    If you need the table to look exactly like how you have it in the image (with the same borders), just let us know the URL of the form you're working on. Please add the field first with the all the rows and columns configured and we'll gladly assist you with the CSS codes you need to mimic that design.

  • poonk
    Replied on January 7, 2019 at 12:43 PM

    Yes, I did try input table, but that's more for survey purpose, and not for information collection purpose.

    My form URL is this:
    [ https://form.jotform.com/90046986430258 ]( https://protect-us.mimecast.com/s/TfM4CER7KAFrw11HNmy7g?domain=form.jotform.com )

    Thanks for your assistance!

    ...
  • Support_Management Jotform Support
    Replied on January 7, 2019 at 2:11 PM

    Thanks, but that form doesn't have an INPUT TABLE field. Can you be more specific on what you meant by "but that's more for survey purpose, and not for information collection purpose"?

    I created a quick demo form to show the capabilities of the input table field.

    https://www.jotform.com/90065969266974

    Will that work the same as what you had in your screenshot? The rows and columns are the same and each cell asks for the respective info you need.


  • poonk
    Replied on January 7, 2019 at 2:43 PM

    OK...I teach Information Technology at College, and thought that could be a way to modify your Input Table to suit my needs. I am just super new with JotForm so a little unsure! How did you modify/create the table as shown in your demo?

    I think you are understanding my names....only with the following minor tweaks under the heading:
    Name (last, first, middle)
    Date of birth (date format)
    Email (email format and need a bigger box)
    Phone number (phone number format, and likely need onecolumn for home and one column for mobile)

    Otherwise, thanks so much for your assistance...I think it is coming together nicely. Welcome any suggestion you might have! Thanks.


    ...
  • Support_Management Jotform Support
    Replied on January 7, 2019 at 4:23 PM

    Sadly, all the fields inside the input table are plain textboxes. It won't have validation features similar to the standalone/regular date or email fields. I don't think you can achieve your goal using this field now that you mentioned your requirement in more detail. The closest you can get is to name your columns the same way you described it.

    As an alternative, please have a look at the CONFIGURABLE LIST WIDGET. This wouldn't look like a table on its own but behaves like one. It will ask for input from your respondents in a row by row manner.

    Complete guide: How-to-Set-Up-the-Configurable-List-Widget

    And if you're open to further suggestions, why not just conditionally show/hide fields so you can take advantage of the validation features of default fields? The idea is to conditionally show more questions if the user wanted to add more travelers.

    Following your example, I modified my demo form to utilize the following features (don't worry, these will be explained in full detail on the guide below):

    1. SECTION COLLAPSE FIELDS

    2. SHOW / HIDE CONDITIONS

    https://www.jotform.com/90065969266974

    Complete guide: Show-or-Hide-Multiple-Fields-at-Once-Using-the-Section-Collapse-Field

    Result:

    How can I create a table similar to this? Image 1 Screenshot 20

  • poonk
    Replied on January 7, 2019 at 4:43 PM
    Ah...no matter what I have clicked, I am getting this:
     
    ...
  • David JotForm Support Manager
    Replied on January 7, 2019 at 7:46 PM

    Your screenshot did not post on this thread, open this forum thread in your browser first: https://www.jotform.com/answers/1691885 

    Then upload the screenshot:

    05 29 2017 1496000252 Screenshot 10

  • poonk
    Replied on January 8, 2019 at 10:43 AM

    I am a little confused about configurable widget, I do think your suggestion re: collapsable section might work, will have to play with it further to see.

    Is there the opportunity to save the form as a different name so that I can retain the layout of the first form that I have created? Thanks.

    ...
  • David JotForm Support Manager
    Replied on January 8, 2019 at 11:13 AM

    There is, you can clone the form as shown on this guide: https://www.jotform.com/help/27-How-to-Clone-an-Existing-Form-from-Your-Account 

    Open a new thread if you have a new question, we will be glad to assist you.