No results found. Try again with different words?

Search must be at least 3 characters.

    Introducing Login Form Module for Beaver Builder

    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.

    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.

    Was this article helpful?

    Did not find a solution? We are here to help you succeed.

    Related Docs

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Scroll to Top