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.
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.
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.
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.
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:
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:
If credentials are not correct, we need to notify the user. Simply include a 'Show error message' action, and write the custom message.
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!
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.
Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.