Add Line Between Checklist Choices

  • drjax
    Asked on November 16, 2014 at 10:16 PM

    My Adult Online Intake form needs lines at some points in the list of symptoms.  Here's what I need....

     

    Add Line Between Checklist Choices Image 1 Screenshot 20

    Is this possible?

    Jack

  • DarkFx
    Replied on November 16, 2014 at 11:15 PM

    Hi,

    It's possible, you can use the widgets future of the form, please follow instructions below.

     

    1. Go to your form click Widgets then type "Form Separator" on the textbox field like the Screenshot below.

     

    Add Line Between Checklist Choices Image 1 Screenshot 30

     

    2. Click the "Form Separator" widget and you can see the Form Separator Settings like the Screenshot below.

    Add Line Between Checklist Choices Image 2 Screenshot 41

     

    Thanks.

  • drjax
    Replied on November 16, 2014 at 11:43 PM

    Hi DarkFx,

    Thanks for your prompt response.  Unfortunately, it doesn't work for me.  I am using a checkbox control, but adding many items to it.  The Form Separator will not allow me to separate items within the same field.  Take a look  at my Adult Intake input 110.  It may help you understand.  I wish there was a simple line draw option.  Please tell me if I'm missing something.

    Jack

  • Ashwin JotForm Support
    Replied on November 17, 2014 at 8:52 AM

    Hello jack,

    I am not sure how to add a line within the checkbox options. 

    But you can anytime manually add a line "__" (underscores ) as check box options. We can then hide the check box of this underscore by injecting custom css code.

    Here are the steps you should follow:

    1. Add underscores to create a line as your check box options.

    2. Find the field id of that option.

    3. Inject the custom css code to hide that check box control of that option.

    #input_3_1

    {

    display:none

    }

    You can change the "#input_3_1" with the field id of your check box option.

    Please check the screenshot below on how to do this:

    Add Line Between Checklist Choices Image 1 Screenshot 20

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • DarkFx
    Replied on November 17, 2014 at 9:15 AM

    Hi Jack,

    Here is another way to add line below the checkbox.

     

    Please add this CSS code to your Form Styles.

     

    .form-radio-item, .form-checkbox-item {
    margin-bottom: 6px;
    padding: 0 0 6px 0;
    margin-top: 0;
    border-bottom: 1px solid #000;
    width: 690px;
    }

    To add your style follow this guide, How to Inject Custom CSS Codes.

     

    Also, please change the "width" with your form width. :)

     

    Demo: http://form.jotform.me/form/43198570216457

     

    Hopefully that will work!

     

    Thanks.