{"id":3112,"date":"2024-06-24T15:06:58","date_gmt":"2024-06-24T07:06:58","guid":{"rendered":"https:\/\/five.co\/?p=3112"},"modified":"2026-05-04T14:06:34","modified_gmt":"2026-05-04T06:06:34","slug":"how-to-create-a-web-form-in-3-steps","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-create-a-web-form-in-3-steps\/","title":{"rendered":"How to Create a Web Form in 3 Steps"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Create a Web Form Using Five&#8217;s Online Web Form Generator<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we explain the three steps required to build and launch a web form using Five&#8217;s rapid application development environment. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The steps are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create the database,<\/li>\n\n\n\n<li>Add your form, and<\/li>\n\n\n\n<li>Launch of the web form.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Last, we will map out the steps to secure a web form through logins, authentications, and permissions.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"root-eb-toc-zff18 wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-zff18 \"><div class=\"eb-toc-container eb-toc-zff18  eb-toc-is-not-sticky eb-toc-not-collapsible eb-toc-initially-not-collapsed eb-toc-scrollToTop style-1 list-style-none\" data-scroll-top=\"false\" data-scroll-top-icon=\"fas fa-angle-up\" data-collapsible=\"false\" data-sticky-hide-mobile=\"false\" data-sticky=\"false\" data-scroll-target=\"scroll_to_toc\" data-copy-link=\"false\" data-editor-type=\"\" data-hide-desktop=\"false\" data-hide-tab=\"false\" data-hide-mobile=\"false\" data-itemcollapsed=\"false\" data-highlight-scroll=\"false\"><div class=\"eb-toc-header\"><h2 class=\"eb-toc-title\">Table of Contents<\/h2><\/div><div class=\"eb-toc-wrapper \" data-headers=\"[{&quot;level&quot;:2,&quot;content&quot;:&quot;Create a Web Form Using Five&apos;s Online Web Form Generator&quot;,&quot;text&quot;:&quot;Create a Web Form Using Five&apos;s Online Web Form Generator&quot;,&quot;link&quot;:&quot;create-a-web-form-using-fives-online-web-form-generator&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 1: Create Your Web Form&apos;s Database&quot;,&quot;text&quot;:&quot;Step 1: Create Your Web Form&apos;s Database&quot;,&quot;link&quot;:&quot;step-1-create-your-web-forms-database&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 2: Creating the Web Form&quot;,&quot;text&quot;:&quot;Step 2: Creating the Web Form&quot;,&quot;link&quot;:&quot;step-2-creating-the-web-form&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Step 3: Launching the Web Form&quot;,&quot;text&quot;:&quot;Step 3: Launching the Web Form&quot;,&quot;link&quot;:&quot;step-3-launching-the-web-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;How to Secure a Web Form: Logins, Authentication, Permissions&quot;,&quot;text&quot;:&quot;How to Secure a Web Form: Logins, Authentication, Permissions&quot;,&quot;link&quot;:&quot;how-to-secure-a-web-form-logins-authentication-permissions&quot;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Create a Web Form Using Five&apos;s Online Web Form Generator&quot;,&quot;value&quot;:&quot;create-a-web-form-using-fives-online-web-form-generator&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 1: Create Your Web Form&apos;s Database&quot;,&quot;value&quot;:&quot;step-1-create-your-web-forms-database&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 2: Creating the Web Form&quot;,&quot;value&quot;:&quot;step-2-creating-the-web-form&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 3: Launching the Web Form&quot;,&quot;value&quot;:&quot;step-3-launching-the-web-form&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;How to Secure a Web Form: Logins, Authentication, Permissions&quot;,&quot;value&quot;:&quot;how-to-secure-a-web-form-logins-authentication-permissions&quot;,&quot;isDelete&quot;:false}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#create-a-web-form-using-fives-online-web-form-generator\">Create a Web Form Using Five&#8217;s Online Web Form Generator<\/a><ul class=\"eb-toc__list\"><li><a href=\"#step-1-create-your-web-forms-database\">Step 1: Create Your Web Form&#8217;s Database<\/a><li><a href=\"#step-2-creating-the-web-form\">Step 2: Creating the Web Form<\/a><li><a href=\"#step-3-launching-the-web-form\">Step 3: Launching the Web Form<\/a><\/li><\/ul><li><a href=\"#how-to-secure-a-web-form-logins-authentication-permissions\">How to Secure a Web Form: Logins, Authentication, Permissions<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Build a Web Form on a Custom Database<br \/><\/strong><span style=\"font-size: 14pt;\">Check out Five's online web form generator<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noopener\" data-wplink-edit=\"true\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Get Instant Access<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create Your Web Form&#8217;s Database<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To do so, access Five, and create a new application by clicking on <strong>Applications (in the top left corner, just under the hamburger icon) &gt;&gt; Yellow Plus <\/strong>button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To create a web form, we must first create a database that stores responses. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649-1.png\" alt=\"Five.Co - Create a New App by Clicking the Yellow Plus Button\" class=\"wp-image-3014\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649-1.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649-1-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649-1-768x487.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Click the yellow plus button to create a new application.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Next up,<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Give your application a <strong>Title<\/strong>, such as My First App or Web Form. <\/li>\n\n\n\n<li>Click on the \u2611\ufe0f <strong>tick icon <\/strong>in the upper right corner.<br>You will now see a <strong>blue Manage <\/strong>button in the upper right corner.<\/li>\n\n\n\n<li>Click on <strong>Manage <\/strong>to enter the Five development environment.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Manage-Your-Application-1024x576.png\" alt=\"Five.Co - Click on Manage to Start Building the Northwinds Application\" class=\"wp-image-3018\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Manage-Your-Application-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Manage-Your-Application-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Manage-Your-Application-768x432.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Manage-Your-Application.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Next, click on <strong>Data &gt; Table Wizard.<\/strong> Five&#8217;s table wizard is a point-and-click interface for creating database table.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is where to find the table wizard:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Table-Wizard-1024x649-1.png\" alt=\"Five.Co - Table Wizard\" class=\"wp-image-2991\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Table-Wizard-1024x649-1.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Table-Wizard-1024x649-1-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Table-Wizard-1024x649-1-768x487.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Fill in the <strong>Name<\/strong> field to give your database table a name. Choose something descriptive. For example, if you plan to collect information about Recipes call your database table Recipe. <\/li>\n\n\n\n<li>Click on the <strong>Plus icon <\/strong>on the right and towards the center of the screen. This plus button adds database fields to your table. Add as many fields as you need. <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"1024\" height=\"626\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Excel-to-Web-App-Database-Fields-1024x626-1.png\" alt=\"Five.Co - Table Wizard - Adding Fields\n\" class=\"wp-image-2992\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Excel-to-Web-App-Database-Fields-1024x626-1.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Excel-to-Web-App-Database-Fields-1024x626-1-300x183.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-Excel-to-Web-App-Database-Fields-1024x626-1-768x470.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For example, shown above is a table that has four fields for products, prices, quantities, and a total sum. As you can see, for the price and total field, we are expecting to store floats, or numeric values that are not an integer. For quantity, on the other hand, we are expecting integers. Last, our product field is a simple text field in our web form. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <em>display <\/em>types reflect our choice of <em>data <\/em>type. _Float.2 indicates that we expect two decimals for our price and total fields.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure to select the appropriate <strong>data and display types for the data you are dealing with. <\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a recap: data types define how your database stores records. Display types define how you your data is displayed to users inside your form. Five comes with a great library of prebuilt display types, such as ratings, images, floats, or currency.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Last, save by clicking the \u2611\ufe0f <strong>tick icon <\/strong>in the upper right corner. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have now created a single-table MySQL database that is ready to store information from our form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s move on to Step 2, adding forms to our database.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Creating the Web Form<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Visual &gt;&gt; Form Wizard <\/strong>in Five.<\/li>\n\n\n\n<li>Click on the dropdown box inside the Form Wizard&#8217;s General section, and select as your main data source the database table that you have just created.<br>This step is important: it brings together your back end, the database, with the web form, your front end.<\/li>\n\n\n\n<li>Click on  the \u2611\ufe0f <strong>tick icon <\/strong>in the upper right corner, as shown here:<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"656\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1024x656.png\" alt=\"Five.Co - Form Wizard - Creating a form\" class=\"wp-image-2092\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1024x656.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-300x192.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-768x492.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-1536x985.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-Creating-a-form-2048x1313.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Our form is done. Let&#8217;s move on to step 3: launching the web form.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Launching the Web Form<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To launch your web form, click on the &#8220;Deploy to Development&#8221; button in the top right corner. This opens up your app in a new browser tab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have now created our first prototype web form. To add more features, consider adding a <a href=\"https:\/\/preview-php85.dzine.org\/five\/themes\/\">theme<\/a> to the web form.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How to Secure a Web Form: Logins, Authentication, Permissions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Five&#8217;s form creator lets you build an online form quickly. In addition to its database modeling and form creation features, Five also lets you create different user roles with unique permissions to a form.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To add user roles or logins to your application, turn your application into a <a href=\"https:\/\/help.five.org\/2.5\/docs\/applications\/adding-managing-applications\/\" rel=\"nofollow noopener\" target=\"_blank\">multi-user application<\/a>. This automatically adds a login screen to your application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once users are required to login to the app, you can also add different user roles. For example, you could create one user role that can only submit forms. Another user role, on the other hand, can access a dashboard that summarizes responses from your form. To learn more about Five, <a href=\"http:\/\/help.five.org\" rel=\"nofollow noopener\" target=\"_blank\">visit our documentation here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create a Web Form Using Five&#8217;s Online Web Form Generator In this article, we explain the three steps required to build and launch a web form using Five&#8217;s rapid application development environment. The steps are: Last, we will map out the steps to secure a web form through logins, authentications, and permissions. Build a Web [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3143,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-3112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/06\/Five.Co-How-to-Create-a-Web-Form-in-3-Steps.png",1280,720,false]},"uagb_author_info":{"display_name":"Dominik Keller","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed3_my\/"},"uagb_comment_info":0,"uagb_excerpt":"Create a Web Form Using Five&#8217;s Online Web Form Generator In this article, we explain the three steps required to build and launch a web form using Five&#8217;s rapid application development environment. The steps are: Last, we will map out the steps to secure a web form through logins, authentications, and permissions. Build a Web&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=3112"}],"version-history":[{"count":1,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3112\/revisions"}],"predecessor-version":[{"id":17793,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3112\/revisions\/17793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/3143"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=3112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=3112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=3112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}