Back to contents

How to add a login form to the header built with Elementor

This tutorial explains how to add a login form to the header built with Elementor. Make sure you’ve installed JetBlocks plugin to have access to its widgets.

Nowadays there are more and more websites where you can have plenty of opportunities as a registered user, that’s why a login form is so important. With the help of the Login Form widget you can provide visitors with a way to enter information into a system in order to access more content. Usually, it consists of a field for the username, and another one for the password.

The most common place for such a form is in the header. With the help of Login Form widget, you can easily add such a form in a few clicks.

This tutorial will teach you how to add a login form using JetBlocks plugin.

Creating a login form

Step 1 — Log in to your WordPress Dashboard.

Step 2 — To add a Login Form widget to the pre-built Header navigate to Crocoblock > My Library and hit Edit with Elementor option to proceed with editing the needed header template.

Header in the Crocoblock library

Step 3 — In case if you want to change the header template, click the Magic Button option to open the templates library.

magic-button-option

Step 4 — Click the Headers tab, choose the pre-designed header you like and then click the Insert button.

Headers block in the Magic Button

Step 5 — After this, find the Login form widget in the Elements panel and drag it to the section where you want to place your login form.

login-form-widget

Step 6 — After that, you will see a login form in your Header template.

content-settings-login-form

Step 7 — There is a settings panel on the left. In the Content block you can customize the content fields, such as Username Label, Password Label, Remember Me Label, Log In Button Label, Redirect After Login Label, Logged In Label or leave it as it is. Also, you can change the style of the Login Form widget.

Content settings in Login Form widget

Step 8 — Afterward, click the Publish button. Also, you can click the Preview button in order to see how your new header looks like.

That’s all you have to do to create a login form using JetBlocks plugin. Congrats!