Terms and conditions widget - how can we add custom styles to it?

  • internationalnaturevolunteers
    Asked on July 11, 2015 at 1:26 AM

    Hello,

    I'm new to Jotform and I love it! I am sure to upgrade to the paid plan once my form is working ok. I appreciate all the features and also the reasonable pricing (I looked at formstack and typeform but their prices are RIDICULOUS, more than I pay for website hosting!).

    Can you please help me with something? I have a form called "Application form".

    I have put the "terms & Conditions" widget on the form. However, the text color and the tick box color is grey. I would like them to be black in color to match the other labels on my form. Can you suggest how I can do that?

    Thank you!

  • Ben
    Replied on July 11, 2015 at 6:09 AM

    Unfortunately that would not be possible since the widget does not have the option to allow for customization.

    If you want however, you can make one just like the widget, by utilizing a bit of CSS and the checkbox field.

    This is how it would look: http://form.jotformpro.com/form/51913001160943 (it is a modified clone of your form).

    This is the CSS code needed to be added:

    #id_41:hover .form-checkbox-item:after {
        color: red;
        content: "REQUIRED";
        font-weight: bold;
        margin-left: 20px;
    }
    #id_41 .form-checkbox-item {
        font-size: 16px;
    }

    but it depends on the checkbox having ID 41 - so it might be a bit different for some other form, which is easy to find out once you add your checkbox by following the steps here: How to find Field IDs & Names

    Now the important part in setting up your checkbox would be to add a bit of HTML to it, so it looks like so:

    I have read and agree to the INV legal <a href="https://www.nature.org.nz/terms-of-service.html">Terms of Service</a>.

    As you can see the A (HTML link element) has been added and that is it.

    Do let us know if that is something that you like and if you have any difficulties setting it up and we would be happy to assist with that.

    If you want, you can also just clone the form to your account by following the steps here: How to Clone an Existing Form from a URL and there is no need to do anything further, the checkox will already be there for you.

  • internationalnaturevolunteers
    Replied on July 18, 2015 at 1:00 AM

    Thank you so much Ben. This worked exactly as I wanted!

    I am very happy with the support you give, especially for the free plan. Once my site is live I will upgrade to a paid plan on Jotform as I have confidence your support is top notch, and also I would like to support this great service.