Looking to add a custom login form or just need to add a Login Form with an option of Social Login? Don’t worry, UABB is bringing you the Login Form Module for Beaver Builder with such nice features.
Just drag and drop the Login Form on your Beaver Builder page, style and modify it as per your color scheme and your website is ready to welcome new users with a brand new login form.
Let’s see the Key Features –
- Custom Form – Username / Password
- Social Login support – Facebook / Google
- Option to hide custom form – login only with social buttons
- Custom redirects for Login & Logout
- Show / hide / customize labels
- Easy & 100% customization options
- Log In Button style options
- Field validation style options
Below are the key settings of the Login Form module –
Login Form Fields
On the initial drag and drop you will see the default WordPress Login Fields which are Username or Email Address and Password, Remember Me checkbox, Log In button.
They do have some styling different than the WordPress login form, but being able to style the labels, field style and also the message color takes it a step ahead.
You can even change the labels and display the Lost your password and Register button. And the Register button has an option to provide custom text and link to it. This will help you to provide your custom Registration Page URL. Read on How to Create a User Registration Form using Beaver Builder?
Also, you will have the option to provide custom redirects after a successful login or logout. Making it easier to create redirects as per your requirement.
And the last feature to take your login experience to the next level is the Social Login feature. You will have the option of Facebook and Google Login. For which you will need to get the respective client IDs from the Google console and Facebook’s developer console.
Presets
While working with UABB modules, you can simply choose any style from a list of professionally designed, sleek, and classic presets. Presets will help you quickly create great designs. You can select the preset of your choice here. But before changing presets, save the content, you added to the module. Otherwise, your content will be overwritten with the default one.
Custom Redirects
Need the user to be redirected to a custom URL, we can achieve this using the Login Form module.
Just enable these settings from the last section of the General Tab of the module. Add your URLs to where you would like the user to be redirected and you are done.
Social Login and Register
This feature of the Login Form will help your users log in to your website making it as simple as ever. On clicking on the respective Social Login, the user will just need to authorize the website and he will be logged in using his Social Profile.
In this age of social media, getting the users registered and logged in to your website in the simplest ways will only increase your registrations. Isn’t that, cool?
Visit the links, if you want to figure out the Steps to Create a Google Client ID and also for the Facebook App ID?
Style the Login Form
Under the Style tab, you will find styling options for the Login Form –
Form Style section: Set the background style, Form Padding, Border, Row Gap, spacing, etc.
Input Style section: Style the input fields from this section.
Checkbox Style section: The Remember Me checkbox can be styled from this section.
Error Message Style section: The error messages can be given some padding, change their colors, etc.
Login Button Style section: The Login button of the form can be styled from this section.
Social Button Style section: From here the Social Button can be made Inline or Stack and also manage the spacing between Facebook and Google Social Login buttons.