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

    How to customize the appointment slots widget using custom CSS codes?

    Asked by Buzzcom on January 29, 2016 at 02:52 AM

    Hi
    I have built my form and used the appointment slot widget.
    There are several problems -

    1 - I want to remove the green colour of the available text and the green tick - I can't seem to do this in the design editor.


    2 - It is also odd that I entered a certain number of appointment times and the system adds an additional one at the bottom - with no name - how do I remove this additional un-named option? I has done it in both instances.


    3 - Also is there any way I can make some changes to the STRIPE payment area - the type alignment is a bit confusing and I again I can't seem to change the active background colour in the design editor.


    Many thanks in advance

     

    https://www.jotform.com//?formID=60278536789876

     

    JotForm alignment name colour
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 29, 2016 at 10:00 AM

    To change the available text color, you can add use this CSS code:

    span.items-left {

        color: #000000;

    }

    Use this CSS code to change the color when checking an option:

    .checklist label.checkbox .after{

    background:none;

    }

     

    .checklist .checkbox.checked .after:before{

    content: '\2713';

        display: inline-block;

        color: orange;

        padding: 10px 10px 10px 10px;

        font-size: 1.5em;

    }

     

    .checklist li.hover label .after{

    background:none;

    }

     

    .checklist li.hover label .after:before{

    content: '\2713';

        display: inline-block;

        color: orange;

        padding: 10px 10px 10px 10px;

        font-size: 1.5em;

    }

    Replace the color property with the color that you want, it should be the same in both parts, I mean, both color properties should have the same color.

    Paste all the CSS code provided above in the custom CSS tab, in the widget.

    You can see my result here: https://form.jotform.com/60283528239964.

    Your other questions have been moved to these threads:

    http://www.jotform.com/answers/759440

    http://www.jotform.com/answers/759441

    We will assist you there.