The Form (Tripetto) component helps you integrate a form created from the Tripetto service, display it offline in your application and create actions - we'll see in this article how to send data by email using Gmail.
Tripetto allows the creation of classic forms with checkboxes, drop-down menus, text, multiple choices, numbers... The creation of forms and surveys is done in a visual way, thanks to a drag and drop editor requiring no knowledge of code. And it's free!
The Form (Tripetto) component has several advantages:
- You can display the form and store data without any Internet connection
- It is possible to create actions related to this form and set up a workflow: for example to send this data by email or to an external service (CRM tool). In this case, it is necessary to use the HTTP component to create a webhook via Integromat or Zapier.
Create a form with Tripetto
From the Studio, create a new form or use an existing template. In our example, we have used and simplified the
Order Form example
There are many options to customize the style and logic of the questionnaire. If you have any questions about Tripetto, please visit
their help center
When your form is ready, click on the
In the window that appears, select the method:
Embed in a website or application and the option:
Self-host the form definition.
In the Embed type drop-down menu, select
Snippet (inline with other content) and copy the code.
Insert the Form (Tripetto) component
Go to PandaSuite Studio. Click on
Components and insert the
Form (Tripetto) component in your application.
Properties window, click on
Edit and paste the code into the Editor.
Your form appears when you double-click on the component area.
⚠️ Each time you make changes to your Tripetto form, you must copy and replace the code in the component properties window.
Trigger an action when the form is submitted
A trigger is available:
Form submitted (onSubmit) which allows you to trigger the action of your choice, for example sending this data to an external service or linking to another screen.
To send this data to an external service, it is necessary to create a webhook via Integromat / Zapier using the HTTP component.
Send data by email (Gmail)
In this example we will explain how to send the form data by email, via Gmail.
To send the data to Gmail, you must first prepare a webhook and script on Integromat or Zapier and then insert an HTTP component to make the connection. We chose Integromat for this example.
Create a webwook Integromat
Go to https://www.integromat.com/.
Create an account, then create a new scenario.
Webhooks and click the
In the Triggers list, select Custom webhook:
Then click on the
Add button to define a new webhook.
In the window, you can customize the name of the webhook and click on
Back in the previous window, you will see the Integromat webhook URL that you can copy to your clipboard. It looks like this:
You will need it to configure your HTTP module in PandaSuite. Click on the
Determine data structure button.
Insert the HTTP component
Back to PandaSuite Studio. Click on
Components and insert an
Properties window, insert the URL of the webhook in the
Choose as POST method: this method is used to send data.
Send data to Gmail
Form (Tripetto) component, choose the
Submitted Form trigger (onSubmit) and create a new action >
Interact with a component >
Click on the
Dynamic Data icon and add a content field:
Launch the web preview and fill in the form to run the query once.
Create the Gmail module
Now that you have made an initial query, Integromat can determine the new structure.
Back in your Integromat scenario, a message appears:
You can now add a new Gmail module to create a message. Click on
Add another module and select
In the list of messages, choose
Send an email. In the
Body field, enter the body text using the fields brought up from your test.
OK to validate your scenario.
Test it and here is the result: