How to create and embed custom login forms in WordPress

Introduction
How to create and embed custom login forms in WordPress

Let's continue improving our WordPress security and its signup and login UX! Once your signup form is ready, you can also easily personalize your WordPress login form with Arengu. It's an even easier configuration! Discover how to do it!

Start from template... and personalize it!

Go to 'Forms' > 'Create a form' > 'Login Form' template, to save time on creating your form's interface with our drag-and-drop editor!

Add fields or a second step, change texts... and configure new verification flows and server-side logic!

Edit the template and publish changes to personalize it.

Set server-side logic, without coding!

To make your login form work properly, you just need to create a flow with this structure:

Go to 'Flows' and create a new flow. Start it adding a 'HTTP request' action.

Let's see it, step by step!

1. Check if user is already registered

The first step in our login flow is to include a 'HTTP request' action to check if user is already registered in our WordPress users database. To configure this action, copy the login endpoint URL from WordPress > 'Arengu Settings', and paste it on the URL field.

Paste the login endpoint URL from your WordPress account > 'Arengu Settings'.
Reference your form's variables and paste your WordPress Private API Key.

Also in this action, reference the needed variables on body field, paste your WordPress Private API Key with 'Authorization' header, and also check the option 'Accept any status code as successful request', to make this action work properly. Save and publish it.

If you didn't use the template, and before next steps, go back to form edition and click on 'Flows' section to connect each other. Select the flow from drill down on 'Step validations flow' stage, and publish!

Go back to form edition > 'Flows' > Select the flow from drill down > Publish.

If you used the template, flows will be automatically connected ;)

3. Manage the HTTP request responses

After making the HTTP request to check if user is already registered and logged in, we need to manage that responses. We can handle this including an 'If/then condition' action and referencing WordPress response variable, as you can see in the picture:

Reference WordPress response variable on 'If/then condition' action.

4. Custom login error messages

We can show on the form personalized error messages. To manage this, include an 'Input value mapping' action, reference the input variable, default output value, and list errors and messages in the mapping table. Have a look to the plugin's documentation to easily handle this!

List errors on mapping table, you can find them on plugin's documentation.

5. Show error messages on the form

Include a 'Show error message' action to close this branch. Just reference the output variable from 'Input value mapping' action.

Reference the variable from 'Input value mapping' to show proper error on the form.

6. Set session cookies!

You can include this action to keep your user's session open, but it's optional! Look for cookie variables clicking on drill down icon (+), after executing the flow once. Set here also session duration and domain, and remember to enable the checkbox!

Set cookies to keep your user's session open.

7. Login the user!

Finally, just include a 'Submit the form' action, custom the message and destination URL, save... and publish! Your form is ready to embed!

Remember to set destination URL and a message to show just before!

How to embed your form in Wordpress

Just go to your form's edition > 'Share' tab and get the shortcode!

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

Go back to WordPress and open the post or page where you'd like to embed it. Paste the shortcode on the text editor, and update or publish!

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

Do you want to try it yourself? Install our WordPress plugin and sign up free! Hope to see you soon!

Author

Andrea L. Lozano

Social Media & Content Specialist @ Arengu.

View Comments
Next Post

How to create a passwordless login form in WordPress

Previous Post

How to build custom WordPress registration forms with Arengu