What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Creating a table in the Form Builder

    Asked by SmartBusinessSystems 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?

    Screenshot
    Form Builder table builder creating
  • Profile Image
    JotForm Support

    Answered by Charlie 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.