# Tripetto

> Découvrez comment Tripetto permet de créer des formulaires hors ligne dans votre application avec des fonctionnalités de glisser-déposer, sans nécessiter de connaissances en code, et d'intégrer ces formulaires avec le composant Tripetto pour utiliser les données saisies par l'utilisateur.

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

**Tripetto vous permet de créer des formulaires hors ligne dans votre application. Avec le composant Tripetto, intégrez vos formulaires et utilisez les données saisies par l'utilisateur.**

[Image : Formulaire Tripetto sur tablette : choix de produits en images (champagne, ballon de basket, gâteau, lampe torche) avec leurs prix]

## Présentation de tripetto

[Tripetto](https://tripetto.com/) vous permet de créer de formulaires de différents formats : cases à cocher, menus déroulants, choix multiples, score... La création se fait visuellement grâce à un éditeur en drag and drop ne nécessitant aucune connaissance en code.

Tripetto vous offre plusieurs avantages :

- Il permet d'afficher votre formulaire et de stocker des données sans aucune connexion Internet
- Il est possible d'associer des actions à ce formulaire et de les utiliser dans un [workflow d'automatisation](https://docs.pandasuite.com/fr/essentials/components/webhook/) par exemple envoyer ces données par email ou sur un service externe (outil CRM).

> **Info**
>
> Les formulaires déjà insérés dans vos projets continuent de fonctionner, hors
> ligne compris : le composant enregistre le formulaire dans votre projet, votre
> app ne dépend donc pas de votre compte Tripetto. Un compte Tripetto payant
> n'est nécessaire que pour créer ou modifier un formulaire. Sans compte, la
> page [Formulaires](https://docs.pandasuite.com/fr/essentials/data/form/) présente d'autres façons de
> collecter des données, dont un formulaire sur mesure avec le composant Saisie
> de texte, qui fonctionne aussi hors ligne.

## Créer le formulaire

- Rendez-vous sur [tripetto.com](https://tripetto.com/) et connectez-vous à votre compte. Tripetto ne propose plus de compte Studio gratuit : créer ou modifier un formulaire demande un compte payant, à demander à Tripetto si vous n'en avez pas encore ([annonce de Tripetto](https://tripetto.com/blog/phasing-out-free-studio-accounts/)).
- Dans le Studio, créez un nouveau formulaire ou utilisez un template existant. Dans notre exemple, nous avons utilisé et simplifié l'[exemple Order Form](https://tripetto.com/examples/order-form/).

Il existe de nombreuses options pour personnaliser le style et le scénario logique du questionnaire. Pour toutes questions à propos de Tripetto, veuillez consulter leur [centre d'aide](https://tripetto.com/help/studio/).

[Image : Éditeur Tripetto du formulaire Order Form : blocs de questions et branches à gauche, aperçu du formulaire à droite]

- Quand votre formulaire est prêt, cliquez sur le bouton **Share**.
- Dans la fenêtre qui apparaît, sélectionnez la méthode : **Embed in a website**.

[Image : Panneau Share de Tripetto : la méthode Embed in a website est encadrée et une flèche montre le bouton Copy to clipboard]

- Cliquez sur le bouton **Copy to clipboard** pour récupérer le code

## Insérer le formulaire

Pour insérer le formulaire dans votre projet, rendez-vous dans PandaSuite Studio :

- Cliquez sur **Composants** et insérez le composant **Tripetto**
- Dans les propriétés, cliquez sur le bouton **Éditer** du contenu et collez le contenu à l'intérieur.

[Image : Fenêtre Contenu du composant Tripetto dans PandaSuite Studio, avec le code d'intégration collé et le bouton Valider]

- Votre formulaire apparaît quand vous double-cliquez sur la zone du composant.

> **Attention**
>
> À chaque modification de votre formulaire Tripetto, vous devez copier et
> remplacer le code.

## Déclencher une action quand le formulaire est soumis

Vous pouvez associer une action à la fin du formulaire :

- Sélectionnez le composant et cliquez sur **Actions**.
- Choisissez le déclencheur **Formulaire soumis (onSubmit)**
- Ensuite paramétrez l'action de votre choix, par exemple l'envoi de ces données vers un service externe ou le lien vers un autre écran.

[Image : Onglet Actions du composant Tripetto sélectionné : la liste des déclencheurs propose un seul choix, Formulaire soumis]

Pour envoyer ces données vers un service externe, il est nécessaire de créer un webhook via Integromat / Zapier à l'aide du [composant HTTP](https://docs.pandasuite.com/fr/essentials/components/http/).

## Utiliser les données du formulaire

Vous pouvez accéder aux données du formulaire ou associer une condition en fonction des données saisies par l'utilisateur.

Pour créer une condition en fonction des données :

- Soumettez une première fois le formulaire (depuis l'espace de création PandaSuite Studio) pour exposer les données : PandaSuite a besoin de cela pour comprendre les données.
- Ajoutez une [condition](https://docs.pandasuite.com/fr/essentials/components/condition/)
- Dans le champ **Cible**, sélectionnez le composant **Tripetto** et parcourez les données pour sélectionner la donnée de votre choix.
- Finalisez votre condition

[Image : Fenêtre Données de la Cible d'une condition : chemin Tripetto > Fields et données du formulaire]