How to fit text of the "Terms & Conditions" widget to the form

  • kuzovnoj_remont23
    Asked on July 3, 2017 at 2:51 AM

    Here is a screenshiot of my form: http://prntscr.com/fqy7ph

    How to fit text of the "Terms & Conditions" widget to the form, make it responsive? And is there any way to style it by my hand. I need another size of the font 12px and another color of the "Terms & Conditions" link and underline it.

  • Chriistian Jotform Support
    Replied on July 3, 2017 at 4:30 AM

    To change the color, font size and underline the text in the Terms and Conditions, please inject the custom CSS code below inside the widget settings. For example, please see the image below:

    label#_label {

        white-space: normal !important;

        font-size: 12px;

        text-decoration: underline;

    }

     

     

    How to fit text of the Terms & Conditions widget to the form Image 1 Screenshot 30

    However, to fit the text in the widget inside the form, you need to increase the width of the form and inject this custom CSS on the widget itself:

    label#_label {

    white-space: normal;

    }

    How to fit text of the Terms & Conditions widget to the form Image 2 Screenshot 41

     

    Lastly, to make the form mobile responsive, please add a Mobile Responsive widget on your form.

    Let us know if you need further assistance.
    Regards.

  • kuzovnoj_remont23
    Replied on July 3, 2017 at 5:34 AM

    I don't need to increase width of the whole form. I need another way to fit text to the form. And about underlined text. I need to underline the link ONLY, not the whole text. And how to change the color of the link to yellow?

    Mobile responsive widget doesn't help (((

  • Charlie
    Replied on July 3, 2017 at 7:11 AM

    Is this how you like it to show:

    How to fit text of the Terms & Conditions widget to the form Image 1 Screenshot 50

     

    If that's good, here's how you can apply that:

    1. First, set the width and height of your widget to both "0". 

    How to fit text of the Terms & Conditions widget to the form Image 2 Screenshot 61

     

    2. After that, we want to inject a custom CSS code in your form. Open your Form Designer tool, navigate to CSS tab and paste this code:

    #customFieldFrame_10 {

      width: 100% !important;

      height: 70px !important;

    }

    How to fit text of the Terms & Conditions widget to the form Image 3 Screenshot 72

    Save the changes.

     

    3. Now, open your widget's wizard page and navigate to the "Custom CSS' tab. Paste this CSS code there:

    a {

    color: yellow !important;

    text-decoration: underline !important;

    }

    * {

    font-size: 16px;

    }

    How to fit text of the Terms & Conditions widget to the form Image 4 Screenshot 83

     

    The CSS code I mentioned are easy to understand, you can see the color and the font-size, you can change it to the values you want. 

    I hope that helps. 

  • kuzovnoj_remont23
    Replied on July 3, 2017 at 7:40 AM

    Yes! That's what I need, thank you. And one more thing. How to make checkbox to be already assigned and user don't need to assign it by himself?

  • Ashwin JotForm Support
    Replied on July 3, 2017 at 10:26 AM

    Hello kuzovnoj_remont23,

    Do you mean to check the checkbox field of "Terms & Conditions" widget? Unfortunately it is not possible to achieve your requirement as it is not possible to change input attributes through css.

    The purpose of the "Terms & Conditions" widget checkbox is to ensure that user click on it to accept it.

    Thank you!  

  • kuzovnoj_remont23
    Replied on July 7, 2017 at 5:42 PM

    Ok, I see. Thank you. Now everything is good...