How to Create a Web Form in 3 Steps
Tags: webdev, form, database, data
Published: 2024-06-26 05:02:27

<!-- wp:heading -->
<h2 class="wp-block-heading">Create a Web Form Using Five's Online Web Form Generator</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this article, we explain the three steps required to build and launch a web form using Five's rapid application development environment. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The steps are:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Create the database,</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Add your form, and</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Launch of the web form.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Last, we will map out the steps to secure a web form through logins, authentications, and permissions.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:essential-blocks/table-of-contents {"blockId":"eb-toc-zff18","blockMeta":{"desktop":".eb-toc-zff18.eb-toc-container { max-width:610px; background-color:var(\u002d\u002deb-global-background-color); padding:30px; border-radius:4px; transition:all 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s }.eb-toc-zff18.eb-toc-container .eb-toc-title { text-align:center; cursor:default; color:rgba(255,255,255,1); background-color:rgba(69,136,216,1); font-size:22px; font-weight:normal }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper { background-color:rgba(241,235,218,1); text-align:left }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li { color:rgba(0,21,36,1); font-size:14px; line-height:1.4em; font-weight:normal }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li:hover,.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a { color:var(\u002d\u002deb-global-link-color) }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li a { color:inherit }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li svg path { stroke:rgba(0,21,36,1) }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li:hover svg path { stroke:var(\u002d\u002deb-global-link-color) }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li a,.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li a:focus { text-decoration:none; background:none }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper li { padding-top:4px }.eb-toc-zff18.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) { padding-bottom:4px }.eb-toc-zff18.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list { background:#fff; border-radius:4px }","tab":"","mobile":"","editorDesktop":"\n\t\t  \n\t\t  \n\n\t\t  .eb-toc-zff18.eb-toc-container{\n\t\t\t  max-width:610px;\n\n\t\t\t  background-color:var(\u002d\u002deb-global-background-color);\n\n\t\t\t  \n             \n\n            \n\t\t\t  \n            padding: 30px;\n\n            \n\t\t\t  \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n\t\t\t  transition:all 0.5s, \n  border 0.5s, border-radius 0.5s, box-shadow 0.5s\n  ;\n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n\n        \n\n    \n          \n                 \n\n            \n          \n\n     \n\n    \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-title{\n\t\t\t  text-align: center;\n\t\t\t  cursor:default;\n\t\t\t  color: rgba(255,255,255,1);\n\t\t\t  background-color:rgba(69,136,216,1);\n\t\t\t  \n\t\t\t  \n             \n\n            \n\t\t\t  \n               \n              font-size: 22px;\n               \n              font-weight: normal;\n               \n               \n               \n               \n          \n\n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper{\n\t\t\t  background-color:rgba(241,235,218,1);\n\t\t\t  text-align: left;\n\t\t\t  \n             \n\n            \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper ul,\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper ol\n\t\t  {\n\t\t\t  \n\t\t\t  \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li {\n\t\t\t  color:rgba(0,21,36,1);\n\t\t\t  \n               \n              font-size: 14px;\n              line-height: 1.4em;\n              font-weight: normal;\n               \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li:hover,\n          .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a{\n\t\t\t  color:var(\u002d\u002deb-global-link-color);\n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li a {\n\t\t\t  color:inherit;\n\t\t  }\n\n          .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li svg path{\n            stroke:rgba(0,21,36,1);\n          }\n          .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li:hover svg path{\n            stroke:var(\u002d\u002deb-global-link-color);\n          }\n\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li a,\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li a:focus{\n\t\t\t  text-decoration:none;\n\t\t\t  background:none;\n\t\t  }\n\n\t\t  \n\n        .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li {\n            padding-top: 4px;\n        }\n\n        .eb-toc-zff18.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) {\n            padding-bottom: 4px;\n        }\n\n        \n        .eb-toc-zff18.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            background: #fff;\n            \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n        }\n\n\n\t  \n\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper{\n\t\t\t  display:block;\n\t\t  }\n\t\t  ","editorTab":"\n\t\t  \n\t\t  .eb-toc-zff18.eb-toc-container{\n\t\t\t  \n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n\t\t  }\n\t\t  .eb-toc-zff18.eb-toc-container:hover{\n\t\t\t  \n    \n         \n        \n    \n              \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-zff18.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n        }\n\n\t  \n\t\t  ","editorMobile":"\n\t\t  \n\t\t  .eb-toc-zff18.eb-toc-container{\n\t\t\t  \n\n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n        \n    \n              \n                 \n\n            \n          \n\n    \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-zff18.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-zff18.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n        }\n\n\t  \n\t  "},"headers":[{"level":2,"content":"Create a Web Form Using Five's Online Web Form Generator","text":"Create a Web Form Using Five's Online Web Form Generator","link":"create-a-web-form-using-fives-online-web-form-generator"},{"level":3,"content":"Step 1: Create Your Web Form's Database","text":"Step 1: Create Your Web Form's Database","link":"step-1-create-your-web-forms-database"},{"level":3,"content":"Step 2: Creating the Web Form","text":"Step 2: Creating the Web Form","link":"step-2-creating-the-web-form"},{"level":3,"content":"Step 3: Launching the Web Form","text":"Step 3: Launching the Web Form","link":"step-3-launching-the-web-form"},{"level":2,"content":"How to Secure a Web Form: Logins, Authentication, Permissions","text":"How to Secure a Web Form: Logins, Authentication, Permissions","link":"how-to-secure-a-web-form-logins-authentication-permissions"}],"deleteHeaderList":[{"label":"Create a Web Form Using Five's Online Web Form Generator","value":"create-a-web-form-using-fives-online-web-form-generator","isDelete":false},{"label":"Step 1: Create Your Web Form's Database","value":"step-1-create-your-web-forms-database","isDelete":false},{"label":"Step 2: Creating the Web Form","value":"step-2-creating-the-web-form","isDelete":false},{"label":"Step 3: Launching the Web Form","value":"step-3-launching-the-web-form","isDelete":false},{"label":"How to Secure a Web Form: Logins, Authentication, Permissions","value":"how-to-secure-a-web-form-logins-authentication-permissions","isDelete":false}],"isMigrated":true,"titleBg":"rgba(69,136,216,1)","titleColor":"rgba(255,255,255,1)","contentBg":"rgba(241,235,218,1)","contentColor":"rgba(0,21,36,1)","contentGap":8,"titleAlign":"center","titleFontSize":22,"titleFontWeight":"normal","titleLineHeightUnit":"px","contentFontWeight":"normal","contentLineHeight":1.4,"ttlP_isLinked":true,"commonStyles":{"desktop":".wp-admin .eb-parent-eb-toc-zff18 { display:block }.wp-admin .eb-parent-eb-toc-zff18 { filter:unset }.wp-admin .eb-parent-eb-toc-zff18::before { content:none }.eb-parent-eb-toc-zff18 { display:block }.root-eb-toc-zff18 { position:relative }","tab":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-zff18 { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-zff18 { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-zff18::before { content:none }.eb-parent-eb-toc-zff18 { display:block }","mobile":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-zff18 { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-zff18 { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-zff18::before { content:none }.eb-parent-eb-toc-zff18 { display:block }"}} /-->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:tadv/classic-paragraph -->
<div style="background-color: #001524;"><hr style="height: 5px;">
<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>
<p style="text-align: center;"><a href="https://five.co/get-started/" target="_blank" rel="noopener"><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>
<hr style="height: 5px;"></div>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 1: Create Your Web Form's Database</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To create a web form, we must first create a database that stores responses. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":3014,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/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"/><figcaption class="wp-element-caption"><em>Click the yellow plus button to create a new application.</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Next up,</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Give your application a <strong>Title</strong>, such as My First App or Web Form. </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on the ☑️ <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>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on <strong>Manage </strong>to enter the Five development environment.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":3018,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/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"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Next, click on <strong>Data &gt; Table Wizard.</strong> Five's table wizard is a point-and-click interface for creating database table.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is where to find the table wizard:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2991,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Table-Wizard-1024x649-1.png" alt="Five.Co - Table Wizard" class="wp-image-2991"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<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>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<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>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":2992,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/06/Five.Co-Excel-to-Web-App-Database-Fields-1024x626-1.png" alt="Five.Co - Table Wizard - Adding Fields
" class="wp-image-2992"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Make sure to select the appropriate <strong>data and display types for the data you are dealing with. </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Last, save by clicking the ☑️ <strong>tick icon </strong>in the upper right corner. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have now created a single-table MySQL database that is ready to store information from our form.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, let's move on to Step 2, adding forms to our database.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 2: Creating the Web Form</h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Go to <strong>Visual &gt;&gt; Form Wizard </strong>in Five.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on the dropdown box inside the Form Wizard'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>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on  the ☑️ <strong>tick icon </strong>in the upper right corner, as shown here:</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":2092,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/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"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Our form is done. Let's move on to step 3: launching the web form.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 3: Launching the Web Form</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To launch your web form, click on the "Deploy to Development" button in the top right corner. This opens up your app in a new browser tab.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have now created our first prototype web form. To add more features, consider adding a <a href="http://five.co/themes">theme</a> to the web form. </p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">How to Secure a Web Form: Logins, Authentication, Permissions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Five'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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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/">multi-user application</a>. This automatically adds a login screen to your application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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">visit our documentation here.</a></p>
<!-- /wp:paragraph -->