Change css code in appointment widget

Hello

I would like to use the appointment widget to create a reservation form for reservations for a restaurant.

I would like subscribers to have a choice to chose every 30minutes their time of arrival, but the duration is 2 hours.

I would like to leave out (f.e. through CSS coding) the duration. Then I can set the (virtual) duration at 30 minutes. I can maximize the total of reservations on every time swat, but when I confirm the reservation by mail (after approval - fantastic tool!- I just want to communicate the time of arrival (and nog the duration of the reservation). Through the current short css tutorials I found, they do not explain enough to me how to fix this specific issue. Looking forward to your always fantastic advice. ;-) Luc

Hi,

Using the appointment field, you can set the duration to 30 minutes.

Or do you want a 120-minute duration (2 hours)? Please share more information on what you want to create so we can assist you better. Thank you!

Thanx for your reply and commitment. I want clients to have a choice to make/plan their reservation every 30 minutes, so presented times in the form show a 30 minute window. But it is a restaurant that takes the reservations, so they can have multiple reservations at the same time. Now once clients are in the restaurant, they can stay for 2 hours. So I want to separate the presented time windows in the form (= 30 minutes, from the duration. The most simple way to do this is to set the duration to 30 minutes, as you suggest. AND do not mention the duration in any confirmation in notification (to administrator) or in any confirmation (auto respons) to the subscriber. Now... the simple way to do this (as a work around) is to hide in all notifications and all confirmations, the DURATION. Now my question is, can I through changes in the CSS code in the Reservation widget, change/hide the duration. Please wacth the image in attachement.

Greetings,

If I understood correctly, you'd like to hide the time zone and the time slots? We can give you the CSS to hide them but the appointment field is considered filled when a time slot is selected.

Here is the CSS code that you can use to hide them.

.appointmentSlot {

      display: none;

}

.jDropdownWG-dropdown-toggler {

      display: none;

}

I would suggest that you try the Gift Registry widget instead. This will allow you to select more than one slot at a time.

https://www.jotform.com/widgets/gift-registry

Should you have any questions then please let us know.

Thanks

Yes, the CSS code, that is what I am looking for. To hide f.e. duration. Could you please show me like in a quick Loom where and how to put or edit this code according to the code you gave me above. Been looking/searching for a while now through all the css turorials for JotForm, but I seem not to get the hang of it. For sure it is a small thing that I just need to see once.... Hope you can show me. ;-). Thx for your input. Luc

Hi,

To add the code to the form, please follow this guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

Is that what you're looking for? If not, please let us know. Thank you!