How to customize the appointment field with CSS?

how do i change the colour of the time selections in the appointments element?

Hi Ross,

Thanks for reaching out to Jotform Support. We can change the colors of the appointment field using CSS codes. So that we can generate the code for you, can you share with us the link to your form where you've added your appointment field, and let us know your preferred color? I've checked your forms but couldn't see any appointment fields in it. Once the code is generated and shared, then you'll be able to customize its colors as needed.

Once we hear back from you, we'll be able to help you with this.

Thanks...... if you look on landing page form the appointments are at the bottom. You might need to fill in the fields first

Hi Ross,

You can change the color of time selections in the appointment element by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/* Change colour of the time selections in the appointments element ticket#26261581 */

.form-appointment .form-appointment-time,

.appointmentSlot {

    color: #f0f0f0 !important;

    border: 1px solid #ccc !important;

    border-radius: 4px !important;

    padding: 5px !important;

    font-size: 14px !important;

}



.form-appointment .form-appointment-time:hover.appointmentSlot {

    border-color: #bbb !important;

}



.form-appointment .form-appointment-time:focus,

.appointmentSlot:focus {

    border-color: #888 !important;

    outline: none !important;

}



.form-appointment .form-appointment-time:disabled,

.appointmentSlot:disabled {

    background-color: #f0f0f0 !important;

    color: #999 !important;

    cursor: not-allowed !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

If you want to change the color to your preference, look for the code like below and change the value for color: property.

color: #f0f0f0 !important;

You can check out the results on my test form here. Give it a try and let us know if you need any more help.

Thanks Jonathan, excellent customer service as always!!!!!

Hi Ross,

To avoid confusion, I moved your other question to a new thread and helped you with that here.

Reach out again if you have any more questions.