Improve the security and personalize the UX of your WordPress forms! Easily create signup, login and passwordless forms and server-side logics, without coding.
Arengu's plugin is really easy to use and install, and it will help you blocking spam, avoiding fraud and fake users, and keeping clean your contact list. Let's have a look!
How to install the plugin in WordPress
On main menu, a new section will appear: 'Arengu Settings'. Here you can check the APIs that you want to enable on your account: singup, login or passwordless endpoints, and copy-paste their URL to redirect your form. That easy!
You can also find here the Private API Key that you will need to use to configure your form. Remember to keep it secret! Our's is just an example ;)
Create your signup form in Arengu!
To create your custom signup form, go to Arengu's editor and click on 'Forms' > 'Create a form' > Choose the template for registration forms to save time. It's editable!
Go to your new registration form, and click on 'Edit' to start customization! Rename it, change every text, add new fields and steps - just dragging and dropping - and completely personalize your form to make it fit on your site... perfectly!
Add signup server-side logic, without coding
But let's have a look, step by step, to how to easily build it!
1. Verify the email address
Go to 'Flows' > 'Create a flow' and add the first action: Verify email address, to check if the email address provided by the user is valid or not. To configure this action, you just need to reference the email variable, as you can see in the picture:
2. Connect this flow and the form
Before going on with this flow, we need to go back to form edition and click on 'Flows' section to link each other. Just select the flow from drill down on 'Step validations flow' stage, and click on publish to make them work together!
If you want to learn more about this, have a look to our post about how to connect flows on different steps and form stages!
3. Manage email verification's responses
Back on flow edition, we need to include an 'If/then condition' action after the verification to define what happens next in each case: if the email is valid or if it is not.
4. Show error message on the form
If email is not valid, we need to include a 'Show error message' action. This means that user will be notified on the form, showing a customized message:
5. Register new user!
Next step we should do is to register new users in our WordPress database, verifying first if the email is already registered. To manage this, include a 'HTTP Request' action and configure it as it is explained in next two pictures:
6. Manage WordPress registration's responses
To manage its responses, add an 'If/then condition' action and reference the variable:
7. Map error messages from WordPress
Include an 'Input value mapping' action to adapt WordPress database's error messages. Just take the 'error_code' variable from a failed execution and create a mapping table as you can see in the picture. You can also have a look to plugin's documentation to manage this configuration!
Include also 'error_message' variable in 'Default output value', to show other WordPress' error messages that could be unexpected or not included in mapping table.
8. Show the proper error message on the form
To notify the user, we need to include another 'Show error message' action and reference the proper output variable from 'Input value mapping' action.
9. Set session cookies
Include this action and get cookie variables from drill down, inside 'HTTP Request' action. Remember to include the domain and to check 'Enable secure cookie'!
10. And redirect your new user!
Include a 'Submit the form' action to close the flow! Just write the message and set destination URL... That easy!
How to embed your form in WordPress
Arengu's forms can be embedded in any post or page just copy-pasting a line of code. You can find it in your form's edition, on 'Share' tab!
Then go back to WordPress and open the post or page where do you want to embed it. Paste the code on the text editor, and update or publish!
Click on preview or go to your public website to see how it looks!
Customize also your login form!
Once your signup form is ready, you can also easily personalize your WordPress login form with Arengu, check here how to do it!