{"id":156,"date":"2020-05-08T10:19:54","date_gmt":"2020-05-08T10:19:54","guid":{"rendered":"https:\/\/directorist.com\/docs\/?post_type=wpwax_directorist&#038;p=156"},"modified":"2021-07-26T08:45:00","modified_gmt":"2021-07-26T02:45:00","slug":"form-and-layout-builder","status":"publish","type":"wpwax_directorist","link":"https:\/\/directorist.com\/documentation\/directorist\/form-and-layout-builder\/form-and-layout-builder\/","title":{"rendered":"Form and Layout Builder"},"content":{"rendered":"<p><span style=\"color: #333333\">Directorist 7.0 brings substantial changes throughout the plugin and one of the major inclusion is the Directory Builder. In the previous versions( 6.5.8 and below) you had to configure the form through the settings panel but Directory 7.0 lets you build the add listing form using the drag &amp; drop functionality.<\/span><\/p>\n<p><span style=\"color: #333333\">To configure the listing form fields navigate to <strong>WP Admin Dashboard \u2192 <\/strong><strong>Directory Listings \u2192 Directory Builder \u2192 Add Listing Form<\/strong>.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1270 size-full\" src=\"http:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/23-add-listing-form.png\" alt=\"\" width=\"1919\" height=\"935\" srcset=\"https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/23-add-listing-form.png 1919w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/23-add-listing-form-300x146.png 300w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/23-add-listing-form-1024x499.png 1024w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/23-add-listing-form-768x374.png 768w, https:\/\/directorist.com\/documentation\/wp-content\/uploads\/sites\/5\/2020\/05\/23-add-listing-form-1536x748.png 1536w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/p>\n<p><span style=\"color: #333333\"><b>Form Fields:<\/b><span style=\"font-weight: 400\"> This section allows you to drag and drop the form fields from the right sidebar \u201cPreset fields\u201d and \u201cCustom Fields\u201d to the left sidebar. The fields on the left sidebar are the form fields that will be shown on the add listing form.\u00a0<\/span><\/span><\/p>\n<p><span style=\"color: #333333\"><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/s4.gifyu.com\/images\/addListing_drag.gif\" width=\"1431\" height=\"773\" \/><\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Field Settings<\/strong><\/span><\/p>\n<p><span style=\"color: #333333\">To configure the field you need to click on the arrow down &#8220;<strong>\u02c5<\/strong>&#8220;.<\/span><\/p>\n<p><span style=\"color: #333333\"><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/YILwXG9.png\" \/><\/span><\/p>\n<p><span style=\"color: #333333\">Clicking on it will reveal the field settings likewise the screenshot below.<\/span><\/p>\n<p><span style=\"color: #333333\"><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/3vxkReP.png\" \/><\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Preset Fields: <\/strong>Preset fields are the basic predefined fields that are available by default. Available preset fields are &#8211;<\/span><\/p>\n<p><span style=\"color: #333333\"><strong>General Fields: <\/strong>General fields are referred to Title, Description, Tagline, Price, Location, Tag, Category, View Count<\/span><br \/>\n<strong>i) Location Options<\/strong><\/p>\n<ul>\n<li><span style=\"color: #333333\"><strong>Multi-Selection for User<\/strong>: Select Multi-selection to allow users to select more than one location for a listing.<\/span><\/li>\n<li><span style=\"color: #333333\"><strong>Allow Creating New Locations<\/strong>: Enable the option &#8220;Allow New&#8221; to allow users to create a new location while adding a listing.<\/span><\/li>\n<\/ul>\n<p><strong>ii) Category Options<\/strong><\/p>\n<ul>\n<li><span style=\"color: #333333\"><strong>Multi-Selection for User<\/strong>: Select Multi-selection to allow users to select more than one category for a listing.<\/span><\/li>\n<li><span style=\"color: #333333\"><strong>Allow Creating New Category<\/strong>: Enable the option &#8220;Allow New&#8221; to allow users to create a new category while adding a listing.<\/span><\/li>\n<\/ul>\n<p><strong>iii)Tag Options<\/strong><\/p>\n<ul>\n<li><span style=\"color: #333333\"><strong>Multi-Selection for User<\/strong>: Select Multi-location to allow users to select more than one tags for a listing.<\/span><\/li>\n<li><span style=\"color: #333333\"><strong>Allow Creating New Tags<\/strong>: Enable the option &#8220;Allow New&#8221; to allow users to create new tags while adding a listing.<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/i.imgur.com\/YFniShz.png\" \/><\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Contact Fields: <\/strong>Contact Fields section includes Phone, Zip\/Postal Code, Email, Fax, Social Info, Website.<\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Map<\/strong>: User &amp; admin can use the map by default which consists of two fields a. Address b. map. The admin can control the total map system from the <strong>Settings \u2192 Listings \u2192 Map<\/strong>.<\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Images:<\/strong> Image fields comes with few options<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333\"><strong>Max Image Limit:<\/strong> Admin can limit the number of image uploads. For example, if the admin allows a maximum of 5 images then users are limited to 5 images<\/span><\/li>\n<li><span style=\"color: #333333\"><strong>Max Upload Size in MB:<\/strong> If the admin allows 2 MB of maximum upload size then users can upload a total of 2 MB of images ( It means the total number of image size = 2 MB size)<\/span><\/li>\n<li><span style=\"color: #333333\"><label for=\"\"><strong>Max Upload Size Per Image in MB<\/strong>: Set the allowed maximum upload file size per image.\u00a0<\/label><\/span><\/li>\n<\/ul>\n<p><span style=\"color: #333333\"><strong>Custom Fields:<\/strong> Previously(v6.5.8 and before), you had to create custom fields from the &#8220;Custom Fields&#8221; menu but now you just drag from the &#8220;Custom Fields&#8221; section and drop anywhere on your form.<\/span><\/p>\n<table style=\"height: 437px\" width=\"533\">\n<tbody>\n<tr>\n<td colspan=\"2\">\n<p style=\"text-align: center\"><span style=\"font-weight: 400\">Available Custom Fields<\/span><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">Text<\/span><\/td>\n<td><span style=\"font-weight: 400\">Text Area<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">Number<\/span><\/td>\n<td><span style=\"font-weight: 400\">URL<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">Date<\/span><\/td>\n<td><span style=\"font-weight: 400\">Time<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">Color<\/span><\/td>\n<td><span style=\"font-weight: 400\">Select<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">Checkbox<\/span><\/td>\n<td><span style=\"font-weight: 400\">Radio<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400\">File Upload<\/span><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"color: #333333\"><strong>Group\/Section Label:<\/strong> Group\/Section Labels are the name of the group which consists of certain fields. It can be edited by clicking on the &#8220;pen&#8221; icon right next to Group Name.<\/span><\/p>\n<p><span style=\"color: #333333\"><img decoding=\"async\" src=\"https:\/\/s4.gifyu.com\/images\/addListing_labels.gif\" \/><\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Common Field Options<\/strong><\/span><\/p>\n<p><span style=\"color: #333333\">Each field has its respective set of options but there are a few common field options like-<\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Required<\/strong>: Set the \u2018<strong>Required<\/strong>\u2018 option of any field to\u00a0<strong>YES<\/strong>\u00a0to make it required for any user to fill before submitting a listing.<\/span><\/p>\n<p><span style=\"color: #333333\"><strong>Only for Admin Use:<\/strong> You can hide a form field by setting the \u201c<strong>Only for Admin Use<\/strong>\u201d option to \u201c<strong>Yes<\/strong>\u201c. Only admin will see this field in the back-end add listing form but this field will be hidden\/excluded from the front-end add-listing\u00a0form for all users.<\/span><\/p>\n<p><span style=\"color: #333333\"><b>Settings<\/b><\/span><\/p>\n<p><span style=\"color: #333333\"><b> <\/b><span style=\"font-weight: 400\">The second tab within the Submission Form allows you to configure the<strong> preview mode, submit button text, Privacy Policy, Terms, and Conditions<\/strong>, etc. <\/span><\/span><\/p>\n<p><span style=\"color: #333333\"><img decoding=\"async\" src=\"https:\/\/i.imgur.com\/37GXqTF.png\" \/><\/span><\/p>\n<p>That&#8217;s all about Form and Layout Builder feature of Directorist.<\/p>\n","protected":false},"author":2298,"parent":0,"menu_order":0,"template":"","class_list":["post-156","wpwax_directorist","type-wpwax_directorist","status-publish","hentry","wpwax_directorist_category-form-and-layout-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/wpwax_directorist\/156","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/wpwax_directorist"}],"about":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/types\/wpwax_directorist"}],"author":[{"embeddable":true,"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/users\/2298"}],"wp:attachment":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/media?parent=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}