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

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

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

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).

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

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.

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.

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.

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.

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.

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).

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.

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.

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.

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

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

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

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

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