Form (Tripetto)

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

Go to tripetto.com and create a free account.

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 Share button.

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.

In the 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

Click on Actions.

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.

Select Webhooks and click the Continue button.

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 Save.

Back in the previous window, you will see the Integromat webhook URL that you can copy to your clipboard. It looks like this:

https://hook.integromat.com/iduhiohdzoudzouopdupdz

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 HTTP component.

In the Properties window, insert the URL of the webhook in the URL field.

Choose as POST method: this method is used to send data.

Send data to Gmail

Select the Form (Tripetto) component, choose the Submitted Form trigger (onSubmit) and create a new action > Interact with a component > HTTP > Start request.

Click on the Dynamic Data icon and add a content field:

[param:fields]

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: Successfully determined

You can now add a new Gmail module to create a message. Click on Add another module and select Gmail.

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.

Click OK to validate your scenario.

Test

Test it and here is the result: