Marketing · Elementor
Login | Register Form widget for Elementor
AJAX login and registration on a normal Elementor page, with validation and optional extra fields.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
AJAX login and registration on a normal Elementor page, with validation and optional extra fields.
Login Register Form Widget for King Addons.
render() writes HTML data attributes: data-action, data-admin-email-address, data-admin-email-content, data-admin-email-subject, data-ajax, data-app-id, data-auto-login, data-client-id.
Mailchimp is a server-side integration in this widget (API key / list ID), not a form embed.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Login | Register Form”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Default Form Type”, “Show Labels”, “Enable AJAX”, “Show Form Header”. Style and Content tabs are listed on this page.
- Preview the published page. Login Register Form Widget for King Addons.
When to use it
- A membership landing page with an inline register form.
- A custom login page instead of wp-login.php.
- A course site that keeps auth on-brand.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| General — Default Form Type | The chosen value is read in render() and applied on the front end. Options: Login; Register. |
| General — Show Labels | Switcher inspector control (`show_labels`). |
| General — Enable AJAX | Switcher inspector control (`enable_ajax`). |
| Form Header — Show Form Header | When this switch is on, render() skips the wrapped markup. |
| Form Header — Logo | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Form Header — Logo Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 500). |
| Form Header — Illustration | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Form Header — Illustration Position | The chosen value is read in render() and applied on the front end. Options: Left; Right; Top; Bottom. |
| Form Header — Illustration Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 800). |
| Login Form — Form Title | Printed in the widget HTML from render(). |
| Login Form — Form Subtitle | Printed in the widget HTML from render(). |
| Login Form — Username/Email Label | Printed in the widget HTML from render(). |
| Login Form — Username/Email Placeholder | Printed in the widget HTML from render(). |
| Login Form — Password Label | Printed in the widget HTML from render(). |
| Login Form — Password Placeholder | Printed in the widget HTML from render(). |
| Login Form — Login Button Text | Printed in the widget HTML from render(). |
| Login Form — Show Password Visibility Toggle | Switcher inspector control (`show_password_visibility_login`). |
| Login Form — Show Remember Me | Switcher inspector control (`show_remember_me`). |
| Login Form — Remember Me Text | Printed in the widget HTML from render(). |
| Login Form — Show Lost Password Link | Switcher inspector control (`show_lost_password`). |
| Login Form — Lost Password Text | Text inspector control (`lost_password_text`). |
| Login Form — Show Register Link | Switcher inspector control (`show_register_link`). |
| Login Form — Register Link Text | Printed in the widget HTML from render(). |
| Login Form — Show Lost Password Link (Show Lost Password Link) | Switcher inspector control (`show_lost_password_link`). |
| Login Form — Lost Password Link Text | Printed in the widget HTML from render(). |
| Email Notifications — Send Email to User | Send a welcome email to the user after successful registration. |
| Email Notifications — User Email Subject | Printed in the widget HTML from render(). |
| Email Notifications — User Email Content | Printed in the widget HTML from render(). |
| Email Notifications — Send Email to Admin (Pro) | Send a notification email to the admin when a user registers. |
| Email Notifications — Admin Email Address | Printed in the widget HTML from render(). |
| Email Notifications — Admin Email Subject | Printed in the widget HTML from render(). |
| Email Notifications — Admin Email Content | Printed in the widget HTML from render(). |
| Mailchimp Integration — Enable Mailchimp Integration (Pro) | Automatically subscribe users to your Mailchimp list upon registration. |
| Mailchimp Integration — Mailchimp API Key | Text inspector control (`mailchimp_api_key`). |
| Mailchimp Integration — Mailchimp List ID | Text inspector control (`mailchimp_list_id`). |
| Mailchimp Integration — Double Opt-in | Send confirmation email to subscribers. |
| Register Actions — Auto Login After Registration | Automatically log in the user after successful registration. |
| Register Actions — Redirect After Registration | Leave empty to stay on the current page. |
| Register Actions — Redirect After Login | Leave empty to stay on the current page. |
| Register Actions — Redirect Already Logged Users | Redirect users who are already logged in. |
| Register Actions — Redirect URL for Logged Users | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Lost Password Form — Form Title | Printed in the widget HTML from render(). |
| Lost Password Form — Form Subtitle | Printed in the widget HTML from render(). |
| Lost Password Form — Email Label | Printed in the widget HTML from render(). |
| Lost Password Form — Email Placeholder | Printed in the widget HTML from render(). |
| Lost Password Form — Button Text | Printed in the widget HTML from render(). |
| Lost Password Form — Show Login Link | Switcher inspector control (`show_login_link_from_lostpassword`). |
| Lost Password Form — Login Link Text | Printed in the widget HTML from render(). |
| Social Login — Enable Social Login (Pro) | When this switch is on, render() skips the wrapped markup. |
| Social Login — Show Separator | Switcher inspector control (`social_login_separator`). |
| Social Login — Enable Google Login | Switcher inspector control (`enable_google_login`). |
| Social Login — Google Client ID | Printed in the widget HTML from render(). |
| Social Login — Google Client Secret | Text inspector control (`google_client_secret`). |
| Social Login — Enable Facebook Login | Switcher inspector control (`enable_facebook_login`). |
| Social Login — Facebook App ID | Printed in the widget HTML from render(). |
| Social Login — Facebook App Secret | Text inspector control (`facebook_app_secret`). |
| reCAPTCHA — Enable reCAPTCHA | Switcher inspector control (`enable_recaptcha`). |
| reCAPTCHA — reCAPTCHA Version | The chosen value is read in render() and applied on the front end. Options: reCAPTCHA v2; reCAPTCHA v3. |
| reCAPTCHA — Site Key | Printed in the widget HTML from render(). |
| reCAPTCHA — Secret Key | Text inspector control (`recaptcha_secret_key`). |
| reCAPTCHA — Theme | The chosen value is read in render() and applied on the front end. Options: Light; Dark. |
| reCAPTCHA — Size | The chosen value is read in render() and applied on the front end. Options: Normal; Compact. |
| reCAPTCHA — Score Threshold | ReCAPTCHA v3 returns a score (1.0 is very likely a good interaction, 0.0 is very likely a bot). Based on the score, you can take variable action in the context of your site. |
| reCAPTCHA — Hide reCAPTCHA Badge | Hide the reCAPTCHA badge. Note: You must include the reCAPTCHA branding visibly in the user flow. |
| reCAPTCHA — Apply reCAPTCHA On | The chosen value is read in render() and applied on the front end. Options: Login Form; Register Form; Lost Password Form. |
| Register Form — Form Title | Printed in the widget HTML from render(). |
| Register Form — Form Subtitle | Printed in the widget HTML from render(). |
| Register Form — Email Label | Printed in the widget HTML from render(). |
| Register Form — Email Placeholder | Printed in the widget HTML from render(). |
| Register Form — Username Label | Printed in the widget HTML from render(). |
| Register Form — Username Placeholder | Printed in the widget HTML from render(). |
| Register Form — Password Label | Printed in the widget HTML from render(). |
| Register Form — Password Placeholder | Printed in the widget HTML from render(). |
| Register Form — Confirm Password Label | Printed in the widget HTML from render(). |
| Register Form — Confirm Password Placeholder | Printed in the widget HTML from render(). |
| Register Form — Show First Name | Switcher inspector control (`show_first_name`). |
| Register Form — First Name Label | Printed in the widget HTML from render(). |
| Register Form — First Name Placeholder | Printed in the widget HTML from render(). |
| Register Form — Show Last Name | Switcher inspector control (`show_last_name`). |
| Register Form — Last Name Label | Printed in the widget HTML from render(). |
| Register Form — Last Name Placeholder | Printed in the widget HTML from render(). |
| Register Form — Show Website | Switcher inspector control (`show_website`). |
| Register Form — Website Label | Printed in the widget HTML from render(). |
| Register Form — Website Placeholder | Printed in the widget HTML from render(). |
| Register Form — Show Phone | Switcher inspector control (`show_phone`). |
| Register Form — Phone Label | Printed in the widget HTML from render(). |
| Register Form — Phone Placeholder | Printed in the widget HTML from render(). |
| Register Form — Register Button Text | Printed in the widget HTML from render(). |
| Register Form — Show Password Visibility Toggle | Switcher inspector control (`show_password_visibility_register`). |
| Register Form — Show Login Link | Switcher inspector control (`show_login_link`). |
| Register Form — Login Link Text | Printed in the widget HTML from render(). |
| Additional Fields — Field Type | Options: Text; Email; Number; Phone; URL; Textarea; Select; Checkbox…. |
| Additional Fields — Field Label | Text inspector control (`field_label`). |
| Additional Fields — Placeholder | Text inspector control (`field_placeholder`). |
| Additional Fields — Required | Switcher inspector control (`field_required`). |
| Additional Fields — Options | Enter each option on a new line. For radio/checkbox use format: value|label. |
| Additional Fields — Field Width | Options: Full Width; Half Width. |
| Register Form — Additional Fields | Repeater rows; render() loops each item to build the list or slides. |
| Register Form — Show User Role Selection | Switcher inspector control (`show_user_role_selection`). |
| Register Form — User Role Label | Printed in the widget HTML from render(). |
| Register Form — Allowed User Roles | The chosen value is read in render() and applied on the front end. |
| Register Form — Default User Role | The chosen value is read in render() and applied on the front end. |
| Register Form — Show Terms & Conditions | Switcher inspector control (`show_terms_conditions`). |
| Register Form — Terms & Conditions Text | Printed in the widget HTML from render(). |
| Register Form — Terms & Conditions Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Register Form — Required | Switcher inspector control (`terms_required`). |
| Form Container — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Form Container — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Form Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-login-register-form`. |
| Form Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Form Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-login-register-form`. |
| Form Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-title`. |
| Form Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Form Subtitle — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-subtitle`. |
| Form Subtitle — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form Subtitle — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Input Fields — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-field input`. |
| Input Fields — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Input Fields — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Input Fields — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Input Fields — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Input Fields — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-form-field input`. |
| Input Fields — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Input Fields — Focus Border Color | Writes CSS (input, border-color) onto the widget’s front-end markup. |
| Labels — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-field label`. |
| Labels — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Labels — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Buttons — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-button`. |
| Buttons (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Buttons (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Buttons (Hover) — Text Color | Writes CSS (king-addons-form-button, color) onto the widget’s front-end markup. |
| Buttons (Hover) — Background Color | Writes CSS (king-addons-form-button, background-color) onto the widget’s front-end markup. |
| Buttons — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Buttons — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Buttons — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-form-button`. |
| Buttons — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Buttons — Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 1000). |
| Links — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-link, {{WRAPPER}} .king-addons-form-toggle`. |
| Links (Normal) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Links (Hover) — Color | Writes CSS (king-addons-form-link, king-addons-form-toggle, color) onto the widget’s front-end markup. |
| Links — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Messages — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-form-message`. |
| Messages — Success Message Color | Writes CSS `color` onto the widget’s front-end markup. |
| Messages — Error Message Color | Writes CSS `color` onto the widget’s front-end markup. |
| Messages — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Messages — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Messages — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Why doesn’t Login | Register Form work in the Elementor preview?
AJAX handlers run on the published page. Preview the front end (or a Theme Builder preview of a real post) to test submit/filter requests.
Where do Login | Register Form subscribers go?
To the Mailchimp audience configured on the widget (API key and list ID in PHP). That is not the WordPress comments table.
How do I add Login | Register Form in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Login | Register Form”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Mailchimp
A Mailchimp subscribe form styled in Elementor. Connect an audience, then match fields to your list.
Form Builder
A form you build in Elementor: fields, layout, and submit behavior for contact, quotes, and lead capture.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Flip Countdown & Timer
A flip-clock countdown with the same job as Countdown, in a different visual style.
Phone Call Button
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Login | Register Form after you activate it.