Login form for WordPress

Let's continue improving our WordPress forms security and UX. In this post we assume that your signup form is ready, so we are going to see how to easily personalize your WordPress login form too. It's an even easier process.

Start from template... and customize it

With our drag and drop editor, you can save a lot of time on creating your form's UI. Simply go to the 'Forms' section, click on 'Create a form' and, for this use case, choose the 'Login Form' template. You will be able to completely customize it in a few minutes.

Add fields or a second step, edit texts, change colors... but also set up verification flows and server-side logic without coding. Just remember to publish the form when it's done.

Add server-side logic, without coding

Once you have published the form, you can check that a flow has been automatically created and connected in the 'Flows' tab. Click on 'Preview flow...' to open its edition.

Follow these simple steps to set it up

As you will see, the automatically created flow will have this structure, you can check it in the picture below. Now we just need to fill in some fields to configure it.

1. Configure the 'Login with password' 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:

• Login endpoint URL from the plugin. Go to your WordPress account, copy this URL from the '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, by default, user will be redirected to their account page after form submission. If we want to change destination page, simply paste here the URL.

2. Manage the login action responses

After checking if the email is already registered, we need to manage those responses. We just need to complete the 'If/then condition' action and getting the WP response variable from the dropdown, as you can see in the picture:

4. Customize the login error message

If credentials are not correct, we need to notify the user. Simply include a 'Show error message' action, and write the custom message.

7. Login the user

Finally, just include a 'Submit the form' action, a custom the success message, and reference the 'login_url' variable from the sign up native action. Save changes, and publish the flow. Now your form is working, and ready to embed!

How to embed your form in Wordpress

Go to your form's edition, click on the 'Embed' tab, and get the shortcode. You simply need to copy and paste this line on your WordPress editor.

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 it. Your form is working from now!

Do you want to try it? Install the plugin, and sign up free. If you want to learn more about this, you can also check how to build a passwordless login form.