Appointment widget - Slots instead of Time

5kamalini5
Asked on January 07, 2021 at 10:41 AM

Hi there,
On the Element 'Appointment', instead of giving the user the possibility of choosing a time, I would like to give them the possibility of choosing a slot. We'd have 6 slots available per day, and only Mondays would be available, so 6 slots per Monday. This means that they would pick a Monday and choose from slot 1 to slot 6. Would that be possible?
Thank you!
Kind regards,
Carla

This is a re-post of a comment on How to Inject Custom CSS Codes
Alexander

Jotform Support

Answered on January 07, 2021 at 12:55 PM

Hello, Carla!
I have cloned and tested your form and appointment widget.
I hide time values from the buttons and now it looks like "Available Slot" Button

Please, enter the following CSS code:
.appointmentSlot {
text-indent: -9999px;
line-height: 0;
}
.appointmentSlot:after {
content: "Available Slot" !important;
text-indent: 0;
display: block;
line-height: initial;
}

.appointmentFieldRow.forSelectedDate span {
display: none !important;
}

You can change the name of the button, just find this string and change what I marked with yellow:
content: "Available Slot" !important;

However, Slots still related to a time, but it's hidden.
Hope, this works for you.

Have a good day!
Alex
Alexander

Jotform Support

Answered on January 07, 2021 at 01:14 PM

UPDATE:
I am sorry, forgot to attach DEMO form for you:
https://jotform.com/build/210064682433955

Kindly, check if it suits your needs.

Cheers,
Alex