{"id":18763,"date":"2020-05-25T14:50:43","date_gmt":"2020-05-25T14:50:43","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=18763"},"modified":"2025-07-24T08:23:57","modified_gmt":"2025-07-24T08:23:57","slug":"how-to-set-appointment-booking-form","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/","title":{"rendered":"How to Set Appointment Booking Forms"},"content":{"rendered":"\n

Static Page Booking Form<\/h2>\n\n\n\n
\n

The Static Booking Form<\/strong> can be used on any page of the website since it does not have any dynamic information (it does not have a service or provider preset), so the user can select the needed service and its provider manually (if a provider is activated in the JetAppointment <\/em>settings).<\/p>\n\n\n\n

Go to the WordPress Dashboard > JetFormBuilder > Add New<\/em><\/strong> to create a new form.<\/p>\n\n\n\n

Initially, we delete default fields and add a <\/strong>Radio Field<\/strong><\/a> or Select Field<\/strong><\/a> to the form. In the FILL OPTIONS FROM<\/strong> field, we pick the \u201cPosts\u201d option. Then select the POST TYPE<\/strong> with the services. In our case, it is the \u201cServices\u201d post type.<\/p>\n\n\n\n

\"service<\/a><\/div>\n\n\n\n

Next, we add the Appointment Provider<\/strong> field to the form.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Only this field should be used for creating provider selection in the form, since this field is provided by the JetAppointment<\/i> plugin for the correct generation of providers according to the previously selected service.<\/p><\/div><\/div>\n\n\n\n

In the Field Settings <\/strong>section, pick the \u201cForm Field\u201d option in the GET SERVICE ID FROM<\/strong> field. In the SELECT SERVICE FIELD<\/strong>, we opt for the field in the form where the service is selected. In the given case, it is a \u201cSelect lesson\u201d field.<\/p>\n\n\n\n

\"provider<\/a><\/div>\n\n\n\n

Moving on, we add the Appointment Date<\/strong> field. This field provides a calendar for selecting a slot on a desired date. In this field, open the Field Settings<\/strong> tab once again.<\/p>\n\n\n\n

In the GET SERVICE ID FROM <\/strong>field, we pick the \u201cForm Field.\u201d<\/p>\n\n\n\n

In the SELECT SERVICE FIELD<\/strong>, we also choose the \u201cSelect lesson\u201d field.<\/p>\n\n\n\n

In the GET PROVIDER ID FROM <\/strong>field, we pick the \u201cForm Field\u201d as well, and in the SELECT PROVIDER FIELD<\/strong>, we opt for the \u201cSelect teacher\u201d field.<\/p>\n\n\n\n

Also, you can activate the Auto-Select Single Slot<\/strong> toggle. When enabled, if only one time slot is available in a day, it will be automatically added to the appointment list immediately when the day in the calendar is clicked.<\/p>\n\n\n\n

\"appointment<\/a><\/div>\n\n\n\n

After that, we add another set of fields starting with the email Text Field<\/strong><\/a>. In the FIELD TYPE<\/strong> setting, we picked the \u201cEmail\u201d option so that only an email address can be entered in this field.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The email field is mandatory in the booking form to ensure it can be submitted successfully.<\/p><\/div><\/div>\n\n\n\n

\"email<\/a><\/div>\n\n\n\n

Next, we add another Text Field<\/strong> of a \u201cTel\u201d FIELD TYPE <\/strong>to accept a telephone number. This field is optional.<\/p>\n\n\n\n

\"phone<\/a><\/div>\n\n\n\n

The last field in the form is another Text Field<\/strong> where users can enter their names.<\/p>\n\n\n\n

\"name<\/a><\/div>\n\n\n\n

Next, we add an Action Button<\/strong><\/a> <\/strong>to finalize the form with the \u201cSubmit<\/strong>\u201d button.<\/p>\n\n\n\n

\"submit<\/a><\/div>\n\n\n\n

Note that you can add any fields to the form according to your goal.<\/p>\n\n\n\n

After adding the fields, we can set the post-submit action in the form.<\/p>\n\n\n\n

Open the JetForm <\/strong>settings tab and go to the Post Submit Actions <\/strong>section. Here, press the \u201cNew Action<\/strong>\u201d button. In the opened pop-up, find and click the \u201cInsert appointment\u201d action to add it.<\/p>\n\n\n\n

\"insert<\/a><\/div>\n\n\n\n

Now, you should see a pop-up that provides the settings for this action.<\/p>\n\n\n\n

In the SERVICE ID FIELD<\/strong>, we picked the \u201cSelect lesson\u201d Radio <\/strong>Field<\/strong> with the posts of the \u201cServices\u201d post type.<\/p>\n\n\n\n

In the PROVIDER ID FIELD<\/strong>, we selected the Appointment Provider <\/strong>\u201cSelect teacher\u201d form field.<\/p>\n\n\n\n

In the APPOINTMENT DATE FIELD<\/strong>, we picked the Appointment Date<\/strong> field called \u201cSelect date.\u201d<\/p>\n\n\n\n

The USER E-MAIL FIELD<\/strong> has the \u201cYour email\u201d field mapped.<\/p>\n\n\n\n

The USER NAME FIELD<\/strong> is mapped to the \u201cYour name\u201d field.<\/p>\n\n\n\n

A custom column can be created in the JetAppointment <\/em>plugin settings if you need to save additional data that can not be added to the default fields.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

After mapping the fields, you can update the action and save the form.<\/p>\n<\/div><\/div>\n\n\n\n

Single Service Booking Form<\/strong><\/h2>\n\n\n\n
\n

Unlike the Static Page Booking Form<\/strong>, which can be placed on any website page, the Single Service Booking Form<\/strong> is meant to be published on the Services Single Page<\/strong><\/a>.<\/p>\n\n\n\n

This form requires slightly different settings than the Static Page Booking Form<\/strong>, so let us check how the form should be set up.<\/p>\n\n\n\n

Create a new form in the WordPress Dashboard > JetFormBuilder > Add New <\/em><\/strong>directory.<\/p>\n\n\n\n

Firstly, we should add a Hidden Field<\/strong><\/a> with the \u201cCurrent Post ID\u201d option as a FIELD VALUE<\/strong>. This Hidden Field<\/strong> will pull the ID of the current post, which is a service. The value of this field will be used in the Appointment Provider<\/strong> and Appointment Date<\/strong> fields to pull the data of providers and available slots accordingly.<\/p>\n\n\n\n

\"hidden<\/a><\/div>\n\n\n\n

Next, we add an Appointment Provider<\/strong> field. In the Field Settings <\/strong>tab, we set the \u201cForm Field\u201d <\/strong>option in the GET SERVICE ID FROM <\/strong>field and the \u201cservice_id\u201d one in the SELECT SERVICE FIELD<\/strong>.<\/p>\n\n\n\n

\"appointment<\/a><\/div>\n\n\n\n

Next, we can add the Appointment Date<\/strong> field, which has the following settings.<\/p>\n\n\n\n

In the GET SERVICE ID FROM<\/strong>, we pick the \u201cForm Field.\u201d<\/p>\n\n\n\n

In the SELECT SERVICE FIELD<\/strong>, we also choose the \u201cservice_id\u201d field.<\/p>\n\n\n\n

In the GET PROVIDER ID FROM <\/strong>field, we pick the \u201cForm Field\u201d as well, and in the SELECT PROVIDER FIELD<\/strong>, we opt for the \u201cSelect teacher\u201d field.<\/p>\n\n\n\n

Next, you can activate the Auto-Select Single Slot<\/strong> toggle. With this feature enabled, if only one time slot is available in a day, it will be automatically added to the appointment list immediately when the day in the calendar is clicked.<\/p>\n\n\n\n

\"appointment<\/a><\/div>\n\n\n\n

Note that you could select the \u201cCurrent Post ID\u201d as a source of the service ID in the Appointment Provider<\/strong> and Appointment Date<\/strong> form fields in this Single Service Booking Form<\/strong>, but since we created a Hidden Field<\/strong> with the needed value, we kept using it as a service ID source. It may be better to add a Hidden Field<\/strong> to pull the \u201cCurrent Post ID\u201d value, as this field can be used in other parts of the form (in the \u201cSend Email\u201d action, for example).<\/p>\n\n\n\n

\"current<\/a><\/div>\n\n\n\n

After these fields, we should also add the Text Fields,<\/strong> which collect the user data.<\/p>\n\n\n\n

The first Text Field<\/strong> is set to collect the user\u2019s email and has \u201cEmail\u201d set as a FIELD TYPE<\/strong>.<\/p>\n\n\n\n

\"email<\/a><\/div>\n\n\n\n

Another Text Field<\/strong> is used to enter the name of the user.<\/p>\n\n\n\n

\"name<\/a><\/div>\n\n\n\n

The last field we add to the form is an Action Button <\/strong>field with the \u201cSubmit\u201d text.<\/p>\n\n\n\n

\"submit<\/a><\/div>\n\n\n\n

Lastly, configure the \u201cInsert Appointment\u201d post-submit action by proceeding to the JetForm <\/strong>settings and opening the Post Submit Actions <\/strong>section. By clicking on the \u201cNew Action<\/strong>\u201d button, you can trigger a pop-up with the actions list. <\/p>\n\n\n\n

Find an \u201cInsert Appointment\u201d action and click on it to open its settings.<\/p>\n\n\n\n

Map the form fields to the fields of the JetAppointment <\/em>plugin so the values are filled in the plugin fields accordingly.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

Update the action and press the \u201cPublish<\/strong>\u201d button to save the changes.<\/p>\n<\/div><\/div>\n\n\n\n

Single Provider Booking Form<\/strong><\/h2>\n\n\n\n
\n

As for the Single Provider Booking Page<\/strong>, it should be placed on the Provider Single Page<\/strong><\/a>. This form is similar to the Single Service Booking Form<\/strong>.<\/p>\n\n\n\n

Build a new form by proceeding to WordPress Dashboard > JetFormBuilder > Add New<\/em><\/strong>.<\/p>\n\n\n\n

Add a Hidden Field <\/strong>with a \u201cCurrent Post ID\u201d FIELD VALUE<\/strong> <\/strong>selected.<\/p>\n\n\n\n

This field will pull the ID of the current provider post. The value of this field will be used in the Appointment Date<\/strong> field to pull the data of available slots accordingly.<\/p>\n\n\n\n

\"hidden<\/a><\/div>\n\n\n\n

Then, add a <\/strong>Radio Field<\/strong><\/a> or Select Field<\/strong><\/a> to the form.\u00a0<\/p>\n\n\n\n

In the FILL OPTIONS FROM<\/strong> field, we pick the \u201cPosts\u201d option and select the POST TYPE<\/strong> with the services. In our case, it is the \u201cServices\u201d post type.<\/p>\n\n\n\n

\"services<\/a><\/div>\n\n\n\n

Next, we can add the Appointment Date<\/strong> field, which has the following settings.<\/p>\n\n\n\n

In the GET SERVICE ID FROM <\/strong>field, we pick the \u201cForm Field.\u201d<\/p>\n\n\n\n

In the SELECT SERVICE FIELD<\/strong>, we also choose the \u201cSelect lesson\u201d field.<\/p>\n\n\n\n

In the GET PROVIDER ID FROM <\/strong>field, we pick the \u201cForm Field\u201d as well, and in the SELECT PROVIDER FIELD<\/strong>, we opt for the \u201cprovider_id\u201d field.<\/p>\n\n\n\n

You can also activate the Auto-Select Single Slot<\/strong> toggle, so if only one time slot is available in a day, it will be automatically added to the appointment list immediately when the day in the calendar is clicked.<\/p>\n\n\n\n

\"appointment<\/a><\/div>\n\n\n\n

After these fields, we should also add the Text Fields,<\/strong> which collect the user data.<\/p>\n\n\n\n

The first Text Field<\/strong> is set to collect the user\u2019s email and has \u201cEmail\u201d FIELD TYPE <\/strong>set.<\/p>\n\n\n\n

\"email<\/a><\/div>\n\n\n\n

Another Text Field<\/strong> is used to enter the name of the user.<\/p>\n\n\n\n

\"name<\/a><\/div>\n\n\n\n

To finish the form, we add an Action Button <\/strong>field with the \u201cSubmit\u201d text.<\/p>\n\n\n\n

\"submit<\/a><\/div>\n\n\n\n

Lastly, we should configure the \u201cInsert Appointment\u201d post-submit action by proceeding to the JetForm <\/strong>settings and opening the Post Submit Actions <\/strong>section. By clicking on the \u201cNew Action<\/strong>\u201d button, a pop-up with the action settings will be triggered.<\/p>\n\n\n\n

Map the form fields to the fields of the JetAppointment <\/em>plugin so the values are filled in the plugin fields accordingly. Update the action.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

Don\u2019t forget to \u201cPublish<\/strong>\u201d the form.<\/p>\n<\/div><\/div>\n\n\n\n

That\u2019s all about setting appointment booking forms with JetAppointment <\/em>and JetFormBuilder <\/em>plugins on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"

This tutorial covers creating multiple Appointment booking forms \u2014 a Static Page Booking Form, a Single Service Booking Form, and a Single Provider Booking Form.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[458],"yoast_head":"\nHow to Set Appointment Booking Forms \u2014 JetAppointment | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to set appointment booking forms on your WordPress website with the help of the JetAppointment and JetFormBuilder plugins.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set Appointment Booking Forms \u2014 JetAppointment | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to set appointment booking forms on your WordPress website with the help of the JetAppointment and JetFormBuilder plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-24T08:23:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/service-radio-field-in-the-static-page-booking-form-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/\",\"name\":\"How to Set Appointment Booking Forms \u2014 JetAppointment | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-05-25T14:50:43+00:00\",\"dateModified\":\"2025-07-24T08:23:57+00:00\",\"description\":\"Learn how to set appointment booking forms on your WordPress website with the help of the JetAppointment and JetFormBuilder plugins.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Set Appointment Booking Forms\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Set Appointment Booking Forms \u2014 JetAppointment | Crocoblock","description":"Learn how to set appointment booking forms on your WordPress website with the help of the JetAppointment and JetFormBuilder plugins.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Appointment Booking Forms \u2014 JetAppointment | Crocoblock","og_description":"Learn how to set appointment booking forms on your WordPress website with the help of the JetAppointment and JetFormBuilder plugins.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/","og_site_name":"Help Center","article_modified_time":"2025-07-24T08:23:57+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/07\/service-radio-field-in-the-static-page-booking-form-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/","name":"How to Set Appointment Booking Forms \u2014 JetAppointment | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-05-25T14:50:43+00:00","dateModified":"2025-07-24T08:23:57+00:00","description":"Learn how to set appointment booking forms on your WordPress website with the help of the JetAppointment and JetFormBuilder plugins.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Set Appointment Booking Forms"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/18763"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=18763"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=18763"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=18763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}