Is it possible to have a table inserted via HTML and allow customers to fill in fields as if they are text boxes?

  • yogamommy6
    Asked on February 21, 2016 at 8:39 PM
  • Chriistian Jotform Support
    Replied on February 22, 2016 at 2:57 AM

    It is possible to add a table to your form by using the Matrix field.

    1. On your form builder, select Survey Tools and add the Matrix field

    2. Click the Input Type on the menu and select Text Box

    Is it possible to have a table inserted via HTML and allow customers to fill in fields as if they are text boxes? Image 1 Screenshot 20

    Here's a form so you can see it in action: https://form.jotform.com/60521316477958

    If you like, you can also clone it to your account by following this guide: How To Clone A Form

    Do let us know if you need further assistance.

  • yogamommy6
    Replied on February 22, 2016 at 9:46 AM
    Thank you!
    Yes, I tried that but was having trouble adjusted the size of the cells. How can I do that?
    Is it possible to adjust the color?
    Amy J. Max
    www.amyjmax.com
    Web Design & Video Production
    ajmax productions
    ...
  • Ashwin JotForm Support
    Replied on February 22, 2016 at 11:24 AM

    Hello Amy,

    Yes it is possible to change the size of the cells and also the color by injecting the custom css code in your form. 

    Please let us know for which columns you want to change the textbox width and also for which label of what color you want to change in the matrix field, we will help you with the required custom css code.

    We will wait for your response.

    Thank you!

  • yogamommy6
    Replied on February 22, 2016 at 1:46 PM
    Thank you so much. I really want to understand how to inject CSS codes so I can do it in the future.
    I want to make the entire chart the width of the form of the most part. So, as for the cells, not too much bigger than they are now.
    I would like the make the headers of each column have a turquoise background (highlighted) if possible.
    Thank you!!
    Amy J. Max
    www.amyjmax.com
    Web Design & Video Production
    ajmax productions
    ...
  • Kiran Support Team Lead
    Replied on February 22, 2016 at 4:24 PM

    You may change the background color of the table headers and increase the size of the text by using the css code below:

    .form-matrix-column-headers {

    background-color: ‎#00ffff !important;

    }

    .form-matrix-values {

    width: 150px !important;

    }

    You may inject the CSS codes to your JotForm by following the guide below:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You may get the ID/class information of each element of your JotForm from the Browser inspect console (Press F12 to activate).

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.