How to use Login Form Widget of Sky Addons for Elementor

The Sky Addons Login Form widget replaces the default WordPress login page with a beautifully styled, Elementor-controlled sign-in form that you can place on any page. It handles standard username/password authentication, optional Google OAuth sign-in, CAPTCHA protection (reCAPTCHA v3 or Cloudflare Turnstile), a password show/hide toggle, Remember Me, redirect after login or logout, and a “Lost Password” link — all without touching any PHP templates. This documentation will guide you through the process of using the Login Form Widget to create a fully branded, secure login experience on your website.

Features:

1. Card Layout Toggle: Wrap the form in a padded card with a shadow and border for a polished look, or go card-less for a flat inline style.
2. Custom Field Labels and Placeholders: Edit the username, email, and password field labels and placeholder text directly in the widget panel.
3. Password Show/Hide Toggle: An inline eye icon lets visitors reveal or mask the password field without any custom JavaScript.
4. Remember Me Checkbox: Optional persistent-login checkbox with customizable label text.
5. Google OAuth Login: Add a “Sign in with Google” button that creates accounts on first sign-in (optional). Configure the Client ID once in Sky Addons → Settings → API → Google Login.
6. CAPTCHA Protection: Protect against bots with reCAPTCHA v3 (invisible) or Cloudflare Turnstile (managed widget). Keys are set globally in Sky Addons → Settings.
7. Redirect After Login / Logout: Send users to a custom URL after a successful login or after they log out, rather than reloading the same page.
8. Logged-in Message: Signed-in visitors see a “You are logged in as…” notice with a logout link instead of the form, keeping the page tidy.

Insert Login Form Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Login Form in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section sets the overall form structure.

1. Card Container: Toggle on to wrap the form in a padded card. When on, the Form style section adds background, border, border radius, box shadow, and padding controls for the card.
2. Show Field Labels: Toggle label text above each input on or off. When off, the Labels style section is hidden.
3. Button Width: Set the submit button to Full Width (stretches to the form edge) or Auto (sized to the button text).

Configure Form Fields

The Form Fields section customizes the text content of each input.

1. Username or Email — Label: The text shown above the username/email input (default: “Username or Email”).
2. Username or Email — Placeholder: The hint text inside the field (default: “[email protected]”).
3. Password — Label: Label for the password field (default: “Password”).
4. Password — Placeholder: Hint text inside the password field (default: “Enter your password”).
5. Show/Hide Toggle: When on, an eye icon appears inside the password field so visitors can reveal the characters they are typing.
6. Remember Me Checkbox: Toggle the checkbox on or off and edit the label text (default: “Remember me”).

Configure CAPTCHA and Social Login

The CAPTCHA & Social Login section adds bot protection and an optional Google sign-in button. Both features require one-time global configuration in Sky Addons → Settings → API → Login CAPTCHA and Sky Addons → Settings → API → Google Login respectively.

1. Enable CAPTCHA: Toggle on to activate bot protection. A notice in the panel will alert you if the provider keys have not been saved globally yet.
2. Google Login: Toggle on to show a “Sign in with Google” button. The OAuth Client ID must be saved in Sky Addons → Settings first.
3. Google Button Text: Customize the button label (default: “Continue with Google”).
4. Create Account on First Sign-in: When on, first-time Google users automatically get a WordPress account (with the site default role). When off, only existing accounts can sign in with Google.
5. Divider Text: The text between the standard login form and the Google button (default: “or”).

Configure Button and Behaviour

The Button & Behaviour section controls the submit button text and what signed-in visitors see.

1. Button Text: Label for the submit button (default: “Log In”).
2. Helper Text: A small note displayed above the submit button — useful for terms-of-service reminders or notices.
3. Logged-in Message: When on, signed-in visitors see “You are logged in as [Name]” with a Log out link instead of the form.
4. Redirect After Logout: When the logged-in message is on, optionally send the user to a custom URL after they click Log out.

Configure Redirect and Links

The Redirect & Links section manages post-login behavior and helper links below the form.

