{"id":29575,"date":"2021-08-12T07:25:59","date_gmt":"2021-08-12T06:25:59","guid":{"rendered":"https:\/\/multisite.korebots.com\/v9-0\/?p=29575"},"modified":"2021-08-12T07:44:05","modified_gmt":"2021-08-12T06:44:05","slug":"form-components","status":"publish","type":"post","link":"https:\/\/multisite.korebots.com\/v9-0\/docs\/process-apps\/forms\/form-components\/","title":{"rendered":"Form Components"},"content":{"rendered":"<section class=\"l-section wpb_row height_auto\"><div class=\"l-section-h i-cf\"><div class=\"g-cols vc_row via_grid cols_1 laptops-cols_inherit tablets-cols_inherit mobiles-cols_1 valign_top type_default stacking_default\"><div class=\"wpb_column vc_column_container\"><div class=\"vc_column-inner\"><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><p><span style=\"font-weight: 400\">You can define a Digital Form by adding components and configuring their properties.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">You can drag and drop the components available on the left pane to the canvas and configure their properties to build the form. For details of the components &amp; their properties, see below.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Scroll through the list to search for a given component.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">View in a grid format.<\/span><\/li>\n<\/ul>\n<\/div><\/div><div class=\"w-separator size_medium with_line width_default thick_1 style_solid color_border align_center\"><div class=\"w-separator-h\"><\/div><\/div><div class=\"wpb_text_column\"><div class=\"wpb_wrapper\"><h4><strong>Basic &amp; Advanced Components<\/strong><\/h4>\n<p>The following is a list of available components and their properties:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: center\">Component<\/th>\n<th style=\"text-align: center\">Description<\/th>\n<th style=\"text-align: center\">Sample<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td colspan=\"2\"><strong>Basic<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-text.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23488 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-text.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Text Field<\/strong> &#8211; Used for single-line input.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-text.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23465\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-text.png\" alt=\"\" width=\"515\" height=\"88\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-textarea.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23489 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-textarea.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Text Area<\/strong> &#8211; Used for multi-line entry.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-textarea.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23466\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-textarea.png\" alt=\"\" width=\"516\" height=\"145\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-number.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23490 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-number.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Number<\/strong> &#8211; Used for numerical entries.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-number.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23467\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-number.png\" alt=\"\" width=\"519\" height=\"76\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-radio.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23491 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-radio.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Radio Button<\/strong> &#8211; Used as a selection option from a given list.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-radio.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23468\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-radio.png\" alt=\"\" width=\"285\" height=\"69\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-dropdown.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23492 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-dropdown.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Drop-down<\/strong> &#8211; Used as a selection option from a given list; can be multi-select.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-dropdown.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23469\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-dropdown.png\" alt=\"\" width=\"511\" height=\"277\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23493 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-checkbox.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Checkbox<\/strong> &#8211; Used for multi-select option from a given list.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-checkbox.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23470\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-checkbox.png\" alt=\"\" width=\"367\" height=\"89\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-date.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23494 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-date.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Date<\/strong> &#8211; Used for date entries, gives a date picker for the user to choose the date.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-date.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23471\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-date.png\" alt=\"\" width=\"287\" height=\"352\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-date.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23494 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-date.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Date &amp; Time<\/strong> &#8211; Used for date and time entries, give a date and time picker for the user to choose the date and time.<br \/>\nUse the <strong>Date component<\/strong> and set the <strong>Time option to yes<\/strong>; choose from <em>12-<\/em> or <em>24-hour<\/em> format.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-datetime.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23472\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-datetime.png\" alt=\"\" width=\"298\" height=\"427\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-phone.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23495 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-phone.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Phone Number<\/strong> &#8211; Used for phone number entries, allows the user to choose the country code.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-phone.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23473\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-phone.png\" alt=\"\" width=\"499\" height=\"273\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-email.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23496 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-email.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Email<\/strong> &#8211; Used for email address entries, validates for <em>xxx@uuu.com<\/em> format.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-email.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23474\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-email.png\" alt=\"\" width=\"517\" height=\"93\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-toggle.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23497 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-toggle.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Toggle<\/strong> &#8211; Used for switching between two values, ideal for yes\/no type of inputs.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-toggle.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23475\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-toggle.png\" alt=\"\" width=\"116\" height=\"65\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-address.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23498 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-address.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Address<\/strong> &#8211; Used for address entries.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-address.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23476\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-address.png\" alt=\"\" width=\"516\" height=\"152\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-url.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23499 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-url.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>URL<\/strong> &#8211; Used for web URL entries, validates for <em>xxx.com<\/em> format.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-url.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23477\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-url.png\" alt=\"\" width=\"517\" height=\"89\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-slider.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23500 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-slider.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Range Slider<\/strong> &#8211; Value selection between specified min and max values; can be represented as a percentage.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-slider.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23478\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-slider.png\" alt=\"\" width=\"514\" height=\"80\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td colspan=\"2\"><strong>Advanced<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23501 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-button.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Button<\/strong> &#8211; Used as a clickable component to submit, or reset, or open an external URL on the form. Choose from <em>Primary<\/em>, <em>Secondary<\/em>, <em>Tertiary<\/em>, <em>Ghost,<\/em> or <em>Danger<\/em>.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-buttons.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23479\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-buttons.png\" alt=\"\" width=\"666\" height=\"247\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-label.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23502 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-label.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Label<\/strong> &#8211; Used to display a static text box, no action is required from the user.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-label.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23480\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-label.png\" alt=\"\" width=\"118\" height=\"48\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-protip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23504 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-protip.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Protip<\/strong> &#8211; Used to mark important information for the end-user, no user action required.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-protip.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23482\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-protip.png\" alt=\"\" width=\"511\" height=\"87\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UI-notes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23505 aligncenter\" src=\"\/wp-content\/uploads\/sites\/22\/UI-notes.png\" alt=\"\" width=\"16\" height=\"16\" \/><\/a><\/td>\n<td><strong>Note<\/strong> &#8211; Used to mark information for the end-user, no user action required.<\/td>\n<td><a ref=\"magnificPopup\" href=\"\/wp-content\/uploads\/sites\/22\/UIForms-notes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-23483\" src=\"\/wp-content\/uploads\/sites\/22\/UIForms-notes.png\" alt=\"\" width=\"510\" height=\"83\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"You can define a Digital Form by adding components and configuring their properties. You can drag and drop the components available on the left pane to the canvas and configure their properties to build the form. For details of the components &amp; their properties, see below. Scroll through the list to search for a given...","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/posts\/29575"}],"collection":[{"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/comments?post=29575"}],"version-history":[{"count":6,"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/posts\/29575\/revisions"}],"predecessor-version":[{"id":29580,"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/posts\/29575\/revisions\/29580"}],"wp:attachment":[{"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/media?parent=29575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/categories?post=29575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisite.korebots.com\/v9-0\/wp-json\/wp\/v2\/tags?post=29575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}