> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use create forms and use inputs

TeleportHQ allows you to easily create and set up forms to collect leads, contacts or other submissions directly in your projects. Check out how easy it is to create a fully functional form.

${youtube}[How to create and manage forms](arNrBzX-OnQ)

| [1. How to access and manage forms](#2-1-how-to-access-and-manage-forms) | [2. How to create a form](#2-2-how-to-create-a-form) | [3. How to style a form](#2-3-how-to-style-a-form) |
| [4. How to set up a form (behavior and email notifications)](#2-4-how-to-set-up-a-form-behavior-and-email-notifications) | [5. How to view, manage and export submissions](#2-5-how-to-view-manage-and-export-submissions) | [6. Alternative end-point option](#2-6-alternative-end-point-option) |

## 1. How to access and manage forms

To **view and manage** all of the forms in a TeleportHQ project: Go to the **Left panel -> Forms section**.

Here, all of the forms in a project will be visible and if there are no forms, you can create one from this panel.

To navigate to a particular form from this panel, **click on the Layers icon** on a form.

To Delete a form from your project, click on the **Delete icon** on a form.

|| Keep in mind that deleting a form will also delete all of the submissions associated with it.

From the Forms section you can also increase the form limits of your Workspace. 

There are 4 tiers of Form expansions:

1. 2K Submissions/month and 5 Forms - 5$
2. 5K Submissions/month and 10 Forms - $10
3. 10K Submissions/month and 20 Forms - $15
4. 50K Submissions/month and 50 Forms - $50

| The current limits are 1 Form and 30 Submissions for Free accounts and 10 Forms and 2000 Submissions/month for Professional users.

![TeleportHQ Forms management tab](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-1-form-management_10utn6k.gif)

## 2. How to create a form

There are several ways to create a form in TeleportHQ:

**A. Use a premade form section**

To use a premade form:
* Go to the **Left panel -> Sections**
* **Search for Contact form**
* Select one of the** premade forms**

**B. Create a form using the AI Builder**

To create a form using AI:
* Go to the **Toolbar** at the bottom of the Canvas -> **AI Assistant**
* **Ask the AI Assistant to create a form **

|| The more information you give to the AI assistant the more accurate the form will be for your needs.

**C. Build manually**

To create a form manually:

* Go to the **Left panel -> Elements**
* Click or drag a **form element** in the project

![Ways to add forms in TeleportHQ](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-2-creating-forms_aotz2r.gif)

To add new fields to the form:

* Click on the **Form** element 
* From the **Right panel** click on the **Add elements button** in the first section
* Alternatively you can add elements from the **Left panel -> Elements -> Form section**

|| In order for your form to work, the Input and Button elements **must be children of your form container.**

![Adding new form elements to a form](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-2-adding-elements_ktpuut.gif)

## 3. How to style a form

To style any element of the form such as the main container, fields, labels or the button:

* **Select any of these elements**
* Use the **properties** from the **Right panel** to make styling changes

Read more about [__styling in TeleportHQ__](https://help.teleporthq.io/en/article/how-to-use-the-editor-to-style-your-website-1htlv5r/) to help you customize your form.

![How to style forms and form elements in TeleportHQ](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-3-styling-forms_648xpj.gif)

## 4. How to set up a form (behavior and email notifications)

Once a form is added to a project you can customize how it works, add security, limits and set up email notifications.

To open Form settings:

* **Select a form**
* From the **Right panel** click on the **green Manage button**.

In the settings tab of the new window you can customize the following:

1. **Name** - will change the name of the form for easier search and navigation.
2. **Confirmation message** - will change what happens when a form is successfully submitted
3. **Error message** - will change what happens when the form submission encounters an error

The options available for both the **confirmation and error message** are the following:

* **Clear the form** - Clears all of the fields and attempts to submit the form
* **Clear the form and show alert** - Clears all of the fields and displays a browser alert. You are able to customize the text of the alert
* **Redirect to a page** - Redirects the user to a page from the TeleportHQ project
* **Redirect to an URL** - Redirects the user to any URL
* **Show a component** - Displays a selected component under the Form element 

C. Notifications - decide if you want to receive email notifications with the information submitted and choose who else apart from the owner of the project will receive notifications

4. **Spam filter** - Add Google **reCAPTCHA** functionality to your form to prevent the form from being spammed
5. **Status** - Set an expiration date for the form after which submissions will no longer be permitted and set up a maximum submission limit

![How to set up a form's behavior](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-4-forms-settings_7gempw.gif)

## 5. How to view, manage and export submissions

Form submissions will be collected inside the Settings panel of each form. To view and manage the submissions for a form:

* **Select a form** in the project
* Go to the **Right panel** -> Click on the **green Manage button**
* Go to the **Submissions tab** in the settings window

### How to view your submissions

In the **Submissions tab** you will be able to **view all of the submissions as a list** and if you click on a submission you will see all of the **details of a submission**. You can also click on the **Toggle column filter** button to add or remove columns and reorder them.

![How to view TeleportHQ form submissions](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-5-list_5kdbqp.gif)

### How to manage your submissions

To **delete, export or report as spam** one or more submissions, check the box next to the submission and click one of the buttons above the submissions panel.

Use the **search functionality** in the top right hand corner to search for individual submissions.

![TeleportHQ form submissions list management](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-5-list-management-and-se_1bekioe.gif)

### How to export your submissions list

To export the entire list of submissions, click on the** Download submissions** button on the top right side of the window.

![How to export a submission list](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-5-list-export_1d1vtw6.gif)

### How to use AI to improve your form and analyze submissions

In the **Submissions tab** of the form window **click on the Purple AI button** to open the AI Assistant. This assistant will focus on your form and give insights about your form submissions, identify trends, troubleshoot issues, and understand your data better with AI-powered analysis.

Use the Quick prompts or write your own prompts to learn more about the form and submissions.

![How to use the AI assistant on a form](https://storage.crisp.chat/users/helpdesk/website/-/6/0/c/4/60c4bca58bb99c00/forms-5-list-ai-assisstant_jg743n.gif)

## 6. Alternative end-point option

If you do not want to have your submissions saved in TeleportHQ and want to add a different endpoint, perhaps something like [__Formsubmit.co__](http://formsubmit.co) you need to: 

* Select the **Form** element in the design canvas
* In the right inspector, open the **Attributes** section
* Copy and paste the URL of the server which will receive your data into the **Action** attribute of the form
* Set the **method** attribute to POST
* Set the Enctype to **application/x-www-form-urlencoded**

Follow all of the setup steps on the end-point’s website to ensure that the submissions are correctly sent.