# Forms

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.&#x20;

## 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&#x20;
* Forgot password and reset password forms&#x20;
* 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:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FdKWIhNQFGbhO1uaVsgok%2FFormSectionExamples.gif?alt=media&#x26;token=48882096-2b71-482c-9f8e-a72f496b36cf" alt=""><figcaption><p>Examples of Sections Containing Forms</p></figcaption></figure>

### Forms Sections

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F1EyYWr4XCOgmIHW4uP4U%2FAccessingForms.png?alt=media&#x26;token=54d27627-98b9-4b5a-a04f-d7e33c2c5f0b" alt=""><figcaption><p>Forms Sections in the Parts Library</p></figcaption></figure>

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.&#x20;

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

There are also some lending sections and insurance sections:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FFNhyrRdRWbLarg1xs9IW%2FFormsGlimpse.gif?alt=media&#x26;token=e48b9398-2553-4999-95af-02d452b5c5bf" alt=""><figcaption><p>Example Forms in the Parts Library</p></figcaption></figure>

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'.&#x20;

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:

{% hint style="success" %}
**Location in the Parts Library:** Base Parts > Data Input > Form

Form Sections > Starter Form
{% endhint %}

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:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Ft1aqFNTpu3g0f9CjVpyE%2FFormStarter.png?alt=media&#x26;token=5ba8c816-c72d-46bb-af10-1b35a81866c2" alt=""><figcaption><p>The Starter Form - A Form Part with a Title and Rows to Add Form Sections and/or Parts, with a Submit Button</p></figcaption></figure>

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. &#x20;

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

{% embed url="<https://www.loom.com/share/4b6a872a8dac4541834a3a32ea60243c?hideEmbedTopBar=true&sid=d2940b2e-b06d-492d-a553-31108cf33e30>" %}
Adding Form Sections to a Starter Form
{% endembed %}

## 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.&#x20;

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.

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FXqqqNOjQF8QMPw072UxC%2FAddFormPart.gif?alt=media&#x26;token=76759b3a-d2ad-4bd8-b6bc-cdb8550dcd79" alt=""><figcaption><p>Creating Custom Forms</p></figcaption></figure>

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.&#x20;

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.&#x20;

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:

1. Populated into a database,
2. Emailed to you, or&#x20;
3. Is sent to an API.&#x20;

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FNzCv2CDCa4BGFdT7Q3Go%2FFormActionsProperty.png?alt=media&#x26;token=d0e309ff-443e-4b72-aaa5-ee6091059a00" alt=""><figcaption><p>Form Actions Property</p></figcaption></figure>

### 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.&#x20;

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:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2F4sx1WEOl4fYU2eqZ6QNM%2FFormEmailFunction.png?alt=media&#x26;token=0f91d7e1-dd68-4edd-bcb6-2324dcf19419" alt=""><figcaption><p>Email Form Data: Step 1</p></figcaption></figure>

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

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2Fi76v6YO14n6U69HfanPC%2FFormEmailSetUp.jpg?alt=media&#x26;token=5526a059-9292-44af-8e1c-47dff0373d65" alt=""><figcaption><p>Email Form Data: Step 2</p></figcaption></figure>

Here is an example below:

<figure><img src="https://2904013950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MNFsr0mZTFrCZvHflb9%2Fuploads%2FWEIBy8EiiBiwGm6ke6Bb%2FFormsEmailData.gif?alt=media&#x26;token=4c4e57ba-c3d2-4e8d-ad8d-d76b09832881" alt=""><figcaption><p>Set Up Form to Email the Data</p></figcaption></figure>

More on this coming soon.

The next pages will cover the various forms parts, including how to edit each part.&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://appeggiohelp.gitbook.io/appeggio-help/forms.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
