Creating Tennis Court Booking Form with Payment

  • Profile Image
    Asked on October 01, 2022 at 05:03 AM


    I am trying to set up a tennis court booking form.

    However, while the form can integrate with my Google calendar, it does not prevent 2 people from booking the same time slot.

    Is it possible to let users:

    1. Let users choose a date that they want to play tennis
    2. Choose the preferred time slot
    3. Show a screen to remind them to make payment
    4. Next user is unable to book the same timeslot

    Thank you.

  • Profile Image
    Answered on October 01, 2022 at 07:58 AM

    Hello onefortpp,

    Thanks for reaching out to Jotform Support. You can use the Appointment Field to handle tennis court booking and use a Payment Gateway to collect payments. Let me show you how to set that up:

    • In the Form Builder, open the Form Elements panel by clicking the Add Form Element button on the top left corner.
    • Add the Appointment element to your form.
    • Click on the Gear icon on the right side of the Appointment to open Appointment Properties

    1664624361_633826e9e73ad_Screen Recordin

    • In the field settings Availability tab you can create the time slots as needed:


    • In the Advanced tab, make sure you select the One On One option to make sure that a time slot is disabled after it is already selected.

    1664620358_63381746d02ff_Screen Shot 202

    To use one of the Payment Gateways and collect payments with Jotform, please follow the steps and screencast below:

    • Open the Form Elements panel by clicking the Add Form Element button on the top left corner.
    • Go to the Payments tab.
    • Select one of the Payment Gateways.
    • Select User Defined Amount as the Payment Type.
    • Enable the Suggest an Amount option, enter a Suggested Amount, and enable the Set Suggested Amount as Minimum option.
    • Scroll down to the bottom and click the Save button.

    1664624928_6338292044a4f_Screen Shot 202

    To remind the user to make payment, I suggest that you make the payment field required:

    1664625268_63382a746e7cb_Screen Shot 202

    So that if the form is submitted with the payment field left empty, it will show an error message on the payment field:

    1664625306_63382a9a8f81e_Screen Shot 202

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