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

    Different checkbox layout

    Asked by coentrast on October 01, 2011 at 11:14 AM

    Hi all,

     

    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 =)

     

    Cheers,

    Coen

    Screenshot
  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2011 at 12:15 PM

    Hi Coen

    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

    That ought to do the trick! Of course, CSS can be injected to style the field accordingly but here's a clone of your form with just the steps above implemented.

    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.

    Cheers :)


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on October 01, 2011 at 02:16 PM

    Coen

    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:

    .matrix_asterisk {
    color:red;
    margin-left:0.4em;
    }

    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.

    Cheers


    ~ Wayne

  • Profile Image

    Answered by coentrast on October 02, 2011 at 04:50 AM

    Hi Wayne,

     

    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!

     

    Cheers,

     

    Coen

  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2011 at 06:22 AM

    Glad to be of assistance, Coen.
    Looking forward to your results.

    ~ Wayne