The login form is an integral part of any user account. It improves behavioral factors, increases conversion, and allows the visitor to manage the profile efficiently. Once you have built a registration form and implemented it on your WordPress website, you’ll definitely need a login form too. Thanks to various WordPress form plugins, it’s easy enough to create one and insert it anywhere on the website. In this article, we’ll show how to build a WordPress login using the JetFormBuilder plugin.
Building a WordPress Login Form
Before we start creating a login form, we have to mention that you’ll need a specific JerFormBuilder tool for it — the User Login Pro addon. While the core plugin is absolutely free, some paid advanced features boost its functionality significantly. For example, it provides Address Autocomplete, Save Form Progress, Schedule Forms, Hubspot, MailerLite Action, etc. Visit the JetFormBuilder pricing page to get them. Also, you can download JetFormBuilder Pro addons for free if you are a Crocoblock All-inclusive subscriber — check your account or upgrade to Crocoblock All-inclusive here.
Now, let’s start with some setting up.
Step 1. Download JetFormBuilder free WordPress form plugin
Also, you can go to your WordPress dashboard and add a new plugin via the search bar:
Step 2. Adding a form
To create a new WordPress form, go to JetFormBuilder > Forms > Add New:
Name your form appropriately and delete the default blocks you won’t need:
Creating a WordPress login form manually
Step 3. Adding the required form elements
The login form consists of text fields (username and password), checkbox field (to implement Remember Me functionality), and log in button (action button). Let’s add them together manually.
Click “+” to add a block, find Text Field, and insert two of them:
Rename the fields appropriately and make them required, using an Is Required toggle:
To keep the user logged in for 14 days in a row, we need to add a Remember Me field.
Click “+” to add a block, or type “/checkbox,” find “Checkbox field,” and tap on it to insert.
Then, click the button “Manage items,” insert Remember Me label and put Value “1”. Don’t forget to save the changes.
The last thing we need to add is Action Button.
Again, click “+”, find “Submit Field,” (or Action Button) insert it, and change the label to Login:
Congrats! You’ve just created a login form manually.
Creating a WordPress login form with pattern
Step 4. Adjusting JetFormBuilder pattern
A pattern is a pre-coded layout, some templates of the most popular forms for you to save time and effort. You can adjust it according to your needs easily.
Click “+” to add a block, tap on “Browse all” and find the Patterns tab. Choose JetForms in a dropdown menu:
Find the Login & Register pattern in the list and click on it:
Now, we’re ready to edit the pattern and design a custom WordPress login form.
We won’t need all the fields, because it’s a login form. Delete the unnecessary ones and leave only Email and Password fields.
Give the right label to the Action Button — click on the button, find General Settings tab, and change Field Label:
Step 5. Adding Remember Me functionality
Let’s also add a Remember Me field. Click “+” to add a block, find “Checkbox Field”, and repeat the actions from Step 3.
Save all the changes and proceed to the following steps.
Step 6. Configuring Post Submit actions
Now, we need to set up the actions that will be performed on the page after the user clicks the Login button.
First, choose the appropriate Submit type — Page reload or AJAX (we’ll go for AJAX not to reload the page and transfer the data without interrupting):
Further, open the Post Submit Actions tab, find User Login and click “Edit”.
In the opened window, you’ll see the post submit action settings. Choose Email for Login field, Password for Password field, and Remember me for Remember me field.
In case you use HTTPS protocol for your website, toggle secure cookie toggle on.
Don’t forget to save the changes.
If you need the user to be redirected to a specific page after login, please, add and configure one more post submit action:
Also, you can insert custom text messages that appear after form submission:
Step 7. Styling the login form
JetStyleManager provides plenty of options for fine-tuning the form in Gutenberg. Once installed, you’ll see a brush icon in the upper right corner:
Play with the settings to style the blocks and make them match your website’s design.
For Elementor, you can use the styling settings that will be available after we display the form using the JetForm widget.
Step 8. Displaying the form on the frontend
There are many ways of displaying the newly created form in Gutenberg and Elementor — using widget or shortcode, inserting it in popup, and even displaying in other builders, like Divi, Blocksy, and Oxygen.
The easiest way to insert the form is to find the JetForm block in Gutenberg or JetForm widget in Elementor and choose the form to display:
To find more ways, check the detailed YouTube tutorial for more info.
That’s it for our WordPress login form creation guide. I Hope, it was clear enough for you to repeat. Using JetFormBuilder and User Login Pro addon simplifies the process significantly and saves your time, so don’t hesitate to try it. Also, you can always check a YouTube tutorial to follow visual instructions.