# Tripetto

> Discover how the Tripetto component in PandaSuite allows you to create offline forms, integrate them into your projects, and interact with the data. Learn to customize, insert, and trigger actions upon form submission.

https://docs.pandasuite.com/essentials/components/tripetto/

**Tripetto allows you to create offline forms in your application. With the Tripetto component, integrate your forms and use the data entered by the user.**

[Image: Tripetto form on a tablet: product selection with picture choices (Champagne, Basket Ball, Cake, Flashlight) and their prices]

## Introduction to Tripetto

[Tripetto](https://tripetto.com/) allows you to create forms in various formats: checkboxes, dropdown menus, multiple choice, scores... Creation is visually done through a drag-and-drop editor requiring no coding knowledge.

Tripetto offers several advantages:

- It allows displaying your form and storing data without any internet connection
- It is possible to associate actions with this form and use them in an [automation workflow](https://docs.pandasuite.com/essentials/components/webhook/) for example, to send these data by email or to an external service (CRM tool).

> **Info**
>
> Forms already inserted in your projects keep working, offline included: the
> component stores the form in your project, so your app doesn't depend on your
> Tripetto account. You only need a paid Tripetto account to create or change a
> form. Without one, the [Forms](https://docs.pandasuite.com/essentials/data/form/) page describes other
> ways to collect data, including a custom form built with the Text Input
> component, which also works offline.

## Create the form

- Go to [tripetto.com](https://tripetto.com/) and sign in to your account. Tripetto no longer offers free Studio accounts: creating or editing a form requires a paid account, which you can request from Tripetto if you don't have one yet ([Tripetto's announcement](https://tripetto.com/blog/phasing-out-free-studio-accounts/)).
- In the Studio, create a new form or use an existing template. In our example, we used and simplified [the Order Form example](https://tripetto.com/examples/order-form/).

There are many options for customizing the style and logical scenario of the questionnaire. For any questions about Tripetto, please consult their [help center](https://tripetto.com/help/studio/).

[Image: Tripetto editor for the Order Form: question blocks and branches on the left, live preview of the form on the right]

- When your form is ready, click on the **Share** button.
- In the window that appears, select the method: **Embed in a website**

[Image: Tripetto Share panel: the Embed in a website method is framed, and an arrow points to the Copy to clipboard button]

- Click on the **Copy to clipboard** button to retrieve the code

## Insert the form

To insert the form into your project, go to PandaSuite Studio:

- Click on **Components** and insert the **Tripetto** component
- In the properties, click on the **Edit** button for content and paste the content inside

[Image: Content window of the Tripetto component in PandaSuite Studio, with the embed code pasted in and the Validate button]

- Your form appears when you double-click on the component area.

> **Warning**
>
> With each modification of your Tripetto form, you must copy and replace the
> code.

## Trigger an action when the form is submitted

You can associate an action at the end of the form:

- Select the component and click on **Actions**.
- Choose the trigger **Form submitted (onSubmit)**
- Then set up the action of your choice, for example, sending these data to an external service or linking to another screen.

[Image: Actions tab of the selected Tripetto component: the trigger list offers a single choice, Form submitted]

To send these data to an external service, it is necessary to create a webhook via Integromat / Zapier using the [HTTP component](https://docs.pandasuite.com/essentials/components/http/).

## Use the form data

You can access the form data or associate a condition based on the data entered by the user.

To create a condition based on the data:

- Submit the form once (from the PandaSuite Studio creation) to display the data: PandaSuite needs this to understand the information.
- Add a [condition](https://docs.pandasuite.com/essentials/components/condition/)
- In the **Target** field, select the **Tripetto** component and browse the data to select the data of your choice.
- Finalize your condition

[Image: Data window for a condition Target: path Tripetto > Fields and the form data (Champagne, Basket Ball, Cake…)]