Arengu allows you to build flexible and personalized signup forms. You can build them in a simple way thanks to our low-code platform, and now you can also build your registration forms for PrestaShop too!
We introduce our brand new PrestaShop addon, that enables you to use your Arengu forms in PrestaShop sites. Easily create registration forms, login forms or even passwordless forms without coding and embed them in your PrestaShop site!
Today, we'll show you how to create a registration form, step by step, so you can start onboarding users in PrestaShop as soon as possible!
1. Install and configure the Arengu addon for PrestaShop
As you probably know, PrestaShop is a CMS oriented to e-commerces, that can be personalized with modules. To get the addon, simply download your Arengu module from Arengu's GitHub.
To add your Arengu module, open your PS account and click on Improve on the left-side menu. Under Improve, click on Modules. Here, you will be displayed with the Modules section. Click on Upload a module and drag a previously downloaded file.
Here you will also find the secret API key, that you will need in your form's setting as well. Remember not to share this key! 🤫 This must remain secret.
2. Create a signup form in Arengu
We will start by creating a form from scratch. Click on Create a form and select the template Blank form. You can edit every bit of any template, both in the form side and in the logic side, but this one comes as a white canvas.
We will now add four fields: name, last name, email and password. You can add any additional fields and steps! For instance, you could add a social login button to allow signup with your preferred social providers. You can also configure the field settings on the right-side menu.
3. Add server-side logic and configure the PrestaShop details
Once your form is ready, you can configure the PrestaShop details. Go to Flows and create a new flow. We will build a standard onboarding flow for a PrestaShop site, but keep in mind you can personalize the logic to your needs! Let's see how it's done step by step.
Check email in PrestaShop
Click on the first action of the flow: Check email. This action will check if the email the user entered is already registered or not.
To fill in the base URL and the API key, go to your PrestaShop account, where you'll find them under Settings. To fill in the email field, click on the drop-down menu and select the email field from your form.
If/then condition
This action triggers different actions, depending on whether the email was registered or not. If the email is new, the form will continue to sing up the user. If it already exists, you can remind the user to log in instead, for instance, with the action Show error message.
Signup in PrestaShop
Under the branching action, we will add the Signup in PrestaShop action, if the email entered is new to your database. Like in the previous PrestaShop action, you need to set some PrestaShop details: the base URL and the API key.
You also need to fill in some mandatory fields, by referencing the values in your form. To do so, simply click on the drop-down menu and select the proper reference, like you see in the example below.
Additionally, you can set a URL to redirect your users. If you don't fill in this field, the default URL will be the user's account page.
Submit the form
If no error is detected, the form will be successfully submitted. You can click on Submit the form to set a success message.
You also need to include the reference {{signup.body.login_url}}, that was generated in the PrestaShop action. This reference is an authenticated link that will log users in after they sign up. You can also use this reference to send your users an email with the authenticated link, among many other options!
4. Connect the flows and embed
In order for your forms to work properly, you need to connect your flows with the stages of your forms. To do so, go to Forms > Flows, and you will be presented with an overview of the different steps of your forms and the flows linked to each phase.
In this case, we have a single-step form with just one flow. Since we used a template, the flow is already linked. If you add more steps or more logic to your signup form, remember to link them here!
Now, you simply have to embed your form in your PrestaShop site. Go to Forms > Embed to find the different ways to embed your forms. Simply copy and paste the two lines of code including your form's ID in your PrestaShop site, wherever you like.
All further modifications of your form will be displayed without having to change anything or even publish on PrestaShop. As easy as that!
The Arengu addon for PrestaShop also allows you to build passwordless forms with magic links or one-time passwords, both for signing up or logging in. Want to be the first one trying the Arengu module for PrestaShop? Go ahead and try Arengu for free!
