Help Center

Knowledge base Plugins JetAppointment How to Create Appointment Booking Forms

How to Create Appointment Booking Forms

Learn how to create appointment booking forms, manage their settings, and add to CPTs, posts, pages, and/or archive pages using JetPlugins.

Before you start check tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • WooCommerce plugin (Free version) installed and activated

  • JetEngine plugin installed and activated with Provider and Service CPTs created. If you have not done this yet, please follow this tutorial

  • JetFormBuilder plugin installed and activated

  • JetAppointment plugin installed and activated

The JetFormBuilder plugin creates forms with 18+ standard field blocks and arranges them in multi-column layouts. If the JetAppointment plugin is activated, the JetFormBuilder plugin adds special appointment blocks with different post-submit actions. With the JetEngine plugin, the JetFormBuilder plugin builds various appointment systems.

Creating Forms

Navigate to WP Dashboard > JetFormBuilder > Add New to create a new form.

jetformbuilder settings

The JetFormBuilder plugin creates forms in the Gutenberg editor by default. 

default jetformbuilder form

Type the form name (here, Appointment Form) and select the Current Post Id option from the Field value drop-down menu.

form title added

Press the “+” button, unroll the menu with blocks and patterns, and drag-n-drop the necessary fields (here, text field blocks to add the user’s data).

jetformbuilder blocks and patterns

The JetFormBuilder: Fields and Buttons Full Guide tutorial details the JetFormBuilder block settings and how to manage them.

Creating an Appointment Booking Form

The Appointment Date and Appointment Provider blocks are the blocks associated with the JetAppointment plugin; therefore, they allow the creation of two types of appointments:

  •  single services only (is the main appointment system);
  •  single services and their providers.

Creating single service appointment form

Find the Appointment Date block and drop it into the form.

appointment date block added

This block has the standard JetFormBuilder block settings (General settings: Label, Name, Description, Default Value, and Advanced settings: Add Prev. Page Button toggle, Field Visibility, CSS class name) and settings referring to the JetAppointment plugin settings: Get Service ID from and Get Provider ID From drop-down menus. These menus allow the selection of Current Post ID, Form Field, or Manual Input.

appointment date block settings

If you do not need to divide service and provider (for example, you have only one service or provider for the entire site or one doctor provides one type of service) leave the default settings for these drop-down menus.

Creating a service-provider appointment form

Find the Appointment Provider block and drop it into the form. This block is available for related CPTs; for example, users can specify the service provider and the services linked to that provider.

Navigate to the Appointment Provider settings, unroll the Field Settings, and select the Current Post ID option from the Get Service ID drop-down menu.

appointment provider block settings

Appointment Settings 

The form has the Action button added by default with the Submit default text. Navigate to the settings of the Action button block and type the necessary text (here, Make an Appointment).

Select the Submit Form option from the Field Setting drop-down menu.

appointment setting customization

WooCommerce integration

Apply the post-submit actions for the form. Select the Make an appointment option from the drop-down menu and press the pencil icon to edit this action.

make an appointment option settings

If the JetAppointment > Settings > General > WooCommerce integration toggle is enabled, the Make an Appointment option pop-up displays the settings integrated with WooCommerce.

The tutorial explains How to enable JetAppointment and WooCommerce integration.

Adding Post Submit actions

Add another post-submit action if necessary by pressing the “+New Action” button (here, Send Email to confirm the appointment).

post submit action settings

Adding the appointment form data to CPTs

The JetAppointment plugin collects appointment data to manage appointments via its dashboard.

The tutorial explains How to Collect and Manage Appointment Data via JetAppointment Dashboard.

Users can specify CPTs to collect the submitted appointment data by selecting the Insert/Update Post option from the Post Submit Actions tab.

adding the booking form data to cpts

Choose the necessary CPT from the drop-down menu and other options to specify meta-fields to save the appointment data. 

Press the “Update” button to save changes.

Press the “Publish” button to publish the form.

Appointment Appearance

If the JetAppointment plugin is enabled, users can set different time schedules: Slots, Time Picker, and Recurring. The JetFormBuilder plugin, in its turn, will take into account these settings and display the Appointment Date block according to the JetAppointment plugin settings.

The tutorial Appointment Schedule Types Overview explains how to set the schedule types.

Adding the Form to a Page

The form can be added to a post/page, CPT (if the JetEngine plugin is enabled), and/or archive page (if the JetThemeCore plugin is enabled). Here the form is added to a single page. The form is available in Elementor and Gutenberg.

The tutorial explains How to Insert the Form into the Page.

Find the JetForm widget and drag-n-drop it where needed.

jetformbuilder widget for elementor

Select the built form from the Choose Form drop-down menu.

The built single page with the form added looks as follows.

jetformbuilder widget for the single services page

The built single page with the single services and their providers’ form looks as follows.

jetformbuilder for the single services-providers page

The image below shows the front-end view of the form with the single services only.

front-end view of the single services page

The image below shows the front-end view of the added single services-providers form.

front-end view of the single services page

That’s all about how to create appointment booking forms.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.