How to build custom WordPress registration forms with Arengu

Introduction
How to build custom WordPress registration forms with Arengu

Improve the security and completely personalize the UX of your forms, creating signup, login and passwordless forms, and adding server-side logic without coding.

Our 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 take a look!

Install the plugin in WordPress

To install Arengu's plugin, go to your WordPress account. Inside the 'Plugins' section, click on 'Add New', and write 'Arengu' on the search bar. Click on 'Install Now'... and it's done!

A new section will appear on the main menu: 'Arengu Settings'. Here you can check the APIs that you want to enable in your account: signup, login or passwordless endpoints. You'll need to get these URLs to set up your form.

You'll also find here your Private API Key. We will need it to configure your form, but remember to keep it secret! Ours is just an example ;)

Create your signup form in Arengu

Go to Arengu's editor and click on 'Create a form'. You can choose the registration form template to save time. It's fully editable and customizable.

Go to your new registration form, and click on the 'Edit' button to start the customization! Rename it, change every text, add new fields and steps - just by dragging and dropping - and completely personalize your form to make it fit on your site... perfectly!

Add server-side logic, without coding

Set up user verification and authentication actions in different stages of your form, without coding skills. We just need to build a flow with the structure you can see in the picture. Let's see how to create and configure it.

Create a flow connected with the form

Before going on with the actions, go to the 'Flows' section on your form edition page, and click on the + button to create a new flow on the 'Step validations flows' stage. If you want, you can learn more about it on this post about connecting forms and flows.

1. Add the 'WordPress Signup' native action

This is the first action we need to include, and it is really easy to set up: you just need to copy and paste a URL, your WP account API Key, and get two variables from dropdown.

To easily configure this action, you just need:

  • Registration endpoint URL from the plugin. Go to your WordPress account, copy this URL from 'Arengu Settings' section, and paste it in the 'Base URL' field.
  • API Key, also from your WordPress account. You will find it in the 'Arengu Settings' section. Remember that it is important to keep it secret.
  • Email + Password variables. Get both of them from the dropdown. If you need more information, you can check here how to reference variables in Arengu.
  • Redirect URL (optional). If we leave this field blank, the user will be redirected to his/her account page after form submission by default. If we want to change destination page, simply paste here the URL.

2. Manage WordPress responses

Include an 'If/then condition' action to define what happens next on the flow, whether the email is already registered or not. You can get the variable from the dropdown.

3. Show a custom error message

If the email is already registered, we need to notify the user, showing an error on the form. Include a 'Show error message' action, and write a custom message. Simply remember to be clear and friendly ;)

4. Or register the new user!

If the email is valid, we can now proceed to register our new user using a 'Submit form' action. Write a custom success message, and reference the 'login_url' variable from the sign up native action, to login your user. You can get it from the dropdown after an execution.

Now we simply have to publish this flow, clicking the button on the upper right corner, and embed it on our website. Let's see how to do it!

Embed the form in your WordPress site

Arengu's forms can be embedded in any post or page just by copy-pasting a line of code. You can find it in your form's edition, on the 'Share' tab, as you can see in the picture.

Go back to your WordPress account, and paste this code on the text editor in post or page where do you want to embed it... and just update or publish!

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

You can also click on preview before, to see how it looks in your website!

Build a custom login form too!

Once your signup form is ready, you can also create your WordPress login form in no time, and even build a passwordless login form. You don't need coding skills!

Do you want to try our editor? Sign up free and install our WordPress plugin to build your own WordPress forms. You can also learn more about why to reinforce user verification.

Author

Andrea L. Lozano

Social Media & Content Specialist.

View Comments
Next Post

How to create and embed custom login forms in WordPress

Previous Post

New in! Arengu introduces social login implementation