Help Center

How to Add a Login Form to the Header

How to Add a Login Form to the Header

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

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 the Login Form widget, you can easily add such a form in a few clicks.

This tutorial will explain how to add a login form using the JetBlocks plugin.

Log in to your WordPress Dashboard.

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

Header in the Crocoblock library

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

magic-button-option

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

Headers block in the Magic Button

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

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

content-settings-login-form

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

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

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

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.