Appointment Widget Time Slot Modification

Hello,

I'm looking to modify the text in the appointment slots. I have the the actual appointment slot duration set to "120 minutes" because each appointment window is 2 hours. While this works, its not exactly what I'm looking for. I have appointments from 10AM to 6PM but I would like them to read "10AM to 12PM", "12PM to 2PM"..... "6PM to 8PM".

I found this in another thread and its exactly what I'm looking to do but it changes all the slots to the same text. Is there any way to adjust each slot separately?

.appointmentSlot.slot{

  font-size: 0px;

}

.appointmentSlot.slot:before {

  content: "10:00 AM to 4:00 PM";

  font-size: 16px;

}

.appointmentSlot.slot {

  width: auto;

  padding: 10px;

} 

Hi PrimeWireless,

Thanks for reaching out to Jotform Support. I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

In the meantime, let us know if you have any other questions.

Hi PrimeWireless,

Thanks for patiently waiting. This is possible, but you will have to remove these codes in your current custom CSS code:

.appointmentSlot.slot:before {

content : "10:00 AM to 12:00 PM";

font-size : 16px;

}

Then, inject the following CSS codes below:

.appointmentSlot.slot:before {

font-size: 16px;

}

.appointmentSlot.slot[data-value$=" 10:00 AM"]:before {

content: "10:00 AM to 12:00 PM";

}

.appointmentSlot.slot[data-value$=" 12:00 PM"]:before {

content: "12:00 PM to 2:00 PM";

}

.appointmentSlot.slot[data-value$=" 2:00 PM"]:before {

content: "2:00 PM to 4:00 PM";

}

.appointmentSlot.slot[data-value$=" 4:00 PM"]:before {

content: "4:00 PM to 6:00 PM";

}

.appointmentSlot.slot[data-value$=" 6:00 PM"]:before {

content: "6:00 AM to 8:00 PM";

}

Let me walk you through it:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. In the Form Designer menu, click on the Styles tab, scroll down to Inject Custom CSS and replace the code.

By the way, keep in mind that this will not change the value in the submitted data. You can also check my demo form here. Feel free to clone it to further test it. We have a guide that you can check out on how to clone an existing form from a URL.

Give it a try and let us know if you need more help.

Works perfect! Thank you for your help Neil.