< All Topics

If you run a Membership or an E-commerce website, the Login/Signup feature is very crucial. First, the user has to create an account and then log in to the website to perform certain activities such as buying products, making payments, view courses, downloading media, etc. Also, it is very important to have a Recover Password form in case the user forgets their password which is very likely to happen. This is where our Login/Signup widget comes in handy.

Our Login/Signup widget makes it super easy to build these Register, Login, and Lost Password forms. Moreover, they come with different styles and layout options using which you can create stylish forms for your websites.

Pro tip
Don’t get too obsessed over the design of the Login/Signup/Lost Password forms. The most important tip here is to focus on User Experience. Keep the forms simple with all the essential elements and you are good to go. We have created some awesome forms for inspiration. Have a look at them and start building yours.

How to use the Login/Signup Widget of The Plus Addons For Elementor

The Login/Signup widget offers multiple ways using which we can set up these forms. Apart from that, we also added the Social Login feature. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps

Search for the WP Login & Register widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Forms Layout

Select

Select the type of form from the dropdown. The given options are:

Login
Register
Login/Register
Forget Password

If you want to create a separate page for Login, select Login from the dropdown.

Similarly, if you want to create a separate page for Register, select Register from the dropdown.

And, if you want both the Register and Login forms on the same page, select Register/Login from the dropdown.

Use the Forget Password dropdown for creating the lost password page so that your website users can easily reset the password in case they forget it.

For this tutorial, we are selecting Login/Register from the dropdown. But. don’t worry, even if you select Login, Register, or Lost Password, the options are similar.

Select Style

Select your preferred form style from the dropdown. The options provided are:

Standard Form
Button Hover
Button Click
Button Popup

Based on the selection you make above, options related to that particular form style will be displayed. We have explained all the possible options below.

Dropdown Alignment

This option comes up if you select the Button Hover or Button Click form style. Set the alignment of your form to left, right, or center.

Button Alignment

Set the alignment of your form button to left, right, or center.

Form Content Alignment

Set the alignment of your form’s position to left, right, or center.

Signup Form Extra Options

Display Name Field

Enable or Disable both the First/Last Name field.

Display First Name Field

Enable or Disable the First Name field.

Display Last Name Field

Enable or Disable the Last Name field.

Display Username Field

Enable or Disable the username field.

Display Password Field

Enable or Disable the Password/Confirm Password field.

Strong Password

This option is displayed after you enable the Password field as mentioned above. This option shows the strength meter for the password your website visitors set.

reCAPTCHA v3

Enable or Disable the Google reCAPTCHA v3.

Mailchimp Subscribe

Enable or Disable to show the Mailchimp Email Newsletter Subscription checkbox.

Terms and Conditions

Enable or Disable the Terms and Conditions checkbox.

New User Role

Set your preferred user role after signup. The recommended role is Subscriber. (WordPress User Roles Explained)

Form Heading

Heading Text

Enable to add a custom Heading Text above the forms. Disable to hide it.

Login Heading

Insert your login heading text content here.

Registration Heading

Insert your registration heading text content here.

Left Side Template

Left Side Template

Select your preferred template from the dropdown to be added to the left-hand section of your form widget.

Click/Hover/Popup Button

Common Button Text

Insert a custom text for the Click, Hover, and Popup button.

Icon Library

Hover and click to add an icon from the library or you can add a custom SVG icon image. Click the + icon to delete the image.

Close Button

Slide the button to Yes to enable this button and No to hide it.

Choose Image

Add a custom PNG or SVG image for the Close button. Click the + icon to delete the image.

Login Options

Login Tab Title

Insert your login tab title text here.

Form Label

Slide the button to Yes to keep the default form label and No to hide it.

Form Custom Label

Slide the button to Yes to edit the default form label. Add your own custom label to the form fields (username and password) using this option.

Login Button Text

Want to change the default Login button text? Use this option and add one of your choices.

Remember Me

Slide the button to Yes to keep the default form label and No to hide it.

Remember Me Text

Want to change the default Remember Me button text? Use this option and add one of your choices.

Lost your password

Slide the button to Yes to keep the default form label and No to hide it.

Lost your password text

Add your custom text for Lost Password

Register

Slide the button to Yes to keep the default form label and No to hide it.

Register text

Add your custom text instead of the default Register text.

Register link selection

Add a custom link instead or use a default link.

Redirect After Login

Slide the button to Yes to enable this option. Add a custom link of your choice where you want to redirect your users after they log in. For eg: redirecting a user to the homepage after they login to your website.

Register Options

Register Tab Title

Add a custom title for your registration form section.

Form Label

Slide the button to Yes to keep the default form label and No to hide it.

Form Custom Label

Slide the button to Yes to edit the default form label. Add your own custom label to the form fields using this option.

Mailchimp & Terms of Conditions

Change the default text content and add your own here.

Form Custom Placeholder

Add custom placeholder names instead of the default ones.

Redirect After Register

Slide the button to Yes to enable this option. Add a custom link of your choice where you want to redirect your users after they register. For eg: redirecting a user to a Thank you for registering page after they signup to your website.

Login

Slide the button to Yes to enable this option.

Login Link Selection

Keep it default or if you want to set a custom URL, select Custom from the dropdown.

Login Before Text

Add your custom Login Before text here.

After login panel

Slide the button to Yes to enable the login panel.

Additional Bottom Message

Change the Additional message text over here.

Register Button Text

Add a custom text for the Register button.

Social Login/Signup

Note: You need to add App ID (Facebook) and Client ID (Google) from The Plus Settings – Extra Options to make the Social Login/Signup feature working.

Facebook

Slide the button to Show to enable the Facebook login option for your form.

Google

Slide the button to Show to enable Google login option for your form.

Alignment

Set the position of your Social buttons to left, right, or center

Redirect URL

Slide the button to Yes to enable this option. Add a custom link of your choice where you want to redirect your users after they log in. For eg: redirecting a user to the homepage after they login to your website.

Hide Form

Enable this option to hide the Social Login Form.

Lost Password Options

Lost Password Label

Add your custom label to replace the default lost password label.

Lost Password Placeholder

Add your custom text to replace the Lost Password field default placeholder text.

Lost Password Button Text

Insert your custom text to replace the Lost Password default button text.

Lost Password Heading

Insert a heading text for your Lost Password form.

My Account Panel

My Account Panel

Slide the button to Yes to enable the My Account option after the user’s login to the website. Just like a simple user dashboard.

Alignment

Align the position of your My Account Panel to left, right, or center.

Standard Layout

Slide the toggle button to enable/disable the standard layout.

User Avatar

Slide the toggle button to enable/disable the user avatar.

User Name

Slide the toggle button to enable/disable the user name.

Edit Profile

Slide the option to Yes to enable the Edit Profile option.

Edit Profile Text

Add your custom text in for the Edit Profile option.

Logout Text

Slide the option to Yes to enable the Logout option.

Custom Logout Text

Add your custom text in for the Logout button.

Extra Menu

If you want to add an Extra Menu item to your Account Panel, this option comes in handy. Easily, add custom menu items to your panel.

Click the Add Item button and then add the Title and Link and you are done.

Notification Message

Change the default notification text of all the register, login, and lost password forms here.

  1. Loading Text
  2. Success Text
  3. Email Validate
  4. Error Text

Reset Password Options

Reset Strong Password
Select your icon option using the dropdown.

Register and Logout Field Layout Size

Use the slider to set a separate width of each form field. Click the icon to set different widths for Desktop, Tablet, and Mobile devices.

2. Style

Form Label

Use the slider to set a separate width of each form field. Click the icon to set different widths for Desktop, Tablet, and Mobile devices.

Form Input Fields

Use the slider to set a separate width of each form field. Click the icon to set different widths for Desktop, Tablet, and Mobile devices.

Form Button

Use the slider to set a separate width of each form field. Click the icon to set different widths for Desktop, Tablet, and Mobile devices.

Heading Option

Use the slider to set a separate width of each form field. Click the icon to set different widths for Desktop, Tablet, and Mobile devices.

Register Additional Message

Use the slider to set a separate width of each form field. Click the icon to set different widths for Desktop, Tablet, and Mobile devices.

And Many Similar Styling Options

All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Tutorial

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Need help?