Forms

An overview of existing forms, and form sections

Forms can be critical elements in websites and apps, serving as conduits for user interaction and data exchange. Whether it's a simple sign-up form or a complex questionnaire, forms enable users to input information, make selections, or execute actions essential to their interaction with the platform.

Forms Built Into Every App

In Appeggio, all of our apps come pre-configured with essential forms, pages, and the associated processes you need including:

Contact us form
Login form, and logout
Forgot password and reset password forms
Verify email forms

Traditionally, setting up these forms and back-end processes is fiddly, technical, and time-consuming. We've done the tricky stuff for you. All you need to do is make sure the details reflect your information, such as your contact details, and direct the forms to where you need them to go.

Forms Sections Within The Parts Library

In addition to the forms already present in our apps, we have a library of complete forms and form sections that can be combined to create complete forms. From personal info to application forms, your use case is covered by our forms more likely than not, and like all our other sections, forms are fully responsive and adapt to your app's fonts and colors. Select a form, change some settings, and receive submissions in minutes. Like the rest of our parts, forms are preconfigured to work, meaning submitting a form in the tool will go through to your database as an actual form response.

Examples of Styled Sections Containing Forms

There are contact forms, sign-in forms, and lead capture forms for things like newsletter and blog post sign-ups. These are available in the Part Library > Page Sections.

Here's how to access them and what they look like:

Forms Sections

In the Parts Library, you'll also see that we have Forms sections:

These form sections have already been created and are ready for you to edit, add to, and format as you need. There are form sections to collect personal and address information, general business information, and acknowledge terms and conditions.

The form sections contain input fields, choice buttons, and selects with preconfigured dropdowns.

There are also some lending sections and insurance sections:

Select the most relevant form sections, add them to your canvas, and then edit as needed.

Setting Up a Form Using Form Sections

For Forms sections and parts to function correctly as forms, they need to be contained in a 'Form' part, and have a button with the type 'Submit'.

When creating new forms, start with a Starter form, or another form part located within the Base Parts section. Starter forms and base part forms can be found in the following places:

Location in the Parts Library: Base Parts > Data Input > Form

Form Sections > Starter Form

In the Starter form, you'll notice there are blank rows where you can drop in form sections, and/or other form parts. You can add as many rows to this starter form as you need, or delete any rows that aren't needed.

This is a starter form:

Once you've added your Starter Form (or other form from the Base Parts > Data Input > Form), add other form sections or parts as required.

Press play to see the short video of adding form sections to a starter form:

Setting Up a Form Using Base Form Parts

There are many base parts available to help you create custom forms. There are a few variations of the starter form parts that include some typical parts that you may expect to see in a form.

The smaller base parts include checkboxes, radio buttons, file inputs, text inputs, text area inputs, selects, ranges, toggles, and joins.

If creating a Form from scratch, the easiest way to do this is to go to Base Parts > Data Input > Forms and choose the form closest to what you're hoping to achieve. Add the Form to your canvas. It's a good idea to choose a Form that has base parts in it that you know you'll use.

In the example below, a form with text inputs, a text area, selects, choice buttons, field labels, and a submit button was added to the canvas.

Once you've added the form to your canvas, you can then edit the form, and other form parts as needed.

Setting Up Form Parts - Models, IDs, and Values

Some form parts require initial setting up to ensure data integrity and appropriate handling. Any data you're asking your users to provide must be appropriately configured so that when you want to see that data in a database or an email, the responses can be appropriately matched to the question or other relevant variables.

As such, many of the form parts require a model, an ID, and values (or some combination of these). Each of the parts are described on the next pages, with examples of how to configure each part.

Generally, the Model refers to the underlying data structure that keeps track of the state of the part.

The ID is a unique identifier (or name) assigned to each part. For example, if we're talking about radio buttons, it ensures each radio button can be distinctly identified within the form.

The Value is the specific piece of information or option that each radio button represents. It indicates what the radio button stands for when it is selected.

What Happens to the Form Data?

Forms can be configured so that the response data is:

Populated into a database,
Emailed to you, or
Is sent to an API.

This is achieved through the Actions property in the right property panel:

Populate Form Data Into a Database.

In order to populate your form data into a database table, you need to identify the table you'll be populating. That means you can populate an existing table, or create a new table.

More coming on this soon.

Email the Data.

To email the data to a nominated email address, select the form part, then go to the right property panel and select Actions. Click 'Default', and you will see a list of possible functions.

Go to 'email-form' as shown below:

This will open a tab where you will complete some email details:

Here is an example below: