How To Make JotForm Table Read Only

Last modified date

Comments: 0

Contents

Problem

On some form elements, JotForm has the option to make the field read only.

However the Input Table element in JotForm does not have a read only option.

But there is a solution to this problem and will allow you to make a JotForm table read only.

Solution

The solution uses CSS.

Select the table in JotForm and then go to Advanced settings and then copy all of the FIELD IDs at the bottom.

Next, close the table properties section and then open the Form Designer by clicking on the paint roller icon and select the Styles tab:

Then in the Inject Custom CSS box at the bottom, paste all of the Field Id’s in and then add curly braces at the end like this:

#input_264_0_0, #input_264_1_0 {
}

Inside the curly braces add the CSS rule pointer-events: none;

#input_264_0_0, #input_264_1_0 {
    pointer-events: none;
}

Then click save in the bottom right of the panel:

What this does is it prevents the user from clicking into the box of the table and editing it, effectively making it a read-only table.

So you can see that now when you hover your mouse over the table inputs, it is not possible to click into the table and edit the values!

This is how you make a JotForm Input Table Read Only using simple CSS.

I hope that helps!

JakTech

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.