Customize WordPress login forms and make them look beautiful. Further improve user onboarding experience with social login support and many more advanced features.
Watch a detailed video about Login Form widget –
Let』s see how you can add Login Form with the comfort of Elementor. Start with dragging and dropping the Login Form.
Before moving forward with all the widget settings, let』s take a quick look at the key features –
Custom Form – Username / PasswordSocial Login support – Facebook / GoogleOption to hide custom form – login only with social buttonsCustom redirects for Login & LogoutCustom URL for Register and Lost your password Separator between Login Form and Social LoginShow / hide / customize labelsEasy & 100% customization optionsLog In Button style optionsField validation style options
Form Fields
In the Content tab, the first section you will see is Form fields. You have the option to either display the default WordPress Login labels, Custom or no labels.
Here you will also be able to Show/Hide the Remember Me field and set size for the input fields.
Social Login and Register
This is the next section, where you will be able to enable the Social Login for Facebook and Google.
Visit the following links, if you want to figure out the Steps to Create a Google Client ID and for the Facebook App ID.
You will need to add these IDs from the WordPress Dashboard under Settings > UAE > Login Form – Google Client ID/ Login Form – Facebook App ID.
We also have provided default skins for the Social Login like Dark (deafult) and another is Light.
Sometimes, you might provide both the login form as well as the Social Login for your users to login. So there you might need a separator asking them to either login using the Login Form or Social Login.
You will also have total control over the separator text and its styling.
Hide custom form fields – login only with social buttons
You can hide the form fields by using the Hide Custom Form setting and only display the Social Login using this the users can log in to your website.
Custom Redirects
Under the Additional Options section of the Content Tab, you will see the option to Redirect the User after Login or Logout to custom URL on your own website.
Just need to add the URLs to the respective page of the current website where you want the user to be redirected after a successful login or logout.
Custom URL for Register and Lost your password
Do you have a Custom User Registration Form and need to link it from the Register link under the Login Form.
We have got you covered, you just need to Show the Register button from the Additional Options section. And select the Custom URL under the Link to field.
Refer the below screenshot to find the screenshot where you will find this setting –
Style the Login Form
We have provided all the Styling options under the Style Tab. In the first Spacing section, you will be able to manage the spacing of the Form fields』 labels, and the top spacing of the separator, and Social Login spacing.
And in the next Form Fields section, you can update the Typography of the Labels, Input field, Remember Me Typography settings.
Social Login: From here you can manage the Social Login Alignment, Border Radius and Box Shadow.
Button: The button section allows us to manage the styling of the Button.
Field Validation Messages: You also have the control to manage the Field Validation and Error Messages.