Custom login forms with PrestaShop

If you don't know where to start with the code, or if you simply want to save time on developing and customizing your login form, here you have a module that will help you to build it, in a few minutes!

Drag and drop the module to install it

All you need to start using Arengu in your eCommerce is to install our free module. Open your PrestaShop account, go to 'Improve' > 'Modules', and drop this file to install it.

Create your form in no time

Open Arengu's editor, click on 'Create a form', and start one from scratch. Every template is fully editable, and they create proper flows automatically, so you can save a lot of time on creating really different use cases, but also on iterating and testing.

Use the drag and drop editor to add everything you need: rewrite texts, add hidden fields, new steps, edit colors, form navigation, etc. to make it fit on your site perfectly!

Verify user credentials, with a simple flow

Now we need to build a flow to validate user credentials by adding server-side logic, but no coding skills are required for it. Go to the 'Flows' tab, on your form edition page, and click on 'Create an empty flow'. You just need to set it up by following these steps!

1. Include a 'Login with password' action

Add this new PrestaShop native action and configure it. You can find both the base URL and the API key in your PrestaShop account, and simply copy and paste them in Arengu.

We also need to reference email and password variables here. Click on the drop-down menu on each field, as you can see in the picture above, and select them.

2. Manage PrestaShop responses

Branch different behaviors, depending on whether the email is already registered or not. Include an 'If/then condition' action, and get the proper output variable from drop-down.

3. Write a custom error message

Click on the 'Show error message' action, and write a message to show on the form. Simply remember to explain what has happened, and what do you need from the user, but feel free with the tone and the text!

4. Login and redirect the user

The last step is to include a 'Submit the form' action, and get the authenticated URL variable from drop-down. Remember to check the box 'Redirect to URL' before that! You can also customize the message that the user will see while being redirected.

Click on the 'Publish' button in the upper right corner to make it work, and then...

Embed your form anywhere

Go to the 'Embed' tab on the form edition page, and copy the 'Inline embed' piece of code to paste it in as many pages as you want to place your form in. Now your form is ready!

Do you want to try it by yourself? Sign up for free or schedule a demo with our team. If you prefer to learn more about the new PrestaShop native actions, take a look at how to build a custom signup form and a social login form. Hope to see you!