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

    Short terms Widget help

    Asked by SunbridgeInstitute on January 07, 2016 at 11:19 AM

    Hi there! Is it possible to eliminate the box of text on the Short Terms widget? If not, is there any other way that I can get a checkbox with smaller type for a very short set of terms?

    You can see my dilemma if you scroll all the way to the bottom of my form. I have 2 options there where it says "by checking this box, I understand..." One of them has huge type, and the other one is fine, but it has a big empty box underneath.

    Thank you!

    Page URL:
    http://www.jotform.com//?formID=60007126527952#

    terms widget checkbox scroll all and
  • Profile Image
    JotForm Support

    Answered by Charlie on January 07, 2016 at 03:38 PM

    I checked your form, it seems like you added the content of the terms in the actual label. The box for the Short Terms widget is to display the content of the terms in a scrollable text box (non-editable). You can see how this widget works here: http://widgets.jotform.com/widget/short_scrollable_terms.

     

    Now the 1st check box which is "Cancellation Policy" field is using a default check box, however, the form has a general design for the check box, it seems like you have used a theme in our designer, this is to blend the whole design.

    If you wish to use a default check box similar to the widget, you can use this custom CSS code:

    /** hide the circle box*/

    #label_input_132_0::before {

        display: none !important;

    }

     

    /** hide the circle with check on it */

    #label_input_132_0::after {

        display: none !important;

    }

     

    /** position the label aligned with the check box*/

    #label_input_132_0 {

        position: relative !important;

        top: -25px !important;

    }

     

    /** display the default check box and design it*/

    input#input_132_0 {

        display: inline-block !important;

        vertical-align: center !important;

        margin-top: 0px !important;

        width: 20px !important;

        height: 30px !important;

    }

    Paste the code under the CSS tab in your Form Designer Tool.

     

    You can check how it looks like here: https://www.jotform.com/60066443534957 

    Do let us know if that will help.

  • Profile Image

    Answered by SunbridgeInstitute on January 08, 2016 at 08:40 AM

    Thank you for your answer. My overall concern is not so much about the shape of the checkbox, but the size of the type/text. The reason I put the terms in the label box was because the type size and color works well. The other option would be to put it all in the box, but then I would want the type color to be changed, and also the size of the box to be shortened considerably. Can you help me with these things? Thank you!

  • Profile Image
    JotForm Support

    Answered by Charlie on January 08, 2016 at 10:26 AM

    Apologies for the confusion. 

    You can use this custom CSS code in your Short Scrollable widget:

    /** label beside the check box*/

    label {

        color: #fcfcfc !important;

        font-weight: normal !important;

        font-size: 0.95em !importnat;

        font-family: "Arial", sans-serif !important;

    }

    /** Content of the widget */

    #scrollContent  {

       color: white !important;

    }

    To adjust the scrollable box to where the content will be shown, just click the widget and set the "Height" attribute to a lower value.

     

    Here's the cloned form with the changes I made above: https://www.jotform.com/60073605975964.

    I tried to match the styling and color of the other labels in your other fields. If there are changes you want to apply, we can adjust the CSS code for you or you can easily update the code I provided.