You can start building the most common use cases, for any tech stack, with the available and fully-editable form templates, which you can access by clicking on the button 'Create a new form'.
Once you have selected the use case, choose the technology in which you are going to use it. The editor includes native actions for PrestaShop and WordPress that will make it much easier to connect your forms with them, so simply click on the best option for you.
It is also easy to integrate common external services, like an email or SMS sender. The wizard will allow you to choose and include it automatically, in addition to allowing you to activate the social login. The wizard will create a completely customized form.
Style and customize your form
Once the form is created, you can fully customize it in the 'Form edition' tab, by directly clicking on the field to change texts, placeholders, etc. Simply add new fields by dragging and dropping them from the left menu, or reorder them inside the form steps.
You can also change the fonts, the colors and the style of the buttons in the 'Design' tab, using specific color pickers. If you have CSS skills, you can use all these styling variables to perfectly adapt the form to your brand guidelines.
Add server-side logic to your form
Once the form is customized and published, we simply need to finish configuring the flows that have been created automatically with the template. You can see the flows linked with your form in the 'Flows' tab, inside your form's edition page.
Flows are groups of actions that determine what happens with the data input in the form, that the user or any external service has included in it. They are in charge of executing server-side logic to manage the data as we need.
If you don't have coding skills, you can use the templates to easily set them up. When choosing a template, the form and their flows will be automatically built and linked, so you only have to copy and paste a couple of data to make them work. This is an example:
If you have built the form from scratch, you can create and link them from this page. To know more, check this article about how to create and build flows ↗️
Native integrations
To integrate the external services that are available on the editor (like Mailjet, SendGrid, Twilio...) you will only have to copy and paste a few data from your account in that service. Once you have opened the flow, click on the action to open its edition, and copy and paste the required data from your account in that service, as you can see on the picture.
The required data may vary between services: API key, Account ID, Auth token... but the names of the fields that appear in our editor will always match the ones that the external service uses. In addition, in the documentation and the tutorials for each use case we show you exactly where they are, including screenshots, to make them easier to find.
Plugins to integrate with common CMS
You can also integrate these forms and flows in your WordPress and PrestaShop websites using arengu's plugin. You just have to install it and copy and paste a few data in the specific native actions, which are very similar to the previous ones.
To set up these actions, simply go to the plugin settings in your WordPress or PrestaShop account, and copy and paste the API key and a specific URL for each use case. They are all properly identified with the name in the settings section.
Reference variables from your form
If you add a new field to a form built from a template, or if you start it from scratch, you will need to use variables to manage input information in the linked flows. The editor allows you to get them from the dropdown on each field, when setting up new actions. We use the {mustache} format, but you can learn here more about how to reference variables ↗️
If you are not used to them, you should know that variables are used to store information to be referenced and managed in flows, labeling data with a descriptive name. It might be helpful to think of variables as the containers that hold the input information from a field, although they can refer to many other data from native actions and external providers.
Integrate with any API
If you have coding skills, you can use the 'HTTP Request' action to integrate any external service with API, even your own ones. This means that you can actually use the flows to integrate anything you need in a unique process, and completely customize the UX of the authentication processes of any provider: Auth0, Firebase, Okta developers...
To build and set up custom flows, build the structure selecting actions from the menu, and click on them to open the edition mode. To configure them you will only need to customize error messages and reference the proper variables, that you can get also from the drop-down menu.
You can also store output variables from an external service, in order to use them all the flows linked to a form, with the 'Store state variable' action. You just need to indicate the variable and give it a name, which you can reference in the rest of the flows of the form.
Test your form and embed it
Once the form and the flows are configured, go back to your form's edition page and click on the 'Preview' button to test it. After using the form, you can check if it has gone right on the 'Submissions' tab. In the 'Share' tab you can also get the proper code to embed it.
