How To Connect a Form to a Database
Tags: form, database, sql, webapp
Published: 2024-01-01 23:07:08

<!-- wp:paragraph -->
<p>Forms are everywhere. Whether you're scheduling an appointment, registering for an event, collecting user feedback, conducting a survey, or submitting your vacation request: forms are essential to collect information, run a business, or interact with customers. <strong>In this blog post, we will learn how to connect a form to a database using Five.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are a lot of online form builders, such as Google Forms, Jotform, or Typeform. And many of these form builders operate on top of a spreadsheet as data storage. A lot of that data then gets moved from the spreadsheet into a database, such as MySQL, using some ELT process or "glue code" written in PHP, JavaScript, or SQL. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this blog post, we will explore how to use Five to create a database table and connect a form to it. We will accomplish all of this without writing any code and without requiring any external tools. </p>
<!-- /wp:paragraph -->

<!-- wp:rank-math/toc-block {"headings":[{"key":"e65952f8-e438-446b-aece-9f371fb1fbc2","content":"Connecting a Form to a Database","level":2,"link":"#connecting-a-form-to-a-database","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"ef0e7b95-909a-4611-a9dd-66681520849b","content":"Step 1: Using Five To Create Database Tables","level":3,"link":"#step-1-using-five-to-create-database-tables","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"740d70e0-2d0c-400d-a0cc-b862c7913bc6","content":"Step 2: Using Five to Create Forms","level":3,"link":"#step-2-using-five-to-create-forms","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"811f36d7-f0d0-444c-ac44-17f62edb92ea","content":"Step 3: Advanced Features - Using Five to Create Sophisticated Forms","level":3,"link":"#step-3-advanced-features-using-five-to-create-sophisticated-forms","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"3b5504fd-22ac-4fb8-8ec4-02d3fec90f9f","content":"Read Only, Show If, Required If, and Default Value","level":4,"link":"#read-only-show-if-required-if-and-default-value","disable":true,"isUpdated":false,"isGeneratedLink":true},{"key":"fddec296-7f26-48b5-966c-bb0a2f18dd93","content":"Adjusting the Look of Your Form","level":4,"link":"#adjusting-the-look-of-your-form","disable":true,"isUpdated":false,"isGeneratedLink":true},{"key":"70445ab8-0430-442f-9df0-91828287372f","content":"Publishing Your Form to the Web","level":4,"link":"#publishing-your-form-to-the-web","disable":true,"isUpdated":false,"isGeneratedLink":true}],"listStyle":"ul"} -->
<div class="wp-block-rank-math-toc-block" id="rank-math-toc"><nav><ul><li class=""><a href="#connecting-a-form-to-a-database">Connecting a Form to a Database</a><ul><li class=""><a href="#step-1-using-five-to-create-database-tables">Step 1: Using Five To Create Database Tables</a></li><li class=""><a href="#step-2-using-five-to-create-forms">Step 2: Using Five to Create Forms</a></li><li class=""><a href="#step-3-advanced-features-using-five-to-create-sophisticated-forms">Step 3: Advanced Features - Using Five to Create Sophisticated Forms</a><ul></ul></li></ul></li></ul></nav></div>
<!-- /wp:rank-math/toc-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>Create a Form and a Database</strong>
<span style="font-size: 14pt;">Download Five for Free to Get Started</span></span></pre>
<p style="text-align: center;"><a href="https://five.co/sign-up/" 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>Sign Up</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 -->
<h2 class="wp-block-heading" id="connecting-a-form-to-a-database">Connecting a Form to a Database</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-1-using-five-to-create-database-tables">Step 1: Using Five To Create Database Tables</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Five's <strong>Table Wizard</strong> is a visual table builder for MySQL. To create a new table in your database, you simply add fields to it, give each field a name, data type, and display type, and you're done!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Watch the video below and learn how to create a database table with Five:</p>
<!-- /wp:paragraph -->

{% embed https://www.youtube.com/watch?v=jcRAhyw9rmI %}

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-2-using-five-to-create-forms">Step 2: Using Five to Create Forms</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Creating a table in Five barely took us 5 minutes. Now let's see how quickly we can create a form on top of our table. Again, Five comes with a handy wizard, the <strong>Form Wizard,</strong> which makes very easy and quick to create a form.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Watch our video on creating forms here to learn how.</p>
<!-- /wp:paragraph -->

{% embed https://www.youtube.com/watch?v=C-P0vgwrU6s
 %}
<!-- wp:paragraph -->
<p>In just two steps we have created a database and a form that can be used to enter, edit, or display data stored in your 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" id="step-3-advanced-features-using-five-to-create-sophisticated-forms">Step 3: Advanced Features - Using Five to Create Sophisticated Forms</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We have already learned how to connect a form to a database. Now let's think about how to make our form smarter.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Forms are windows through which people can see and reach your database. But often, not everyone should get the same view onto your database. For example, some users should only see certain fields inside your form. Or other fields should be read-only or hidden.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Five gives you all of these options. Let's explore what else we can do to our form using Five.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="read-only-show-if-required-if-and-default-value">Read Only, Show If, Required If, and Default Value</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To adjust how your form behaves, open up Five, click on <strong>Visual &gt; Forms &gt; Select a Form</strong> and then click on <strong>Pages &gt; General &gt; Fields &gt; Display</strong>. This is where you can add Show If, Required If, or Read Only If conditions to each form field. These fields accept simply JavaScript, such as true, false or == statements to define the if condition.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2224,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Five.Co-Form-Settings-1024x546.png" alt="" class="wp-image-2224"/></figure>
<!-- /wp:image -->

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

<!-- wp:paragraph -->
<p>For example, say you are creating a registration form for a hospital, and one of the questions on the form asks about patients' gender. If a patient selects "Female", you'd like to ask whether they are currently pregnant or not. But you don't want the same question to appear when someone selects "Male". By using Five's "Show If" field to make sure your form behaves as described.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Of course, you can also give a form field a <strong>Default Value</strong>. This value will be shown and stored in your database unless your users decide to override it. Click on <strong>General</strong> to set a default value.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="adjusting-the-look-of-your-form">Adjusting the Look of Your Form</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When a new form is created in Five, Five will automatically stack all of its fields on top of each other, like a waterfall. But what if you want something a little bit more unique, like this form that collects booking requests?</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2231,"width":"600px","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><img src="https://five.co/wp-content/uploads/2023/12/image-9-1024x909.png" alt="" class="wp-image-2231" style="width:600px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>To customise how your form looks, use Five's <strong>Form Designer,</strong> a drag-and-drop form editor.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2225,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/12/Five.Co-Form-Designer-1024x419.png" alt="" class="wp-image-2225"/></figure>
<!-- /wp:image -->

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

<!-- wp:paragraph -->
<p>The form designer lets you customise how fields are shown on desktop or mobile. You can simply drag and drop your fields into the grid to make them appear side by side, on top of each other or to adjust their size. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>On a smaller screen size, such as mobile, Five will automatically adjust how your form is shown. Five uses something called responsive design, which makes sure applications look great regardless how users access them: from desktop, tablet or mobile.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Of course, you can also change the appearance of your form by adjusting font types, colours and fields. Watch this video to learn how:</p>
<!-- /wp:paragraph -->

{% embed https://www.youtube.com/watch?v=W0R_sKzkRjI %}

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

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="publishing-your-form-to-the-web">Publishing Your Form to the Web</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Last but not least, it's time to publish your form on the web so that your users can access it. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Five gives you several <a href="https://five.co/pricing/" data-type="page" data-id="1126">pricing plans</a> to publish apps to the web. Once published, each app comes with a custom URL that you can share with users. You can also embed forms in an iframe on your website, or decide to publish forms without the surrounding user interface that Five gives you by default.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Once your users have access to your form, all data flows directly into your database. No more spreadsheets needed!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->