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 'Share' 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!