How to build custom WordPress registration forms with Arengu

Introduction
How to build custom WordPress registration forms with Arengu

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

To install Arengu's plugin, go to your WordPress account > 'Plugins' > 'Add New' and write Arengu on the plugins search bar > Install Now, and it's already done!

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!

Enable or disable any of your endpoints in 'Arengu Settings'.

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!

Choose Registration Form template, and edit its fields and logics.

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!

Personalize fields, texts, colors... and whatever you need!

Add signup server-side logic, without coding

Arengu allows you to add user verification and authentication actions in different stages of your form, without coding skills. You just need create a flow with this structure:

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:

Reference the email variable and check the verification rules that you want to apply.

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!

Go to your form edition > 'Flows' > Select it from drill down on 'Step 1' > Publish.

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.

Remember to check data structure on 'Executions' tab to properly reference the variable!

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:

If email is valid, flow continues and we can order Arengu to register new user on our WordPress database, using a HTTP request.

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:

Paste the signup endpoint URL from WordPress on 'URL' field.
Fill in 'Body' field with email and password variables. Then, copy and paste WordPress Private API Key on 'Headers' field, including 'Authorization' header.

6. Manage WordPress registration's responses

To manage its responses, add an 'If/then condition' action and reference the variable:

Execute the flow and click on + to get 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!

Transform WordPress's error codes into personalized error message to show on the form.

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.

Get the variable from a failed execution in 'Executions' tab!

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!

Go to 'Forms' > Form edition > 'Share' tab, to get the shortcode.

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!

Just paste the code on WordPress text editor! That easy!

Click on preview or go to your public website to see how it looks!

Do you want to try it yourself? Install our WordPress plugin, sign up free or discover more about why to reinforce your form's user verification.

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!

Author

Andrea L. Lozano

Social Media & Content Specialist @ Arengu.

View Comments
Next Post

How to create and embed custom login forms in WordPress

Previous Post

New in! Arengu introduces social login implementation