If you want to move away from the default login page, the new login widget offered by Ultimate Addons of Elementor is a great choice. It provides a host of features to create a fully customized login page using the power of Elementor. This article will however specifically focus on creating a custom Google login form.
Creating customised Google login forms is not difficult anymore. Using the login widget and Elementor’s powerful page builder, we can fully customize the entire login/registration process. One of the biggest advantages of setting up Google login is because it can reduce the friction for users to register.
With a simple click, users can login with their Google credentials making it a more seamless process.
Adding a custom Google login form widget to your page
Before we move on to configuring the social login, let’s look at some of the features provided by the widget:
- Custom Form Labels for both Username & Password fields
- One-click registration and login via Facebook and Google – this article will focus only on Google
- Option to hide the default fields and allow visitors to login only with social buttons
- Custom redirects for Login & Logout
- Custom URL to Register and Password Recovery
- Various styling options for fields, buttons etc.
Setting up Google Login Form
In this section, we’ll look at how to set up a custom Google login form on Elementor. One of the biggest advantages of setting up Google login is because it can reduce the friction for users to register.
With a simple click, users can login with their Google credentials making it a more seamless process. To configure Google login, you’ll need a Google Client ID.
Configuring Google Client ID
Step 1: Create a project
- Register your website on Google Cloud Platform at https://console.cloud.google.com. You will need to be logged in with your Google Credentials and activate a free trial by signing up.
- Create a project by clicking on the dropdown and clicking “New Project”. Fill in the relevant details and you will be prompted to the project dashboard.
Step 2: Create an OAuth App
- Once on the project dashboard, go to API & Services > OAuth consent screen
- Choose the User Type as “External” and click Create
- Enter a suitable name for your Application (maybe “Google Login”) under the “App name” and select your email address as the support contact email.
- Scroll down to Authorised Domains under App Domain section and click Add Domain. Enter your website address without any https in the beginning and subdomains in the end.
- Enter a developer email address (can be the same as in Step 5) and click “Save and Continue“. Ignore the rest of the 3 steps until prompted to go back to the dashboard.
Step 3: Create OAuth Credentials
- Under the same menu (API & Services), click on Credentials > Create Credentials > OAuth Client ID
- Choose “Web Application” from the dropdown as the Application Type
- Give the application a name, say “Web App for Login Form”
- Copy the Client ID that you will now see in a pop-up screen.
- Back on your website dashboard, go to Settings > UAE > Click Settings next to Login Form. Scroll down to Login Form – Google Client ID section and paste the Client ID from Step 5.