How To Create WordPress Login Form With JetFormBuilder (Step-by-Step Guide)

1 day ago | Prof. Triston Hermann III

How To Create WordPress Login Form With JetFormBuilder (Step-by-Step Guide)

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.

Getting ready

Step 1. Download JetFormBuilder free WordPress form plugin

Go to jetformbuilder.com or wordpress.org to download the plugin.

Best App Wiki 87

Best App Wiki 68

Also, you can go to your WordPress dashboard and add a new plugin via the search bar:

Best App Wiki 37

Step 2. Adding a form 

To create a new WordPress form, go to JetFormBuilder > Forms > Add New:

Best App Wiki 4

Name your form appropriately and delete the default blocks you won’t need:

Best App Wiki 73

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:

Best App Wiki 76

Rename the fields appropriately and make them required, using an Is Required toggle:

Best App Wiki 68

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.

Best App Wiki 13

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:

Best App Wiki 28

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:

Best App Wiki 83

Find the Login & Register pattern in the list and click on it:

Best App Wiki 71

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.

Best App Wiki 56

Give the right label to the Action Button — click on the button, find General Settings tab, and change Field Label:

Best App Wiki 28

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.

Best App Wiki 62

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):

Best App Wiki 23

Further, open the Post Submit Actions tab, find User Login and click “Edit”.

Best App Wiki 20  

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.

Best App Wiki 53

If you need the user to be redirected to a specific page after login, please, add and configure one more post submit action:

Best App Wiki 94

Also, you can insert custom text messages that appear after form submission:

Best App Wiki 54

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:

Best App Wiki 71Best App Wiki 59

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:

Best App Wiki 80Best App Wiki 91

To find more ways, check the detailed YouTube tutorial for more info.

Afterword

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.

YOU MAY ALSO LIKE

Six Types Of Password Attacks & How To Prevent Them

Six Types Of Password Attacks & How To Prevent Them

There are many different ways someone can try to access your password-protected information. Here are six of the most common…

9 Most Worst Passwords You Should Never Use

9 Most Worst Passwords You Should Never Use

With technological advancement, everything has changed. We live in the world of mobile phones, PC and laptops. We do everything…

Can’t Log In Or Sign In To Snapchat Or “Could Not Connect”? How To Fix!

Can’t Log In Or Sign In To Snapchat Or “Could Not Connect”? How To Fix!

People all over the world use Snapchat, which is one of the most popular social media app. While it doesn't keep track of…

What Is Firebase Authentication?

What Is Firebase Authentication?

What is firebase authentication? Firebase is a mobile and web application development platform. It was created by Google…

How To Login To Disney Plus On TV? Tips To Get It On Smart TV

How To Login To Disney Plus On TV? Tips To Get It On Smart TV

Do you want to know how to log in to Disney Plus on your TV at homes, such as a Samsung smart TV, Apple TV, Amazon Fire…

Login LINE / Create A LINE Account

Login LINE / Create A LINE Account

This article will explain how to get started with LINE Login only with some simple steps. Method 1: Get LINE Account Using…