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

  • Profile Image
    kuzovnoj_remont23
    Asked on July 03, 2017 at 02: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.

  • Profile Image
    Chriistian
    Answered on July 03, 2017 at 04: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;

    }

     

     

    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;

    }

     

    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.

  • Profile Image
    kuzovnoj_remont23
    Answered on July 03, 2017 at 05: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 (((

  • Profile Image
    Charlie
    Answered on July 03, 2017 at 07:11 AM

    Is this how you like it to show:

     

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

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

     

    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;

    }

    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;

    }

     

    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. 

  • Profile Image
    kuzovnoj_remont23
    Answered on July 03, 2017 at 07: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?

  • Profile Image
    ashwin_d
    Answered on July 03, 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!  

  • Profile Image
    kuzovnoj_remont23
    Answered on July 07, 2017 at 05:42 PM

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