Creating a table in the Form Builder

  • Profile Image
    SmartBusinessSystems
    Asked on October 20, 2016 at 09:19 PM

    Hello, can you please examine the attached images? I am creating a form and need something similar, can you please advise if there are any similar Forms that will do this?

  • Profile Image
    Charlie
    Answered on October 21, 2016 at 03:07 AM

    Hi,

    There are a couple of things that you can use here. But the most effective way for a table to be designed aesthetically is by using CSS code.

    Here are the options that you can use:

    Option #1: You can use the Matrix field found under the "Survey Fields" section. Unfortunately, the matrix field can only have one type of input. And the column for the name in your case is not a text box field in the matrix, its more of a predefined list.

     

    Option #2: You can use the Configurable list widget. To learn more about it. You can check this guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget 

    Here's my test form: https://form.jotform.com/62941198547972. The design of the Configurable list widget by default is borderless. But you can use custom CSS code to style it as you like.

    CSS is a language that allows you to style HTML elements, in this case, the widget is in HTML structure so you can style them. To learn more about CSS, you can check this link: http://www.w3schools.com/css/

    In my test form, this is the custom CSS code that I'm using:

    th, td {

       border: 1px solid black;

    }

    table {

    width: 100% !important;

    }

    .col1 {

    width: 60% !important;

    }

    .col2 {

    width: 10% !important;

    }

    .col3 {

    width: 10% !important;

    }

    .col4 {

    width: 10% !important;

    }

    .col1 > input{

    width: 90% !important;

    }

    td.col5, th.col5 {

    border: none !important;

    }

     

    I hope that helps.