Create A Custom Google Login Form with Elementor

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

1. 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.
2. 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

1. Once on the project dashboard, go to API & Services > OAuth consent screen
2. Choose the User Type as “External” and click Create
3. Enter a suitable name for your Application (maybe “Google Login”) under the “App name” and select your email address as the support contact email.
4. 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.
5. 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

1. Under the same menu (API & Services), click on Credentials > Create Credentials > OAuth Client ID
2. Choose “Web Application” from the dropdown as the Application Type
3. Give the application a name, say “Web App for Login Form”
4. Click “Add URL” under Authorized JavaScript Origins. Enter your website URL which must be exactly your domain name. e.g. https://your-site-url.com without any subdomains. Click Create
5. Copy the Client ID that you will now see in a pop-up screen.
6. 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.