Public forms - how to build a public form in minutesBy: Joe JohnstonApr 20, 2022 | 10 minutes readWhat is a public formA public form is a digital form that is accessible to anyone on the internet. The difference between a public and private form is the access level. Private forms are only accessible to predefined users behind a secure log-in.Public form examplesThere are many examples where a user may want to create a public form. I’ve listed a few of these scenarios below:1. A public survey2. Login form3. Sign up form4. Contact form5. Application form6. Information request form7. A COVID test response formThe internet is increasingly made up of forms. It’s how we retrieve and update data, which is why there are different types of forms.Form typesBroadly speaking forms can be pigeonholed into the following two categories; single-step and multi-step.Single-step formsIf you think of a form, this is probably what you picture. A simple, vertical flowing form that spans one screen, usually with a submit button. These types of forms are perfect when your form consists of a few simple inputs - as a rule of thumb, if you have more than 6 inputs, you should consider a multi-step form.Examples of single-step formsContact formJob application formMOT booking formMulti-step formsMulti-step forms are forms that span across multiple screens. They are also known as stepper forms and generally consist of 1 or 2 questions per screen. Multi-step forms are great when you’ve got a lot of inputs within your form or when you need to add media/explanations to questions.Examples of multi-step formsUK Gov passport applicationWhich office character are youBuilding a public formHow to build a single-step public formBoth Budibase and Google Forms are great options for building a public form (single-step). Google Forms is free, proprietary software. The data submitted within your form is hosted with Google. On the other hand, Budibase is free, open-source, and perfect for building forms ; therefore, it’s possible to quickly build forms and store your data in the safety of your infrastructure. For this guide, we will use Budibase.Step 1. Sign up for BudibaseIf you’ve not signed up for Budibase, you can register here . Simply complete the sign-up process - it only takes a few seconds - and you’ll be ready to take the next step.Step 2. Create a new appClick the ‘Create new app’ button, then click the ‘Start from scratch’ button. Name your app (only use letters, no spaces or special characters) - we’ll name our app Form. Budibase will generate a URL for you. If you are happy with the URL, click ‘Create app’.Step 3. Set up your databaseFor demonstration purposes, we will use the Budibase DB as our data source. This is the easiest and fastest way to build a public form with Budibase.You can also build forms using MySQL, Postgres, Airtable, MongoDB, Rest APIs, and more. We’ll cover each of these data sources in a different tutorial.Click Budibase DB, then click ‘Continue’. Name your table: ‘Public Form’. And finally, click the ‘Create’ button.Step 4. Create your data structureNow that we’ve set up our database, we need to build its structure by adding fields/columns.Click the ‘Create column’ button, and name it Name. Then click ‘Save column’.Click the ‘Create column’ button, and name it Email. Then click ‘Save column’.Click the ‘Create column’ button, and name it Company. Then click ‘Save column’.Click the ‘Create column’ button, and name it Company size. Click the Type dropdown and select ‘Options’. In the options text box (bottom) add the following (one per line):1 - 1011 - 100101 - 10001001+Then click ‘Save column’.The final step within our data section, and a very important one, is to change the access of our database. To do this, click the ‘Manage access’ button. Then set both the Write and Read levels to ‘Public’. Click ‘Done’.Step 5. Create your public screenNavigate to the Design section of the Budibase builder. There are two ways to build a public form within Budibase; autogenerate screens (including a form), or build our form from scratch. In this demonstration, we will build our form from scratch.Your first step is to change the access from Basic to Public (Filter by access dropdown under the Screens tab).Now click the ‘+ Add screen’ button. Select ‘Blank’ and click ‘Add screens’. Name your screen Form and use / as the URL. Your screen will now look like this:Step 6. Build your public formFirst, we will add a Form component. You will find this under the Form dropdown. In the settings panel (to the right of your screen), under the Schema label, select the dropdown and select Public Form.Now, add a Field Group component (under the Form dropdown). In the settings panel, click the ‘Update form fields’ button, then click ‘Update’. Your screen should now look like this:Step 7. Add and configure submit buttonTo complete the creation of our public form, we will add a submit button. To add a button, click the Elements dropdown, and select Button. In the settings panel, under the Text label, update the button’s text to SubmitWe now need to tell our button what to do when clicked. To do this, under the label On Click, click the Define actions button. Now click the `Add Action' button, and select ‘Save Row’. Change the Data source to ‘New Form’ (the name of your form component in the tree) and Table to ‘Public Form’ (the name of your table). Click ‘Save’. Our form is now fully operational.Step 8. Style our new formOur form is looking a little lustreless. Let’s bring it to live with some style updates. First, we’ll remove our navigation by clicking Layouts, then in the settings panel, selecting ‘None’ under Navigation.After removing the Navigation, go back to the ‘Screens’ tab, and follow the instructions below:Resize our form and update spacingClick on the ‘Home’ option in the component navigation tree. In the settings panel, under ‘Horiz Align’, choose ‘Center’.Click on our New Form component, and in the settings panel, change the Size to ‘Large’.Add a new container and drag it above your form component (in the component tree). Then nest your Form component under the new Container component. Click the ‘New Container’ component, and in its settings panel:Under Horiz. Align, select ‘Left’.Under PADDING, change:Top to 64pxRight to 16pxBottom to 128pxLeft to 16pxUnder SIZE, change the width to 520pxUpdate the themeClick the Theme buttonBeside the ‘Theme’ label, select DarkestAdd a logo, title and descriptionAdd an Image from the Elements dropdownIn the settings panel, under URL, link to your image. We will use:Link to imageUnder Size, change the width to 48px.Add a Header from the Elements dropdownIn the settings panel, change the Text to Contact salesUpdate the Size to ‘Large’.Add a Paragraph component from the Elements dropdownIn the settings panel, under Text, add description text. We will add:Please complete the form below and we will respond as soon as possible.Change the Color to a lighter grey (see screenshot below)Now structure your component navigation tree like the image below:Step 9. Preview and test your appClick the Preview icon (play icon, highlighted in blue below) to preview your app.Your new public form should look something like this:You can now test your form. Fill out your form with the following information and click the submit button.Name - Joe BloggsEmail - firstname.lastname@example.orgCompany - BudibaseCompany size - 1001+After submitting the form, if you navigate back to Budibase, and look at your Public Form table in the data section, you will see our test entry.If you are happy with your form, you can now publish it.Step 10. Publish your appTo publish your app, simply click the Publish button, beside the preview button.Currently, to view your app, you have to navigate back to the app section (click bb icon, top left), and click the more icon beside your app, then click ‘View published app’. This will change in the near future, and when you click publish Budibase will provide you with the URL.Your new public form should look beautiful like the one below:How to build a multi-step public formBuilding a multi-step form follows the same process as building a single-step form, but involves a few additional steps which I’ve detailed below:Step 11. Add Form Step componentsTo turn our single-step form into a multi-step form, we must use the Form Step component. Click on the New Field Group component in your navigation tree, then add 2 Form Step components (add one, then click on New field group component, then add another). After doing this, nest the Name and Email component under Step 1, and Company and Company size under step 2. See the image below for further direction:Step 12. Change our button text depending on the stepFor our first step, we don’t want our button to say Submit, we want it to say Next. To do this, click the button, then click Configure conditions (at the bottom of settings).What we want to do next, is tell Budibase to update our button text to say next if the current step is 1. To do this, we add the following values to our Conditions settings:Update settingTextNextClick the lightning bolt, and on the left hand side, select ‘New Form.Current Step’, and select Save.EqualsNumber1See the image below for guidance.Click Save, and the Button should be updated.Step 13. Tell our button to move from one step to the nextOur button currently has an action to Save a row, but we don’t want to save a row for the first step. So, we will tell Budibase, when the user is on step 1, don’t save, and instead, move them to the next step when the button is clicked. To do this, we must go back into our button Conditions, and enter the following:Update settingOn ClickClick Define actions button, then click Add Action, select ‘Change form step’. Then change Form to ‘New Form’ (should be selected), and Step to ‘Next Step’. Click ‘Save’.Click the lightning bolt, and on the left hand side, select ‘New Form.Current Step’, and select Save.EqualsNumber1Step 14. Preview and test our new public multi-step formClick the preview button. In our form, enter Test for the name, and Test for the email. Click Next.Then enter Test for the Company and 1 - 10 for Company size, and press Submit.After submitting the form, if you navigate back to Budibase, and look at your Public Form table in the data section, you will see our test entry.Step 15. Publish your appTo publish your app, simply click the Publish button, beside the preview button.Currently, to view your app, you have to navigate back to the app section (click bb icon, top left), and click the more icon beside your app, then click ‘View published app’. This will change in the near future, and when you click publish Budibase will provide you with the URL.Public form templateYou can explore over 50 templates, including form templates . If you would like to explore the app we created above, you can do, by downloading it from the link below, then uploading it to Budibase (from the Create app screen in Budibase).Example public form appWhat to do after setting up your Public FormPersonally, I would autogenerate CRUD screens (with basic access level). This way, I would have a UI to view, update, delete form submissions and create new ones too.I hope you found this guide helpful. If you have a need or desire to build web apps and internal tools quickly, sign up to Budibase today . It’s free and open-source, has over 13,000 Github stars, and is loved by employees at Google, Microsoft, SpaceX, and more.