How to Build an Embeddable Contact Information Form

Contact information forms are probably the most common data collection tools around. They’re everywhere - whether as embedded UIs or standalone apps.

In fact, just about every business needs to build contact forms - for their customers, users, colleagues, or other stakeholders.

However, not all contact forms are equal. Most web forms are either built manually with HTML or using traditional form-builder tools. We can create perfectly functional forms this way, but these methods also leave a lot to be desired.

Today, we’re going to show off how Budibase offers unrivaled flexibility for building secure, advanced forms on top of just about any data source.

But first…

What is a contact information form?

A contact information form is a basic UI where users can input their contact details. Typically, their name, address, and phone number - but potentially also more contextual information - like details of a particularly support query or other request.

This might be used in a couple of different situations. Of course, gathering up-to-date contact information could be a goal in and of itself.

More often, though, this will be the initial step of a more complex workflow. For instance, call-back requests, email marketing, registration, onboarding, or a whole range of other tasks.

So, the key thing is that teams are able to build forms that aren’t just visually appealing - but are also tailored to the specific needs of the context they’re used within.

What are we building?

We’re building a simple multi-step contact information form on top of an existing MySQL database - although we could just as easily use Budibase’s built-in database. We’ll also provide the queries we need to create our data layer.

Specifically, our form will have two steps. One for the user’s basic personal and contact information, and a second for their address details.

This will be followed by a thank you message that appears when the form is successfully completed.

We’ll also show off how we can use this as an embedded UI or as a standalone tool, depending on our requirements.

Along the way, we’ll see some of the key ways that Budibase stands above the crowd in terms of developer experiences and the sophistication of the form tools we can output at pace.

Let’s jump in.

How to build a contact information form in 5 steps

If you haven’t already, sign up for a free Budibase account.

1. Setting up our form schema

The first thing we need to do is create a new Budibase app. We could use a pre-built template or import an existing app dump, but today, we’re starting from scratch.

When we choose this option, we’re prompted to give our app a name - which will also be used to generate a URL extension:

Once we’ve done this, we’re presented with a range of options for setting up our first data connection.

This is one area where Budibase really stands apart. Alongside our built-in low-code database, we have a range of connectors for relational and non-relational DBMSs, as well as REST APIs, Google Sheets, Airtable, and more.

There’s no better way to build forms on top of any kind of existing data.

As we said earlier, though, today we’re using MySQL.

Click on this option, and we’ll be asked to input our configuration details:

Then, we can choose which of the tables in our database we want to fetch, pulling them into Budibase.

Our database only has one table called contact_information:

If you want to create a database table of your own and build along with us, you can use the following MySQL query:

 1CREATE TABLE contact_information (
 2
 3  contact_id INT AUTO_INCREMENT PRIMARY KEY,
 4
 5  first_name VARCHAR(50) NOT NULL,
 6
 7  last_name VARCHAR(50) NOT NULL,
 8
 9  email VARCHAR(100) NOT NULL,
10
11  phone VARCHAR(20),
12
13  street_address VARCHAR(255),
14
15  city VARCHAR(50),
16
17  state VARCHAR(50),
18
19  postal_code VARCHAR(20),
20
21  country VARCHAR(50),
22
23  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
24
25);

And here’s a second query to populate this with some dummy data:

 1INSERT INTO contact_information 
 2
 3  (first_name, last_name, email, phone, street_address, city, state, postal_code, country)
 4
 5VALUES
 6
 7  ('John', 'Doe', 'john.doe@example.com', '555-1234', '123 Main St', 'Anytown', 'CA', '12345', 'USA'),
 8
 9  ('Jane', 'Smith', 'jane.smith@example.com', '555-5678', '456 Oak Ave', 'Somewhere', 'NY', '67890', 'USA'),
10
11  ('Alice', 'Johnson', 'alice.johnson@example.com', '555-9876', '789 Pine Blvd', 'Nowhere', 'TX', '54321', 'USA');

Here’s how our database table will look once we’ve fetched it:

We can add rows, edit the schema, or update values in Budibase’s backend without writing a single line of code.

But today, we’re building a contact information form to create new entries for our data table.

2. Generate a multi-step form

Let’s start building our UI. Head over to the Design tab, and we’ll be presented with a few options for creating our first screen. We can use an autogenerated layout or start from scratch.

We’re going to start with a blank screen.

We’ll be asked to give this a name. Our app will only have one screen anyway, so this can be anything.

We can also choose a minimum access role for using this screen. Since we are eventually going to embed this form on a webpage, we need to set this to Public. This means users won’t need an account to access our form.

If we were planning to use our form internally, we could choose a different role, and only authenticated users would be able to access it.

Here’s our blank screen:

The first component we’re going to add is a container. This will allow us to control how and where our form will appear on the screen.

We’ve set the horizontal and vertical alignment of this to the center - and set the size to expand and fill the space on the screen.

Inside our container, we’re placing a multi-step form block. This is a prebuilt set of components that outputs a form based on the schema of whichever data source we point it at.

We can configure this however we want.

The first thing to do is arrange our form fields into two distinct steps. By default, our form only has one.

On the right-hand side, we can select the fields we want to appear on this step. We’re deselecting everything except first_name, last_name, email, and phone:

We’ll also cut and paste the default title to the description field - and replace it with a more descriptive title:

Then, we’ll hit Add Step to create a second form step - this time selecting our remaining fields:

Lastly, we’ll open the Styles tab for our form, setting its Size to Large and Button Position to Top:

3. Add a confirmation message

When a user completes our form, we want to display a message to them confirming this and advising them on what to expect next.

We also want our form to be hidden when this appears.

We’ll start by adding another container beneath our existing one. We’ll use the exact same settings as we did earlier for this:

Inside this, we’ll add a Headline component - setting its Text attribute to our thank you message.

However, at present, this will just be displayed all the time.

We’re going to use some conditional logic to dynamically display either our form or our thank you message based on user behavior.

To achieve this, we’ll first add an action to our Save button.

We’ll add an Update State action, creating a value called ‘complete’ and setting it to true:

On our first container, we’ll add a conditionality rule to hide this component if our new state is equal to true:

And we’ll add a corresponding rule to our other component to display it if the same condition is met:

Here’s how this looks when we preview our app:

4. Design and UX tweaks

Before we push our contact information form live and show off how to embed it on a web page, we’re going to make a few design tweaks and UX improvements.

First of all, the display text for each of our form fields is simply the name of the relevant attribute, as it’s stored in our database. This is functional but aesthetically not very nice for end users.

We’ll use the Label and Placeholder attributes beside each form field to stylize these a little bit:

Since our app is going to be embedded on a web page, we can also remove the title and logo from the top of the UI.

Under Navigation, we’ll deselect the nav bar entirely:

Lastly, we can use the Theme menu to customize our app’s visuals. We’re going to set the theme to Midnight, as well as updating the default button colors to stand out a little better:

5. Publishing and embedding

Once we’re happy with the design of our contact information form, we can push it live for users.

Once we’ve done this, we can view our live app and send the link to users. We’ll also be shown a new option to access an embeddable iframe.

This leads us to the following page, where we can copy the code we need and then paste it into an HTML document:

Here’s how this would look embedded on the Budibase website:

Check out our guide to building digital forms to find out more about what Budibase has to offers.