Guides & tutorials
Guides & tutorials
Reinforce your WordPress login security with this 2-step form and without coding! In this post, we assume that you have the plugin already installed and a custom signup form built. So, let's see how to do it!
Go to 'Forms' > 'Create a form' > Choose 'Blank Form' to completely customize it. You can edit templates but, this time, let's start from scratch!
Build a 2-step form like this to build a passwordless process. Step 1 should ask for an email, for example, and step 2 must include a number field to paste the OTP. Remember to check the 'Required' field option in both cases! Edit texts, labels, placeholders, colors...
To run our login passwordless form, we will need 2 flows. The first one is needed to check if email is already registered, and generate and send the one-time password. The second one will verify if the code in the form is correct to complete the login process.
To execute these actions, we need to create a flow with this structure:
First, include a 'Check email' WordPress native action to check if the email is already registered. To configure this action, you just need to follow the 3 steps below.
Before continue building the flow, go back to 'Forms' > 'Form edition' > 'Flows', and select this flow from the drill down on 'Step validation flows' > 'Step 1'. Remember to publish!
Do you want to learn more about step validation flows? Check this post about how to connect flows and forms.
After checking if the email is already registered, include an 'If/then condition' action and reference the WordPress response variable, as you can see in the picture:
If the email is not registered, we need to use a 'Show error message' action to show the proper message on the form, as you can see in the picture.
Next action to include in this flow is 'Generate one-time password'. This one is really easy to configure: just reference the input email variable, the code length... and save!
To configure this action you need to have a Mailjet account, and copy-paste the API Key and Secret Key. You should also indicate sender email and name, and look for the recipient email variable clicking on drill down.
Write your email's subject and reference the OTP variable on the message, for example, as you can see in the picture. You can find it, after publishing and executing the flow, in the drill down inside the OTP generation action.
Finally, include a 'Go to the next form step' action to redirect the flow to your form's second step. Test your own form to check if it is working properly!
Next step is to verify if the code pasted on the form is correct, and then complete the login process. To manage this, we need another flow with this structure:
Include a 'Verify one-time password' action, and reference email and OTP code variables. You can find them, after a flow execution, in the drill down, inside the 'Input data' section.
Go back to 'Forms' > 'Form edition' > 'Flows', and select this flow from the drill down on 'Before submission flow'. Remember to publish!
Back on the flow and after checking if the code is correct, include an 'If/then condition' action and reference its variable, as you can see in the picture:
If the OTP code is not correct, send to a 'Show error message' action, and custom the text to show on the form:
On the 'True' flow branch, include a 'Passwordless login' WordPress native action to send validated user data to WordPress!
To set up this action, you just need:
Simply add a 'Submit the form' action to write a custom success message, and reference the 'login_url' variable from the sign up native action. You can get it form the dropdown. Publish the flow... and now your form is ready to embed.
Arengu's forms can be embedded in any post or page just copy-pasting a line of code. You can find it in your form's edition, on 'Share' tab!
Then go back to WordPress and open the post or page where do you want to embed it. Paste the code on the text editor, and update or publish!