---
title: Inline Magic Link and Email OTP Forms (Pro)
description: 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…
url: "https://wpventra.com/docs/inline-magic-link-email-otp-forms/"
updated: "2026-10-26"
category: Inline Magic links and OTP Forms
---

# Inline Magic Link and Email OTP Forms (Pro)

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:**

- [Available shortcodes](#available-shortcodes)
- [Main shortcode vs inline forms](#main-vs-inline)
- [Inline Email OTP form](#email-otp-form)
- [Inline Magic Link form](#magic-link-form)
- [Using Elementor popups](#elementor-popup)
- [Popup close/reopen behavior](#popup-state)
- [Required settings](#required-settings)
- [Account creation and Guardrails](#guardrails)
- [WooCommerce My Account example](#woocommerce-example)
- [Styling notes](#styling-notes)
- [Shortcode summary](#shortcode-summary)
- [Troubleshooting](#troubleshooting)

   1

## 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.

   Inline Magic Link form Magic Link [ventraconnect_magic_link_form] Use this when you want users to enter their email address and receive a secure sign-in link.   Inline Email OTP form Email OTP [ventraconnect_email_otp_form] Use this when you want users to enter their email, receive a one-time code, enter the code, and log in from the same inline form.

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](#guardrails).

    2

## 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.

    3

## 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

 [ventraconnect_email_otp_form]

### 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

1. User enters their email address.
2. User clicks Send Code.
3. VentraConnect sends an OTP code to the user’s email address.
4. The verification code field appears in the same form.
5. User enters the OTP code.
6. User clicks Verify & Login.
7. VentraConnect logs the user in.
8. VentraConnect redirects the user using your existing Email OTP redirect settings (see [the redirect example](#woocommerce-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.

    4

## 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

 [ventraconnect_magic_link_form]

### What the form displays

- Email address field
- Send Magic Link button
- Inline success and error messages

### User flow

1. User enters their email address.
2. User clicks Send Magic Link.
3. VentraConnect sends a secure login link to the user’s email address.
4. User opens their email inbox.
5. User clicks the Magic Link.
6. VentraConnect logs the user in.
7. VentraConnect redirects the user using your existing Magic Link redirect settings (see [the redirect example](#woocommerce-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.

    5

## 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

1. Go to Templates → Popups in Elementor.
2. Create a new popup or edit an existing popup.
3. Add a Shortcode widget.
4. Paste one of the inline passwordless shortcodes.
5. Save the popup.
6. Connect the popup to your account icon, login button, or custom trigger.
7. Test the popup in a private/incognito browser window.

    Email OTP popup shortcode [ventraconnect_email_otp_form]    Magic Link popup shortcode [ventraconnect_magic_link_form]

### Email OTP popup flow

1. User clicks account icon or login button.
2. Elementor popup opens.
3. Email OTP form appears immediately.
4. User enters email and sends code.
5. OTP field appears inside the same popup.
6. User enters code and logs in.
7. User is redirected using existing VentraConnect redirect settings.

### Magic Link popup flow

1. User clicks account icon or login button.
2. Elementor popup opens.
3. Magic Link form appears immediately.
4. User enters email and sends Magic Link.
5. User checks email and clicks the secure login link.
6. User is logged in and redirected using existing VentraConnect redirect settings.

    6

## 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.

   Email OTP state restore If a user sends an OTP code, closes the popup, and opens it again while the code is still valid, the popup can restore the pending OTP state: the email address, the verification code field, the Resend Code button, and a message telling the user that a code was already sent.   Magic Link state restore If a user sends a Magic Link, closes the popup, and opens it again while the link is still valid, the popup can restore the pending Magic Link state: the email address, the Resend Magic Link button, and a message telling the user that a sign-in link was already sent.

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.

    7

## 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**).

   Email OTP requirement [ventraconnect_email_otp_form] Email OTP must be enabled in VentraConnect settings. If Email OTP is disabled, the inline Email OTP form will not appear for normal visitors. Site admins may see a notice explaining that Email OTP is not enabled.   Magic Link requirement [ventraconnect_magic_link_form] Magic Link must be enabled in VentraConnect settings. If Magic Link is disabled, the inline Magic Link form will not appear for normal visitors. Site admins may see a notice explaining that Magic Link is not enabled.     8

## 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. |

    Login only (existing users) If the method is set to **Login only (existing users)**, new visitors always see “This login method is only for existing accounts. Please sign up using another option.” and no account is created.   Login & Register (default) The form may create a new account where the table above allows it. WordPress “Anyone can register” is not used.

**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)**.

    9

## 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

1. Go to **VentraConnect → Login Methods** and open **Magic Link** (or **OTP (Email)**).
2. Make sure the method is enabled.
3. Turn on **Redirect override**, choose **Send to custom URL**, and enter your My Account URL in **Custom URL**.
4. Click **Save Changes**.
5. 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.

![VentraConnect Magic Link settings: Redirect override with the four redirect choices and the Custom URL field](https://wpventra.com/wp-content/uploads/2026/10/magic-link-redirect-override.png)

   Email OTP [ventraconnect_email_otp_form]    Magic Link [ventraconnect_magic_link_form]

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.

    10

## 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.

   Email OTP form class `.vcsl-email-otp-inline`    Magic Link form class `.vcsl-magic-link-inline`

You can style the surrounding popup, section, container, or layout using Elementor, your theme, or custom CSS.

    11

## 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 |

    12

## Troubleshooting inline passwordless forms

   The shortcode appears as plain text This usually means VentraConnect Pro is not active, or its licence is not active (check **VentraConnect → Account**). These inline shortcodes are Pro-only, and Pro registers them only with an active licence.   The form does not appear Check that VentraConnect Pro is active, the related login method is enabled, and you are testing while logged out. Logged-in users may see an “already logged in” message instead of the login form.   The OTP or Magic Link email is not arriving Check your WordPress email sending setup, SMTP configuration, spam/junk folder, VentraConnect email settings, and whether the same method works through the standard VentraConnect button/modal flow. See [Magic Link and OTP emails not arriving](/docs/magic-link-otp-emails-not-arriving/).   Redirect is not going to My Account The inline shortcodes do not control redirects directly. Use the method’s **Redirect override** (**Send to custom URL**) or, on WooCommerce pages, WooCommerce’s **Redirect customer after login** setting. See [the redirect example](#woocommerce-example).   I changed the email after sending a code or link That is supported. If the user edits the email address after sending an OTP code or Magic Link, the form resets so a new code or link can be sent to the updated email address.   A new visitor cannot create an account Check the method’s Registration mode and the page the form is on. See [Account creation and Guardrails](#guardrails).     13

## Related Guides

   Magic Link Security & Expiry Settings Expiry, resend throttling, and optional same-IP restriction. [Open guide](/docs/magic-link-security-expiry-settings/)   Magic Link with WooCommerce & Integrations Placements and account-creation rules for WooCommerce, membership, and LMS. [Open guide](/docs/magic-link-with-woocommerce-integrations/)   Email OTP Security & Verification Settings Security settings for the Email OTP method. [Open guide](/docs/otp-security-verification-settings/)   Troubleshooting Magic Link Diagnose emails, expired links, account creation, and redirects. [Open guide](/docs/troubleshooting-magic-link/)

### Need the inline form shortcodes?

Inline Magic Link and Email OTP forms are available in VentraConnect Pro. Use them when you want passwordless login directly inside popups, dropdowns, custom login pages, WooCommerce account layouts, membership pages, or LMS login screens.

- [View Pro Features](/pricing/)
- [Back to Docs](/docs/)