Login | Register Form: Social Login & reCAPTCHA

With the EA Login | Register Form element, you can now design stunning login or registration forms in Elementor without any coding. However, to enable social login & reCAPTCHA for your login registration forms, you need to get the respective API keys first.

How To Configure reCAPTCHA For Your Login Register Form #

To enable reCAPTCHA for your login register form, you will need to sign up for an API pair key for your site. The key pair includes a site key and a secret key. 

Step 1: Register A New Site #

To register a new site, first enter the site name in the input field under the ‘Label’ section and then choose reCAPTCHA v2  as your reCAPTCHA type. Next, add the domain link and the email addresses of the domain owners. 

Social Login reCAPTCHA

Afterward, simply check to accept the ‘Terms of Service’ and click on ‘Submit’.

Social Login reCAPTCHA

Step 2: Configure EA Login | Register Form Settings  #

After completing the above step you will be redirected to a new page where you will be able to see your site key and secret key. Copy both of these keys and head back to your WordPress dashboard.

Social Login reCAPTCHA

From your WordPress dashboard navigate to Essential Addons→ Elements and scroll down until you find the ‘Form Styler Elements’. Find the Login | Register Form and click on ‘Settings’.

Social Login reCAPTCHA

Step 3: Insert Your Site Key And Secret Key To Enable reCAPTCHA #

When you click on the settings for Login Register Form, a popup window will appear. Simply paste the site key and secret key that you had copied earlier to enable reCAPTCHA on your website. Then, make sure to hit the ‘Save Settings’ button.

Social Login reCAPTCHA

Step 4: How To Configure The Content & Style your reCAPTCHA #

You can style your reCAPTCHA by going to the ‘Style’ tab and changing the options under the ‘Login Form reCAPTCHA’ section. From here, you can change the margins for your reCAPTCHA, choose between a light or dark theme and change the size to compact. For more information follow this documentation here.

EA LOGIN REGISTRATION FORM

By following these basic steps you will be able to enable reCAPTCHA for your login registration forms on your website. 

How To Configure Social Login For Your Login Register Form #

You can enable social login for your login register form using Google and Facebook. Follow this below guideline to configure Social Login with Google and Facebook:

Step 1: How To Configure Social Login With Google #

Head over to developers.google.com and sign in to your account. Afterward, open the Google API Console Credentials page by clicking on the Credentials tab from your dashboard and click on the ‘Create Credentials’ button at the top to get started.

Social Login reCAPTCHA

 

When you click on the ‘Create Credentials’ button a drop-down menu will appear. Select OAuth Client ID from the options available as shown below.

Social Login reCAPTCHA

Next, set your application type to ‘Web application’ and give it a name. If needed, add a redirect URL. Click on the ‘Create’ button when you are done.

Social Login reCAPTCHA

Once this step is completed, a pop-up will appear displaying your Google client ID. Copy it as you will need it to enable Google Login on your website.

Social Login reCAPTCHA

Head over to Essential Addons→ Elements from your WordPress dashboard and scroll down until you find the ‘Form Styler Elements’. Click on the Login Register Form settings and enter your Google Client ID. Make sure to hit the ‘Save Settings’ button once you are done.

Social Login reCAPTCHA

By following these basic steps you will be able to enable social login with Google for your login registration forms on your website.

Step 2: How To Enable Social Login With Facebook  #

To enable social login with Facebook for your website using the EA Login | Register element, you need to get your Facebook App ID and App Secret. 

Head over to developers.facebook.com and sign in to your account by clicking on ‘My Apps’ to register your app. You will be redirected to your dashboard where you have to click on the ‘Create App’ button to get started.

Social Login reCAPTCHA

A popup window will appear asking you how you want to use your app. Click on the ‘For Everything Else’ option since you will be using this app to enable Facebook Login on your website.

Social Login reCAPTCHA Next, create your App ID by giving a display name for your app, enter your email address, and then click on the ‘Create App ID’ button as shown below.

Social Login reCAPTCHA

After this step is done, you can get your app ID and app secret by navigating to Settings→ Basic from your Facebook Developers dashboard as shown below. Copy your App ID and App Secret as you will need it later.

Social Login reCAPTCHA

From your WordPress dashboard, head over to Essential Addons→ Elements and scroll down until you find the ‘Form Styler Elements’. Click on the Login | Register Form settings and enter your Facebook App ID and App Secret. Then, make sure to hit the ‘Save Settings’ button.

Social Login reCAPTCHA

Step 3: How To Configure The Content for Social Login #

Switch to the ‘Content’ tab and from the ‘Social Login’ section, you have the option to enable both Facebook login and Google login. You can toggle these options to allow site visitors to sign in with their Facebook or Google accounts.  If you want, you can display both social login options and separate them with a line or a text by toggling the ‘Show Separator’ option. 

EA LOGIN REGISTRATION FORM

Step 4: How To Style Your Social Login #

Under the ‘Style’ tab, you can change the options from ‘Social Login Style’ section to style your social login. You can change the Social Container by adjusting the width and height and changing the text and background colors. You can also style your Google Login and Facebook Login options by changing the typography, icon width and height, background colors, and much more. For more details, refer to this documentation here.

EA LOGIN REGISTRATION FORM

By following these basic steps, you can enable social login for your login registration forms on your WordPress website.

If you face any difficulties, feel free to contact our support team for further assistance.

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *

00 Days
00 Hrs
00 Mins
00 Secs
You just missed
🚀 Celebrating 700,000+ Happy Users. Get Essential Addons PRO today & SAVE 20% with coupon code ?
ENJOY20

Win With Elementor!

It’s easy: all we need is your eternal love. But we’ll settle for your email.