Creating Tennis Court Booking Form with Payment

  • onefortpp
    Asked on October 1, 2022 at 5:03 AM

    Hi,

    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.

  • Ade_T
    Replied on October 1, 2022 at 7: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 Screenshot 10

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

    1654752520 62a18508e9208  Screenshot 21

    • 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 Screenshot 32

    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 Screenshot 43

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

    1664625268 63382a746e7cb Screen Shot 202 Screenshot 54

    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 Screenshot 65

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