Learn how to embed VentraConnect Pro inline Magic Link and Email OTP forms directly inside pages, Elementor popups, account dropdowns, WooCommerce account popups, membership login pages, LMS login pages, and custom login layouts.
Pro Inline passwordless forms are available in VentraConnect Pro (they need Pro installed, with an active licence).
On this page:
Two inline passwordless form shortcodes
VentraConnect Pro currently includes two inline passwordless form shortcodes. These shortcodes place the actual Magic Link or Email OTP form directly inside the page, popup, dropdown, or custom layout where they are added.
Typical places to use them:
- Elementor popups
- WooCommerce account popups
- Header account dropdowns
- Custom login pages
- Membership login pages
- LMS login pages
- Landing pages
- Client-specific layouts
Account creation from an inline form depends on where the form is placed. See Account creation and Guardrails.
Main VentraConnect shortcode vs Pro inline forms
VentraConnect has a main login shortcode that can display selected login methods as buttons. Inline passwordless forms are different because they embed the actual form directly into the page.
| Main shortcode | Pro inline forms | |
|---|---|---|
| What it shows | Login method buttons. The main shortcode can display Magic Link and Email OTP as buttons. | The actual Magic Link or Email OTP form, placed directly inside your page, popup, dropdown, or custom layout. |
| Shortcode | [ventraconnect_sl_social_login providers="magic_link, otp_email"] | [ventraconnect_magic_link_form][ventraconnect_email_otp_form] |
| What happens on click | When a user clicks one of those buttons, VentraConnect opens the normal passwordless modal flow. | No extra modal is needed: the user types their email into the embedded form. |
Simple rule: use the main shortcode when you want passwordless buttons that open a modal. Use the inline shortcodes when you want the passwordless form embedded directly in your design.
Inline Email OTP form
The inline Email OTP form lets users request a one-time email code, enter the code, and log in from the same embedded form.
Shortcode
What the form displays
- Email address field
- Send Code button
- Verification code field after the code is sent
- Verify & Login button
- Inline success and error messages
User flow
- User enters their email address.
- User clicks Send Code.
- VentraConnect sends an OTP code to the user’s email address.
- The verification code field appears in the same form.
- User enters the OTP code.
- User clicks Verify & Login.
- VentraConnect logs the user in.
- VentraConnect redirects the user using your existing Email OTP redirect settings (see the redirect example).
Redirect note: the inline Email OTP shortcode does not use a redirect attribute. Do not use [ventraconnect_email_otp_form redirect="/my-account/"]. Redirects are handled by your existing VentraConnect Email OTP or passwordless redirect settings.
Inline Magic Link form
The inline Magic Link form lets users enter their email address and receive a secure sign-in link without opening another modal first.
Shortcode
What the form displays
- Email address field
- Send Magic Link button
- Inline success and error messages
User flow
- User enters their email address.
- User clicks Send Magic Link.
- VentraConnect sends a secure login link to the user’s email address.
- User opens their email inbox.
- User clicks the Magic Link.
- VentraConnect logs the user in.
- VentraConnect redirects the user using your existing Magic Link redirect settings (see the redirect example).
Redirect note: the inline Magic Link shortcode does not use a redirect attribute. Do not use [ventraconnect_magic_link_form redirect="/my-account/"]. The final redirect happens after the user clicks the emailed Magic Link.
Using inline forms inside an Elementor popup
You can place either inline shortcode inside an Elementor popup using the Elementor Shortcode widget.
Elementor setup steps
- Go to Templates → Popups in Elementor.
- Create a new popup or edit an existing popup.
- Add a Shortcode widget.
- Paste one of the inline passwordless shortcodes.
- Save the popup.
- Connect the popup to your account icon, login button, or custom trigger.
- Test the popup in a private/incognito browser window.
Email OTP popup flow
- User clicks account icon or login button.
- Elementor popup opens.
- Email OTP form appears immediately.
- User enters email and sends code.
- OTP field appears inside the same popup.
- User enters code and logs in.
- User is redirected using existing VentraConnect redirect settings.
Magic Link popup flow
- User clicks account icon or login button.
- Elementor popup opens.
- Magic Link form appears immediately.
- User enters email and sends Magic Link.
- User checks email and clicks the secure login link.
- User is logged in and redirected using existing VentraConnect redirect settings.
Popup close and reopen behavior
The inline forms are designed to work with popup-based layouts. If a user closes and reopens the popup while a code or link is still valid, VentraConnect can restore the pending state.
If the user changes the email address after sending a code or link, the form resets so a new code or link can be sent to the updated email address.
Enable the related login method first
Before using either inline form, make sure the related login method is enabled in VentraConnect settings (VentraConnect → Login Methods).
Account creation and Guardrails
Inline passwordless forms use the same passwordless logic as the normal button/modal flow, including the method’s Registration mode, expiry, and resend throttling. Which settings decide whether the form may create a new account depends on the page it is placed on, because VentraConnect works out the context on the server.
| Where the form is placed | Account creation follows |
|---|---|
| WooCommerce checkout page | WooCommerce’s own Allow customers to create an account during checkout setting (WooCommerce → Settings → Accounts & Privacy), plus the method’s Registration mode. |
| WooCommerce My Account page | Allow new accounts from the WooCommerce login form (VentraConnect → WooCommerce, on by default), plus the method’s Registration mode. |
| Anywhere else: custom pages, popups, header dropdowns, membership or LMS pages | It behaves as a general site form: it follows the method’s Registration mode and Allow new accounts from default login forms (VentraConnect → Settings → General Settings, on by default). The membership/LMS Allow new accounts from … login form options do not apply to it. |
Defaults can create accounts. With the default settings, an inline form on an LMS or membership login page can create new accounts even when that LMS or membership integration’s own “Allow new accounts” option is off. To keep an inline form for existing users only, set the method to Login only (existing users).
WooCommerce My Account redirect example
To redirect users to WooCommerce My Account after Email OTP or Magic Link login, configure the method’s redirect settings rather than adding a redirect attribute to the inline shortcode.
Setup steps
- Go to VentraConnect → Login Methods and open Magic Link (or OTP (Email)).
- Make sure the method is enabled.
- Turn on Redirect override, choose Send to custom URL, and enter your My Account URL in Custom URL.
- Click Save Changes.
- Add the inline shortcode inside your page, popup, or layout.
The Redirect override setting is shown here for Magic Link, with the toggle off (the default); the destination options and the Custom URL field are listed under it. OTP (Email) has the same setting in its own settings.
For forms placed on WooCommerce pages you can instead set WooCommerce → Redirect customer after login to My Account page. Without a Redirect override, forms on WooCommerce pages follow that WooCommerce setting (default: “Stay on the same page”), and forms elsewhere follow the global Default redirect URL.
After successful login, VentraConnect redirects the user using the same redirect behavior as the normal passwordless flow.
Styling notes
The inline forms include lightweight default styling so they work out of the box. The styles are scoped to the form classes below to help reduce conflicts with your theme or builder.
.vcsl-email-otp-inline.vcsl-magic-link-inlineYou can style the surrounding popup, section, container, or layout using Elementor, your theme, or custom CSS.
Which shortcode should you use?
| Shortcode | Use it when | Good for |
|---|---|---|
[ventraconnect_email_otp_form]Email OTP inline form | You want users to enter their email, receive a code, enter the code, and log in from the same inline form. | WooCommerce account popups, Elementor login popups, custom login pages, membership login screens, LMS login screens |
[ventraconnect_magic_link_form]Magic Link inline form | You want users to enter their email address and receive a secure sign-in link. | Simple passwordless popups, custom login pages, low-friction account access, membership login screens, LMS login screens |
