Creating a table in the Form Builder

  • SmartBusinessSystems
    Asked on October 20, 2016 at 9: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?

    By the way, thank you for creating this free form builder product!

    Jotform Thread 967280 Screenshot
  • Charlie
    Replied on October 21, 2016 at 3: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.

    Creating a table in the Form Builder Image 1 Screenshot 30

     

    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.

    Creating a table in the Form Builder Image 2 Screenshot 41

    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.