1. Redirect After Login: When off, the page reloads after a successful login. When on, the user is sent to a custom URL you specify.
2. Redirect URL: The destination URL for post-login redirect (same-site URLs only).
3. Register Link: Toggle a registration link below the form on or off. Edit the link text and destination URL (defaults to the WordPress registration page).
4. Lost Password Link: Toggle a “Lost your password?” link on or off and customize the link text.

Style Your Login Form

Use the Style tab to control every visual element of the form.

1. Form:
   Global accent color (used for focus states and highlights), space between fields, and — when Card Container is on — card background, border, border radius, box shadow, and padding.
2. Labels:
   Text color, typography (font family, size, weight, line height), and spacing below the label.
3. Inputs:
   Typography, text color, placeholder color, background color, border, border radius, padding, and focus border color when the user clicks into a field.
4. Button:
   Typography, padding, border radius, and Normal / Hover tabs for text color and background color.
5. Links:
   Typography, color, and hover color for the Lost Password, Register, and Remember Me text links.
6. Messages:
   Typography, success color (shown after a successful login action), and error color (shown on wrong credentials or failed CAPTCHA).

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Login Form widget in action.

Best Practices

1. Always enable CAPTCHA on publicly accessible login pages to reduce brute-force attempts. reCAPTCHA v3 is invisible to the user and adds zero friction; Cloudflare Turnstile shows a small challenge widget.
2. Use the Redirect After Login option to send members to their account dashboard or a private page immediately after signing in, rather than leaving them on the login page.
3. Set the Logged-in Message to on so returning visitors who are already signed in do not see an empty-looking form — they see a friendly confirmation instead.
4. Match the form’s accent color to your brand’s primary color for a consistent design across the site.

Troubleshooting

1. CAPTCHA panel shows a warning even after saving the keys: The widget checks the global Sky Addons settings at render time. Make sure you saved the keys in Sky Addons → Settings → API → Login CAPTCHA, not just in the widget. A CAPTCHA provider must be selected and both site key and secret key must be filled in.
2. Google Login button does not appear: The Google Login toggle is on in the widget, but the OAuth Client ID has not been saved in Sky Addons → Settings → API → Google Login. The button only renders when both the widget toggle and the global key are active.
3. Form submits but nothing happens: This usually indicates a JavaScript conflict. Check the browser console for errors. Also verify that no caching plugin is serving a stale version of the page that lacks the widget’s script.

Frequently Asked Questions

Can I replace the default WordPress login page with this widget?

Yes. Create an Elementor page with the Login Form widget and set that page as your custom login URL using a plugin such as “Custom Login Page Customizer” or by filtering login_url in your child theme. The widget itself handles authentication through the standard WordPress login system.

Is the form secure against bot attacks without CAPTCHA?

The widget includes a honeypot field (hidden from real users) and a time trap (rejects submissions that arrive impossibly fast) even when CAPTCHA is off. These measures reduce automated attacks, but CAPTCHA is recommended for high-traffic sites.

What happens when a Google user signs in for the first time and Create Account is off?

The sign-in attempt is rejected and the user sees an error message. Only existing WordPress accounts whose email matches the Google account can sign in.

Can I redirect different user roles to different pages after login?

The widget’s built-in redirect sends all users to a single URL. For role-based redirects, filter the login_redirect hook in your child theme — the widget uses WordPress’s standard authentication flow so that hook runs normally.

Does the widget work inside a popup or Offcanvas panel?

Yes. Place the Login Form widget inside an Offcanvas widget or any popup plugin that embeds Elementor content. The form submits via JavaScript so there is no page reload that would close the panel on error; the response message appears inline.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Login Form widget:

• Offcanvas: Embed the login form in a slide-in drawer so users can sign in without leaving the current page.
• Pricing Table: Pair with the Login Form on a pricing page so visitors can sign up and log in from the same screen.
• Loop Grid: Build a members-only content area that becomes visible once the user is logged in.

Conclusion

The Login Form widget gives you a fully styled, CAPTCHA-protected, Google-enabled sign-in experience that fits any Elementor design — without touching a PHP template or writing a single line of code. If you have any questions or need help, visit the Sky Addons support center.