{"id":18685,"date":"2024-09-25T11:12:45","date_gmt":"2024-09-25T11:12:45","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=18685"},"modified":"2024-09-25T11:12:47","modified_gmt":"2024-09-25T11:12:47","slug":"how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/","title":{"rendered":"How to Set Custom Item Templates for Providers and Services Fields for Appointment Form"},"content":{"rendered":"\n<p>Combining the <em>JetAppointment<\/em> and <em>JetEngine<\/em> plugins, you can build a custom item template with the <strong>Check mark<\/strong> block\/widget\/element and then set it for the \u201cService\u201d and \u201cProvider\u201d fields of the checkbox and radio types in the appointment booking forms.<\/p>\n\n\n\n<p>Before you start, ensure to complete the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/jetappointment-full-overview-and-wizard-setup\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetAppointment setup<\/strong><\/a>. During this process, you can create <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-create-appointment-booking-forms\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>appointment forms<\/strong><\/a> via <em>JetFormBuilder <\/em>in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/jetappointment-full-overview-and-wizard-setup\/#additional-settings\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Additional Settings<\/strong><\/a><strong> <\/strong>tab.<\/p>\n\n\n\n<p>The appointment forms can be placed on the Static pages and <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-create-single-service-and-provider-pages\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Single Provider and Service templates<\/strong><\/a>.<\/p>\n\n\n\n<p>You can create custom item templates for the \u201cServices\u201d and \u201cProviders\u201d <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-post-type-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Types (CPTs)<\/strong><\/a> and attach them to the form fields in such ways:<\/p>\n\n\n\n<ul>\n<li>For the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#static-page-booking-form\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Static Page Booking Form<\/strong><\/a>, you can add templates to the \u201cService\u201d and \u201cProvider\u201d fields;<\/li>\n\n\n\n<li>For the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#single-service-booking-form\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Single Service Booking Form<\/strong><\/a>, you can add a template to the \u201cProvider\u201d field;<\/li>\n\n\n\n<li>For the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-appointment-booking-form\/#single-provider-booking-form\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Single Provider Booking Form<\/strong><\/a>, you can add a template to the \u201cService\u201d field.<\/li>\n<\/ul>\n\n\n\n<p>In this tutorial, we will create a custom item template with the <strong>Check mark<\/strong> widget for the \u201cService\u201d field in the Single Provider (Teams) Booking Form. The form will be placed on the Single Provider page template.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-a-custom-item-template\">Creating a Custom Item Template<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Go to <strong><em>WordPress Dashboard &gt; JetEngine &gt; Listings\/Components <\/em><\/strong>and press the \u201c<strong>Add New Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n<p>In the <strong>Setup Listing Item<\/strong> pop-up, pick the \u201cPosts\u201d option as the <strong>Listing source<\/strong>, set the required post type in the <strong>From post type<\/strong> field (\u201cServices\u201d in our case), enter the <strong>Listing item name<\/strong>, and choose the <strong>Listing view<\/strong> (for this case we choose \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-listing-template-for-post-types\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>,\u201d but it can also be \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-listing-items-with-bricks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bricks<\/a>\u201d or \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocks (Gutenberg<\/a>)\u201d).<\/p>\n\n\n\n<p>Afterward, click the \u201c<strong>Create Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services.webp\" alt=\"listing item template for services\" class=\"wp-image-45731\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"customizing-the-check-mark-widgetblockelement\">Customizing the Check Mark widget\/block\/element<\/h3>\n\n\n\n<p>On the editor page, select the desired layout for your new section; for example, add three columns.<\/p>\n\n\n\n<p>For this case, two widgets\/blocks\/elements are available:<\/p>\n\n\n\n<ul>\n<li><strong>Check mark <\/strong>\u2014 when the <em>JetEngine <\/em>and <em>JetFormbuilder <\/em>plugins are installed and activated;<\/li>\n\n\n\n<li><strong>Check Mark <\/strong>\u2014 when the <em>JetEngine <\/em>plugin is installed and activated, and the <strong>Forms (Legacy) <\/strong>module is turned on in the <strong><em>WordPress Dashboard &gt; JetEngine &gt; Modules &gt; Default Modules <\/em><\/strong>tab.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets.webp\" alt=\"check mark widgets\" class=\"wp-image-45716\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-widgets-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>The <strong>Check mark<\/strong> widget has two <strong>C<\/strong><strong>ontrol Type<\/strong><strong> <\/strong>options:<\/p>\n\n\n\n<ul>\n<li><strong>HTML input <\/strong>\u2014 keep this option to maintain the default appearance for both the checked and unchecked states;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget.webp\" alt=\"HTML input control type for the check mark widget\" class=\"wp-image-45727\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/html-input-control-type-for-the-check-mark-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Image<\/strong> \u2014 this option activates the <strong>Control Default <\/strong>and <strong>Control Checked <\/strong>tabs.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget.webp\" alt=\"\" class=\"wp-image-45722\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-and-checked-icons-for-the-check-mark-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Unfold the tabs to set the custom <strong>Default icon <\/strong>and <strong>Checked icon<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget.webp\" alt=\"custom default and checked icons for the check mark widget\" class=\"wp-image-45718\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-default-and-checked-icons-for-the-check-mark-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>In the widget\u2019s <strong>Style<\/strong> settings, you can alter the image\u2019s <strong>Width<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget.webp\" alt=\"image width for the check mark widget\" class=\"wp-image-45728\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/image-width-for-the-check-mark-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Check Mark<\/strong> widget settings, you can choose the icon either from the library or upload an SVG file for:&nbsp;<\/p>\n\n\n\n<ul>\n<li><strong>Default Icon<\/strong> mode;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget.webp\" alt=\"default icon for the check mark widget\" class=\"wp-image-45723\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/default-icon-for-the-check-mark-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Checked Icon <\/strong>mode.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget.webp\" alt=\"checked icon for the check mark widget\" class=\"wp-image-45717\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/checked-icon-for-the-check-mark-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">Make sure to select icons for both unchecked and checked modes for the <strong>Check Mark<\/strong> widget.<\/p><\/div><\/div>\n\n\n\n<p>Then, you can proceed to the <strong>Style <\/strong>tab from the left-side toolbar and customize the icons\u2019 appearance.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings.webp\" alt=\"check mark style settings\" class=\"wp-image-45715\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/check-mark-style-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configuring-the-dynamic-fields\">Configuring the Dynamic Fields<\/h3>\n\n\n\n<p>Now, you can use the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/dynamic-widgets-and-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Widgets<\/strong><\/a>, e.g., the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-field-widget-overview-how-to-use-filter-field-output\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Field<\/strong><\/a> for the second and third columns, to pull the metadata for the service posts.<\/p>\n\n\n\n<p>For the first <strong>Dynamic Field<\/strong>, we keep the \u201cPost\/Term\/User\/Object Data\u201d <strong>Source <\/strong>and \u201cTitle\u201d <strong>Object Field<\/strong>.<\/p>\n\n\n\n<p>For the second, we choose the \u201cMeta Data\u201d <strong>Source<\/strong>, keep the <strong>Meta Field <\/strong>option unselected, and enter the \u201c_app_price\u201d in the <strong>Object field \/ Meta field \/ Repeater key \/ Component prop <\/strong>field.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price.webp\" alt=\"meta field to display the appointment price\" class=\"wp-image-45732\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/meta-field-to-display-the-appointment-price-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>To customize the displayed value, we enable the <strong>Filter field output<\/strong> toggle and select the \u201cFormat number\u201d <strong>Callback<\/strong>. Other settings we keep by default: the \u201c.\u201d <strong>Decimal point <\/strong>and \u201c2\u201d <strong>Decimal points<\/strong>.<\/p>\n\n\n\n<p>Then, we enable the <strong>Customize field output <\/strong>toggle and enter the \u201c$%s\u201d into the <strong>Field format<\/strong>, where \u201c$\u201d is the currency and \u201c%s\u201d stands for the pulled value.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget.webp\" alt=\"customizing the appointment price with dynamic field widget\" class=\"wp-image-45721\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/customizing-the-appointment-price-with-dynamic-field-widget-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>After adjusting the content settings, you can alter the template appearance. For example, we unroll the <strong><em>Style > Background > Hover<\/em><\/strong> tab of the <strong>Section <\/strong>and set the <strong>Color<\/strong>. After that, when you hover over the option in the form, it will change the background color.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings.webp\" alt=\"custom item template style settings\" class=\"wp-image-45720\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-style-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Once you are satisfied with your custom listing item template, click the \u201c<strong>Publish\/Update<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-the-template-for-the-services-field\">Setting the Template for the Services Field<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"choosing-and-editing-the-form\">Choosing and editing the form<\/h3>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard > JetFormBuilder<\/em><\/strong>, hover over the form you want to customize, and hit the \u201c<strong>Edit<\/strong>\u201d link. In our case, we edit the \u201cSingle Teams Booking Form\u201d that is placed on the Single Provider page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder.webp\" alt=\"single provider booking form in jetformbuilder\" class=\"wp-image-45734\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/single-provider-booking-form-in-jetformbuilder-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configuring-the-service-field-settings\">Configuring the \u201cService\u201d field settings<\/h3>\n\n\n\n<p>On the form editing page, open the \u201cService\u201d form field settings.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The custom item templates can only be applied to the \u201cProviders\u201d and \u201cServices\u201d fields of either \u201cRadio\u201d or \u201cCheckboxes\u201d field types.<\/p><\/div><\/div>\n\n\n\n<p>Enable the <strong>Use custom template <\/strong>toggle, and the <strong>CHOOSE CUSTOM TEMPLATE<\/strong>drop-down will appear. Select the just-built <strong>Listing template <\/strong>here.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field.webp\" alt=\"use custom template for the service field\" class=\"wp-image-45735\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/use-custom-template-for-the-service-field-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>The form fields can be edited with the <a href=\"https:\/\/crocoblock.com\/plugins\/jetstylemanager\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetStyleManager<\/em><\/a><em> <\/em>plugin. For example, for the <strong>Appointment Date <\/strong>block, we hit the \u201c<strong>pencil<\/strong>\u201d icon, open the <strong>Calendar <\/strong>tab, and set the <strong>CALENDAR WIDTH <\/strong>to \u201c100\u201d %.<\/p>\n\n\n\n<p>After finishing customizing, hit the \u201c<strong>Save<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings.webp\" alt=\"appointment date block style settings\" class=\"wp-image-45714\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/appointment-date-block-style-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"placing-the-form-on-the-single-page\">Placing the form on the Single page<\/h3>\n\n\n\n<p>If you haven\u2019t placed the form yet, proceed to the Static page or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-create-single-service-and-provider-pages\/\" target=\"_blank\" rel=\"noreferrer noopener\">Single Provider or Service template<\/a>, depending on the form. For example, we opened the Single Provider template in the Elementor editor.<\/p>\n\n\n\n<p>Find the <a href=\"https:\/\/jetformbuilder.com\/features\/jetform-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetForm<\/strong><\/a> widget\/block\/element in the search bar and drag and drop it to the page.<\/p>\n\n\n\n<p>Select the created form in the <strong>Choose Form<\/strong> drop-down list.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page.webp\" alt=\"jetformbuilder form on the single provider page\" class=\"wp-image-45730\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetformbuilder-form-on-the-single-provider-page-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>For an in-depth understanding of the <strong>JetForm<\/strong> settings, read the <a href=\"https:\/\/jetformbuilder.com\/features\/adding-the-form-block\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Displaying a JetFormBuilder Form in Any Page Builder<\/strong><\/a> tutorial.<\/p>\n\n\n\n<p>Once the page customization is completed, click the \u201c<strong>Publish\/Update<\/strong>\u201d button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"proceeding-to-the-front-end\">Proceeding to the front end<\/h3>\n\n\n\n<p>Now, you can proceed to the front end to check if the <strong>Check mark<\/strong> widget works correctly by ticking one or several options.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end.webp\" alt=\"form with check mark template on the front end\" class=\"wp-image-45726\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-template-on-the-front-end-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-the-template-for-the-services-field-legacy\">Setting the Template for the Services Field (Legacy)<\/h2>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The JetEngine forms are the legacy feature. We recommend creating the appointment booking forms with the JetFormBuilder plugin.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"choose-and-edit-the-form\">Choose and edit the form<\/h3>\n\n\n\n<p>Go to <strong><em>WordPress Dashboard > JetEngine > Forms<\/em><\/strong>, hover over the form you want to customize, and hit the \u201c<strong>Edit<\/strong>\u201d link. In our case, we edit the \u201cSingle Teams Booking Form\u201d that is placed on the Single Provider page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form.webp\" alt=\"editing the single provider booking form\" class=\"wp-image-45724\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/editing-the-single-provider-booking-form-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"configure-the-service-field-settings\">Configure the \u201cService\u201d field settings<\/h3>\n\n\n\n<p>Hit the \u201c<strong>pencil<\/strong>\u201d icon near the \u201cService\u201d form field to alter its settings.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings.webp\" alt=\"service radio field settings\" class=\"wp-image-45733\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/service-radio-field-settings-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The custom item templates can only be applied to the \u201cProviders\u201d and \u201cServices\u201d fields of either \u201cRadio\u201d or \u201cCheckboxes\u201d field types.<\/p><\/div><\/div>\n\n\n\n<p>Scroll down to the <strong>Custom item template<\/strong> field, tick it, and the new drop-down field will appear. Make sure to pick here the template you\u2019ve created beforehand.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field.webp\" alt=\"custom item template for the service field\" class=\"wp-image-45719\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/custom-item-template-for-the-service-field-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Press the \u201c<strong>Apply Changes<\/strong>\u201d button and then \u201c<strong>Update<\/strong>\u201d the form.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"place-the-form-on-the-single-page\">Place the form on the Single page<\/h3>\n\n\n\n<p>If you haven\u2019t placed the form yet, proceed to the static page or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-create-single-service-and-provider-pages\/\" target=\"_blank\" rel=\"noreferrer noopener\">Single Provider or Service template<\/a>, depending on the form. For example, we opened the Single Provider template in the Elementor editor.<\/p>\n\n\n\n<p>Find the <strong>Form<\/strong> widget in the search bar and drag and drop it to the page.<\/p>\n\n\n\n<p>Select the \u201cJetEngine\u201d option from the <strong>Choose Provider <\/strong>drop-down and set the needed form in the <strong>Select form <\/strong>drop-down.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page.webp\" alt=\"jetengine form on the single provider page\" class=\"wp-image-45729\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/jetengine-form-on-the-single-provider-page-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Once the page customization is completed, click the \u201c<strong>Publish\/Update<\/strong>\u201d button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"proceed-to-the-front-end\">Proceed to the front end<\/h3>\n\n\n\n<p>Now, you can proceed to the front end to check if the <strong>Check Mark<\/strong> widget works correctly by ticking one or several options.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end.webp\" alt=\" form with check mark on the front end\" class=\"wp-image-45725\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/form-with-check-mark-on-the-front-end-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all. Now you know how to create custom item templates for Providers\/Services fields to customize the looks of the <em>JetFormBuilder <\/em>and <em>JetEngine <\/em>appointment booking forms on your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create custom item templates for Providers\/Services fields to customize the looks of the JetFormBuilder and JetEngine appointment booking forms.<\/p>\n","protected":false},"author":8,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[458],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Set Custom Item Templates for Appointment Form Provider Fields | Crocoblock<\/title>\n<meta name=\"description\" content=\"Customize the looks of the JetFormBuilder and JetEngine appointment booking forms. Follow this guide to create custom item templates for Providers\/Services fields and apply them on your WordPress website.\" \/>\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-custom-item-templates-for-providers-and-services-fields-for-appointment-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 Custom Item Templates for Appointment Form Provider Fields | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Customize the looks of the JetFormBuilder and JetEngine appointment booking forms. Follow this guide to create custom item templates for Providers\/Services fields and apply them on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-25T11:12:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services.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=\"10 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-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/\",\"name\":\"How to Set Custom Item Templates for Appointment Form Provider Fields | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-09-25T11:12:45+00:00\",\"dateModified\":\"2024-09-25T11:12:47+00:00\",\"description\":\"Customize the looks of the JetFormBuilder and JetEngine appointment booking forms. Follow this guide to create custom item templates for Providers\/Services fields and apply them on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-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 Custom Item Templates for Providers and Services Fields for Appointment Form\"}]},{\"@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 Custom Item Templates for Appointment Form Provider Fields | Crocoblock","description":"Customize the looks of the JetFormBuilder and JetEngine appointment booking forms. Follow this guide to create custom item templates for Providers\/Services fields and apply them on your WordPress website.","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-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/","og_locale":"en_US","og_type":"article","og_title":"How to Set Custom Item Templates for Appointment Form Provider Fields | Crocoblock","og_description":"Customize the looks of the JetFormBuilder and JetEngine appointment booking forms. Follow this guide to create custom item templates for Providers\/Services fields and apply them on your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/","og_site_name":"Help Center","article_modified_time":"2024-09-25T11:12:47+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2020\/04\/listing-item-template-for-services.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/","name":"How to Set Custom Item Templates for Appointment Form Provider Fields | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-09-25T11:12:45+00:00","dateModified":"2024-09-25T11:12:47+00:00","description":"Customize the looks of the JetFormBuilder and JetEngine appointment booking forms. Follow this guide to create custom item templates for Providers\/Services fields and apply them on your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-form\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetappointment\/how-to-set-custom-item-templates-for-providers-and-services-fields-for-appointment-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 Custom Item Templates for Providers and Services Fields for Appointment Form"}]},{"@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\/18685"}],"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\/8"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=18685"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=18685"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=18685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}