HelloI would like to use the appointment widget to create a reservation

  • Profile Image
    Asked on May 25, 2021 at 11:15 PM


    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

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

  • Profile Image
    Answered on May 26, 2021 at 06:32 AM

    Do you mean to say that you want to add appointment field in form but list the time slot for every 30 minutes for 2 hours duration?

    Please note that you do not need any custom CSS code to achieve this. You can directly add the intervals for the desired duration in the appointment field. Please check the screenshot below:


    Please take a look at the following demo form and see if it displays the time slots correctly: https://form.jotform.com/211452540044039

    Feel free to clone this form for a closer look. The following guide should help you in form cloning: https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

    Hope this helps.

    Do get back to us if you meant to ask something else.

  • Profile Image
    Answered on May 26, 2021 at 08:56 AM

    Ahhh. Got it. Thx. This could be a direct solution to the problem I have.

    But still en beside this. Can you tell/show me how to change the CSS code of this specific widget. (appointment widget as in my previous sent image. All the tutorials I found on changing css are style related on a total form level. So that did not work for me. Hope you can help me out on this issue as well.


  • Profile Image
    Answered on May 26, 2021 at 10:26 AM

    The Appointment field is a basic form field, not a widget. You can style it with CSS in Form Designer.

    Related Guide: How to Inject Custom CSS Codes

    Also, please check a reply my colleague provided on your other thread: https://www.jotform.com/answers/3120014