Public forms - how to build a public form in minutes

By: Joe Johnston
Apr 20, 2022 | 12 minutes read

What is a public form
A 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 examples
There 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 survey
2. Login form
3. Sign up form
4. Contact form
5. Application form
6. Information request form
7. A COVID test response form
The internet is increasingly made up of forms. Itâs how we retrieve and update data, which is why there are different types of forms.
Public forms software
Public forms allow organizations to collect data from customers, prospects, partners, and stakeholders. But creating the actual public form requires software or an app.
Given that this is a recurring need for businesses there are many options for public forms software. There are a few things to keep in mind when you are picking the right tool for your forms though.
Firstly, thereâs the pricing point. There are free forms that are quite limited, Then there are very expensive solutions, along with a wide range of options in-between. So figuring out how much you want to spend on it is crucial.
Then, you need to consider your requirements. Some public forms are self-hosted, so you control the source code. Others arenât, so you need to redirect users to a third-party website.
Also, there are laws regarding what kind of authorization you need to process this data, in particular, if it is stored with an external app.
And finally, there is the usability aspect of building a public form. You might find a free option, but if itâs too hard for users to interact with it, you might not be able to get the data you want.
In this article, we teach you how to build your public forms using Budibase, so that you can build forms for free. You can use the cloud version, or host it yourself if you want. In addition, you can customize the forms in any way you want to, including complex components beyond just public forms.
Form types
Broadly speaking forms can be pigeonholed into the following two categories; single-step and multi-step.
Single-step forms
If 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 forms
Multi-step forms
Multi-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 forms
Building a public form
How to build a single-step public form
Both 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 Budibase
If 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 app
Click 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 database
For 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 structure
Now 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 - 10
11 - 100
101 - 1000
1001+
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 screen
Navigate 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 form
First, 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 button
To 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 Submit
We 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 form
Our 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 spacing
- Click 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
64px
- Right to
16px
- Bottom to
128px
- Left to
16px
- Top to
- Under SIZE, change the width to
520px
Update the theme
- Click the Theme button
- Beside the âThemeâ label, select Darkest
Add a logo, title and description
- Add an Image from the Elements dropdown
In the settings panel, under URL, link to your image. We will use:
Under Size, change the width to
48px
.
- Add a Header from the Elements dropdown
- In the settings panel, change the Text to
Contact sales
- Update the Size to âLargeâ.
- In the settings panel, change the Text to
- Add a Paragraph component from the Elements dropdown
In 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 app
Click 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 Bloggs
- Email -
joe@bloggs.com
- Company -
Budibase
- Company 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 app
To 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:
Check out our top tips for form UI design .
How to build a multi-step public form
Building 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:
Budibase form steps
You can use Budibase to create multi-steps forms. In general, you just need to add the form steps component. Then you use button components to navigate between steps and submit data.
You can navigate between steps with the onclick action âchange form stepâ:
In it, you can use buttons to navigate to the next step, to the previous step, to the first step, or to a specific step.
Therefore, you can have a simple sequential flow or a form with multiple iterations and a complex navigation system.
Step 11. Add Form Step components
To 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 step
For 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 setting
- Text
- Next
- Click the lightning bolt, and on the left hand side, select âNew Form.Current Stepâ, and select Save.
- Equals
- Number
- 1
See 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 next
Our 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 setting
- On Click
- Click 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.
- Equals
- Number
- 1
Step 14. Preview and test our new public multi-step form
Click 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 app
To 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 template
You 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).
What to do after setting up your Public Form
Personally, 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.