- coentrastAsked on October 01, 2011 at 11:14 AM
I'm busy with designing a form and I'm stuck with a checkbox field.
See in the attachment here what I want to achieve:
I would love to know how this is possible??
I do have the knowledge to change code in PHP/CSS etc. but I don't know how I can design a field like this.
All help would be appreciated. And keep up the good work here @ JotForm =)
- JotForm SupportabajanAnswered on October 01, 2011 at 12:15 PM
Thanks for your query and compliment. In my opinion, substituting a single Matrix field for the current seven (7) Check Box fields will solve your problem.
After inserting the matrix, edit it in the following manner:
1. Click the Rows button and replace its default content with the days of the week (each day on a new line)
2. Click the Columns button and enter 8 - 12 AM, 12 - 4 PM and 4 - 8 PM (again, each on a new line)
3. Click the Input Type button and select Check Box
If you need addidtional help with this or any other aspect of our product, do let us know. Our team is always willing to help users get the best mileage with their forms.
- JotForm SupportabajanAnswered on October 01, 2011 at 02:16 PM
There's something that should be borne in mind about matricies: Unless it is intended that each row ("day", in this case) have at least one box checked, do NOT set the field to required. Otherwise, some users will be unable to submit the form. (Unless they check at least one box in every row and put explanatory notes in the comments box stating that they didn't really mean to select certain time slots but were forced to do so by the form, which would be ridiculous!)
One workaround for this would be to disguise the field as being required (by including a red asterisk) after the label. While injected CSS can be used to change the default style of asterisks automatically inserted at the end of genuine required fields' labels by the form builder, no amount of specificity can target asterisks entered by a form's creator. However, if each such asterisk is wrapped in span tags and given an ID or class, injected CSS can be used to style them just like the other asterisks.
So, to make the label look like this: " Day and Time (Multiple Options Possible) * ", type this as the label and inject the following CSS:
After injecting the CSS, save the form.
Here's another clone of your form, this time with the matrix disguised as being required. Incidentally, after saving the form, do not click the matrix's label. If you do, the asterisk will vanish and you'll have to re-enter the code.
- coentrastAnswered on October 02, 2011 at 04:50 AM
Thank you very much for your accurate answers. I'm going to try this out.
I already thought that it is best to get all the fields in a table, but didn't quite know how to validate everything.
I will give this a try and will let you know if it worked out! =)
Thanks again and have a ncie day!
- JotForm SupportabajanAnswered on October 02, 2011 at 06:22 AM
Glad to be of assistance, Coen.
Looking forward to your results.