JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
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.
How can I add a matrix with multiple checkboxes preselectedAsked by ugrinoskiwinner on August 04, 2016 at 07:57 AM
I need a table like the one on the screenshot with multiple choices preselected. I need it for display purposes only.
For calculation purposes I only need the last row to be selected and to contain values, but am thinking to create another form for it if nothing else works.
checkboxes matrix field
I need it to look like the photo bellow. And to be read only.
Is it doable?
Hello Goran, yes that's achievable by using our Matrix Field.
Once added, click the GEAR icon at the top right of the Matrix dragged on your Form Builder and make the following changes:
1. Set the ROWS and COLUMNS as you see fit (separate them with a new line). I was hoping to emulate the same labels you had on the screenshot but I don't know Russian :)
2. Change the INPUT TYPE to Checkbox
3. Set your CALCULATION VALUES since you mentioned you would need one for the last row
Here's a related guide How-to-Perform-Form-Calculation-in-the-Matrix-Field (you can pick which row you would like to be included in the calculation) The guide will be accompanied with screenshots so it's easy to follow.
Now, for your requirement to have it as "read-only" I'm afraid there's no current way to achieve that. Since our forms only accept CSS, and there's no real way to disable an input fields via CSS, your only option is to use the Form's full source code. The general workflow would be as follows:
1. Finish your Matrix table and finalize your form.
2. Grab your form's source code [GUIDE: How-to-get-the-Full-Source-Code-of-your-Form]
3. Embed it on your website.
4. Then either use HTML or JS to disable the checkboxes within the table.
a. You may either manually set each checkbox with the disabled="disabled" HTML tag
Hope these helped, if you have further questions, don't hesitate to ask.
BTW, I forgot to mention, you may also preselect the checkboxes based on your preference by using the full source code. Just append the "checked" attribute to your desired checkboxes.
Thanks for the detailed answers.
Was hoping for a more in-house solution, but a man's gotta do, what a man's gotta do.
You can actually prepopulate checkboxes on matrix fields using URL parameters.
I suggest using this app you can prepopulate matrix fields easily. http://prepopulate.jotform.io/
A short URL is also provided when you use the app, e.g. http://goo.gl/DEJFMO
Hope this helps!
Would this workaround demo I made for the read-only matrix work for you?
This is inspired by EltonCris's suggestion on using the pre-populated matrix. I added a placeholder (fig. 1) to capture the matrix choices then recursively disabled the matrix (fig. 2) based on those checked items. * This was achieved using what you refer to as in-house solution.
As for your specs on the last row with values, I'm not sure if what you want for that row is to contain static texts or calculated values. If a calculated value, I can't think of any remedy right now. But if it will just contain static text (that is, all of the table content is just for display - not for interactivity), I think it would be better to create the same table with texts and images using HTML (using your preferred HTML editor). Then you can copy and paste the HTML code for your table layout inside JotForm's HTML Text widget (fig. 3).
- Randy, fellow JotForm user.
Thanks for the input Randy :)
@Goran, please give it a whirl and let us know how it goes (prepopulating the checkboxes using URL parameters and the workaround suggested by Randy to disable the matrix field using Conditional Logic)
Don't hesitate to get back to us if you need further help.
Thank you guys for the fantastic solutions. I was in a hurry and turned the form around.
Namely, I needed the form as some sort of pricing table showing features (rows values) for each package (column).
What I did is a dropdown menu with packages, that shows features for the package you select. Works for my scenario.
Again, thanks for the help.
On behalf of my colleagues and Randy, you're kindly welcome. When I've checked your forms I see that you're using hidden fields on your form. And, you're trying to show hidden fields with a condition.
Please note that hidden box fields can never be displayed in a form because they use the HTML tag "<input type="hidden">" which, when interpreted by the browser is a field that's invisible to the user so it causes conflict and your form will not work properly.To solve that issue, please show your fuels as you see below:
If you want to show/hide your fields you need to use conditions. Please, check the guide below for more information:
If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.