{"id":7294,"date":"2019-03-01T13:15:24","date_gmt":"2019-03-01T13:15:24","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=7294"},"modified":"2026-02-12T11:44:28","modified_gmt":"2026-02-12T11:44:28","slug":"how-to-create-a-booking-form-layout","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/","title":{"rendered":"How to Create a Form (Legacy)"},"content":{"rendered":"\n<p>With the <em>JetEngine <\/em>plugin, creating a form is simple and easy. You can start your own basic form template and add this form template to your website, customize it, and have guests order your services online. So let\u2019s dive into the process of creating a layout for the form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"enabling-the-forms-functionality\">Enabling the Forms Functionality<\/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>Log in to the WordPress Dashboard and go to the<strong><em> JetEngine &gt; JetEngine Dashboard<\/em><\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/forms-enable-2x.png\" alt=\"enabling forms functionality\">\n\n\n\n<p>In the <strong>Modules<\/strong> tab, enable the <strong>Forms<\/strong> toggle. Click the &#8220;<strong>Save<\/strong>&#8221; button in order to save progress.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"creating-form-layout\">Creating Form Layout<\/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=\"wordpress-settings\">WordPress settings<\/h3>\n\n\n\n<p>Proceed to the <em><strong>JetEngine &gt; Forms<\/strong><\/em> tab and click the &#8220;<strong>Add New&#8221;<\/strong> button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/forms-table-2x.png\" alt=\"forms table\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"form-fields\">Form fields<\/h3>\n\n\n\n<p>Come up with the title for your form and start adding fields to set the area that should be filled out by your customers.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/form-fields-2x.png\" alt=\"adding form fields\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"types-of-the-fields\">Types of the fields<\/h3>\n\n\n\n<p>There are specific field types you can add, let\u2019s figure out some of them:<\/p>\n\n\n\n<ul>\n<li><strong>Text<\/strong> \u2014 Name, Surname, etc.<\/li>\n\n\n\n<li><strong>Textarea<\/strong> \u2014 for users to add some comments within the form.<\/li>\n\n\n\n<li><strong>Select<\/strong> \u2014 Checkbox \u2014 Radio \u2014 to add the choosing option.<\/li>\n\n\n\n<li><strong>Number<\/strong> \u2014 for example, the number of people.<\/li>\n\n\n\n<li><strong>Date\/Time<\/strong>.<\/li>\n\n\n\n<li><strong>Media<\/strong> \u2014 to let the users add some documents, pictures, etc.<\/li>\n<\/ul>\n\n\n\n<p>Learn more about the types from our <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-forms-field-types-overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">Forms field types overview<\/a>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/field-types-2x.png\" alt=\"form field types\">\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters 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=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Please, remember that when creating a form field and typing its name in the \"Name\" area, you can use only lowercase, numbers, and underscore. No capital letters, spaces, and other symbols are allowed.<\/p><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"page-break-and-preset-forms-fields-value\">Page Break and pre-set forms fields value<\/h3>\n\n\n\n<p><strong>Page break<\/strong> divides your form into several steps. The user can access the next part after filling in the previous one and clicking the &#8220;<strong>Next<\/strong>&#8221; button.<\/p>\n\n\n\n<p>The &#8220;<strong>Add Page Break<\/strong>&#8221; button is placed next to the &#8220;<strong>Add Field<\/strong>&#8221; and &#8220;<strong>Add Submit Button<\/strong>&#8221; buttons.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/add-break-button-2x.png\" alt=\"add page break button\">\n\n\n\n<p>The <strong>Page Break<\/strong> will be added as a separate field. If you would like to edit it, here&#8217;s what you can do:<\/p>\n\n\n\n<ul>\n<li>change the <strong>Label<\/strong> if you want the button to have a different name<\/li>\n\n\n\n<li>type in the <strong>Disabled message<\/strong>, that will be shown to the user if the button is disabled (for example, the user didn&#8217;t fill all the required fields)<\/li>\n\n\n\n<li>add some <strong>Custom CSS<\/strong> coding to style the button up<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/page-break-settings.png\" alt=\"page break button settings\">\n\n\n\n<p>The <strong>Pre-set form field value<\/strong> is an option to add the autofill according to the settings you apply.<\/p>\n\n\n\n<p>You should select:<\/p>\n\n\n\n<ul>\n<li>Text \u2014 <strong>Source<\/strong> (Post, User, URL Query Variables).<\/li>\n\n\n\n<li>ID \u2014 <strong>Get post ID from<\/strong> (Current user or post ID, URL Query Variables).<\/li>\n\n\n\n<li>Property for each field.<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/pre-set-field-values.png\" alt=\"pre-set field values\">\n\n\n\n<p>In this example, the <strong>Email<\/strong> field is auto-filled:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/Pre-set-sample.png\" alt=\"pre-set example\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fields-order\">Fields order<\/h3>\n\n\n\n<p>When all your fields are set, you can change the order and length.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"notification-settings\">Notification settings<\/h3>\n\n\n\n<p>Below the <strong>Fields Settings block<\/strong>, you will find the <strong>Notifications Settings<\/strong> section, where you can specify the type and the number of notifications. Depending on the type, you will get different areas to fill up.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/Notification-Settings-e1579708964228-2x.png\" alt=\"send email settings\">\n\n\n\n<p>Check out our full <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-booking-form-send-email-notification-overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">Notification Settings overview<\/a> to learn more about this topic.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"messages-settings\">Messages settings<\/h3>\n\n\n\n<p>In the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-booking-form-submission-message-settings-overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">Messages Settings<\/a> block, there are sample messages that the user will receive, whether the form is filled successfully or not.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/form-messages-settings-2x.png\" alt=\"form messages settings\">\n\n\n\n<p>Don\u2019t forget to click the &#8220;<strong>Apply Changes&#8221; <\/strong>button every time you make changes in order to save progress. After you finish the setting process, click on the <strong>&#8220;Publish&#8221;\/&#8221;Update&#8221;<\/strong> button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"editing-form-in-the-elementor-editor\">Editing Form in the Elementor Editor<\/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>Afterward, you can go to the page where you want to add a newly created form and open the page with the Elementor editor.<\/p>\n\n\n\n<p>Drag and drop the <a href=\"https:\/\/crocoblock.com\/widgets\/order-form\/\" target=\"_blank\" rel=\"noopener noreferrer\">Form widget<\/a> to the canvas of the page and select the form you have just created from the <em><strong>Content &gt; Select form<\/strong><\/em> directory.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/form-widget.png\" alt=\"form widget\">\n\n\n\n<p>Feel free to use different settings to customize the appearance of the order form according to your needs.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/elementor-forms-2x.png\" alt=\"editing a signup form in elementor\">\n\n\n\n<p>Click the &#8220;<strong>Update&#8221; <\/strong>button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"editing-form-in-gutenberg-editor\">Editing Form in Gutenberg Editor<\/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>The form you created can be also edited in the Gutenberg Editor. Open the editing screen of the necessary page and find the Form block in the block menu.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/form-block.png\" alt=\"form block in gutenberg\">\n\n\n\n<p>Click on it to drop the <strong>Form <\/strong>block to the canvas of the page and select the form you have just created in the <strong>Select form<\/strong> drop-down menu.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/form-in-guten-2x.png\" alt=\"editing form in gutenberg\">\n\n\n\n<p>Feel free to use different settings to customize the appearance of the order form according to your needs. more details about design customization you will find in <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetstylemanager-block-style-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">this overview<\/a>. Don&#8217;t forget to press the &#8220;<strong>Update&#8221; <\/strong>button when you are finished.<\/p>\n<\/div><\/div>\n\n\n\n<p>Now you can allow your customers to register for an appointment right from your site. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will learn how to create and customize a form (legacy) layout using the JetEngine plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[403],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to build a form layout \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Customize your order form according to your needs by creating a certain layout and enriching the form with necessary fields and buttons on the backend.\" \/>\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\/jetengine\/how-to-create-a-booking-form-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build a form layout \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Customize your order form according to your needs by creating a certain layout and enriching the form with necessary fields and buttons on the backend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-12T11:44:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/forms-enable-2x.png\" \/>\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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/\",\"name\":\"How to build a form layout \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-03-01T13:15:24+00:00\",\"dateModified\":\"2026-02-12T11:44:28+00:00\",\"description\":\"Customize your order form according to your needs by creating a certain layout and enriching the form with necessary fields and buttons on the backend.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/#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 Create a Form (Legacy)\"}]},{\"@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 build a form layout \u2014 JetEngine | Crocoblock","description":"Customize your order form according to your needs by creating a certain layout and enriching the form with necessary fields and buttons on the backend.","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\/jetengine\/how-to-create-a-booking-form-layout\/","og_locale":"en_US","og_type":"article","og_title":"How to build a form layout \u2014 JetEngine | Crocoblock","og_description":"Customize your order form according to your needs by creating a certain layout and enriching the form with necessary fields and buttons on the backend.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/","og_site_name":"Help Center","article_modified_time":"2026-02-12T11:44:28+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/forms-enable-2x.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/","name":"How to build a form layout \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-03-01T13:15:24+00:00","dateModified":"2026-02-12T11:44:28+00:00","description":"Customize your order form according to your needs by creating a certain layout and enriching the form with necessary fields and buttons on the backend.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-booking-form-layout\/#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 Create a Form (Legacy)"}]},{"@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\/7294"}],"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=7294"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=7294"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=7294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}