-
Ross WatsonAsked on April 16, 2025 at 8:12 PM
how do i change the colour of the time selections in the appointments element?
-
Raymond JotForm SupportReplied on April 17, 2025 at 1:04 AM
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.
-
a1electrical1Replied on April 17, 2025 at 2:57 PM
Thanks...... if you look on landing page form the appointments are at the bottom. You might need to fill in the fields first
-
Jonathan JotForm SupportReplied on April 17, 2025 at 5:24 PM
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.
Your Answer
Something Went Wrong
An error occurred while generating the AI response. Please try again!