Appointment widget - Slots instead of Time

  • Profile Image
    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

  • Profile Image
    Alexander_G
    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

  • Profile Image
    Alexander_G
    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