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. Login Forms 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 to the pre-built Header navigate to Crocoblock > My Library and hit Edit with Elementor option to proceed with editing the needed header template.

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

Step 4 — Click the Headers tab, choose the pre-designed header you like and then click Insert 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.

Step 6 — After that, you will see a Login Form in your Header template.

Step 7 — In the Content block on the left, you can add any sort of extra information, 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 your Login Form.

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

That’s all you have to do to create your Login Form. Congrats!