Skip to content

Popup

Popup settings display the form as a popup instead of directly on the page. Users trigger the popup by clicking a button.

Enable

When on, the form switches to popup mode and no longer displays directly on the page.

Choose Mode

The popup trigger method.

Click Popup

When Click popup is selected, the form turns into a button and no longer displays directly on the page. When the user clicks the button, the form appears as a popup.

Suitable for scenarios that require the user to actively trigger it, such as "Contact Us", "Consult Now", or "Get a Quote".

Default Popup

When Default popup is selected, the form automatically pops up after the page loads (a delay can be set). Without any user action, the form pops up and displays automatically.

Suitable for scenarios that need to be shown to the user proactively, such as promotions, announcements, or subscription forms.

Comparison of the Two Modes

ComparisonClick PopupDefault Popup
Trigger methodUser clicks a buttonAuto-pops up after page load
Delayed display✅ Delay can be set
Display frequencyEvery clickEvery Visit / Once Per Session can be set
Suitable scenariosContact forms, consultation formsPromotions, announcements, subscriptions

Click Popup Settings

The anchor identifier of the popup (placeholder hint: #anchor).

If the URL contains this anchor, the form automatically pops up on page entry.

Use Cases

For example, set the anchor to contact. When the user visits https://yoursite.com/page#contact, the form automatically pops up.

Suitable for scenarios where the form should pop up directly when arriving from another page or an email link, such as:

  • Links in marketing emails: Click to contact us#contact
  • Guiding buttons on other pages: jump to the target page and auto-open the form

Button Position

The display position of the popup trigger button. Options:

  • Default (default): Default position, displayed in the normal flow of the page
  • Fixed on the left: Fixed on the left side of the page (floating button)
  • Fixed on the right: Fixed on the right side of the page (floating button)
  • Shortcode: Placed at a specified position on the page via shortcode

Shortcode Mode

After setting Button Position to Shortcode, a shortcode snippet is displayed, for example:

html
<button type="button" class="popup-form-btn" data-module="2">Open Form</button>

Add this code to any location on the page (such as the content area, an HTML module, or a theme template). When the user clicks this button, the form pops up and displays.

Prerequisite

The shortcode button must be on the same page as the FormBuilder Views module to work. Make sure the target page already has the FormBuilder Views module added.

:::

Position Selection Advice

  • Default: The button is in its normal position in the page; suitable for trigger buttons within page content
  • Fixed on the left / right: The button always floats on the side of the screen; suitable for forms that need to be triggered at any time (such as contact forms, consultation forms)
  • Shortcode: Flexibly placed anywhere on the page; suitable for scenarios that require precise control of the button position

Button Text

The text displayed on the popup trigger button (e.g. "Contact Us", "Consult Now").

Button Color

The background color of the popup trigger button.


Default Popup Settings

The form automatically pops up after the page loads (delay and frequency can be set).

Delay

The delay (in seconds) after the page loads before the form automatically pops up.

Delay Advice

  • 0 seconds: Pop up immediately (may feel intrusive to users)
  • 3-5 seconds: Pop up after the user has browsed the page for a moment (recommended)
  • 10-30 seconds: Pop up after the user has read deeply (suitable for content-heavy pages)

Frequency

The popup display frequency. Options:

  • Every Visit (default): Pops up on every page visit
  • Once Per Session: Pops up only once per session, and will not pop up again before the session expires

Frequency Selection Advice

  • Every Visit: Suitable for important announcements and information that users must see
  • Once Per Session: Suitable for promotions and subscription forms, to avoid repeatedly disturbing the same user within a session

Session Expiration Time

This field appears when Once Per Session is selected. The session expiration time; after expiration, the popup reappears on the next visit.

Version

This field appears when Once Per Session is selected. The popup version identifier. After changing the version number, the popup reappears on the next visit even if the user already closed it in the current session (because the version changed, the system treats it as a new popup).

Version Use Cases

When you modify the popup content (such as updating promotional information) and need users who already closed the popup to see it again, change the Version number. All users will then see the updated popup on their next visit.


The following settings apply to both Click Popup and Default Popup modes.

Close Background Color

The color of the page background overlay when the popup is open.

Overlay Effect

After the popup opens, the rest of the page is covered by a semi-transparent overlay; clicking the overlay area closes the popup. Use a semi-transparent dark color (such as rgba(0,0,0,0.5)) to draw visual focus to the popup.

Style

Select the layout style of the popup (with thumbnail preview).

Form Width

The width of the form inside the popup.

Background Color

The background color of the popup interior.

Display Image

The image displayed on the side of the popup. Pair it with brand imagery or promotional visuals to enhance the popup.

Description

The description text in the popup, introducing the form's purpose or fill-out instructions.

Popup Design Advice

  • Pair Display image with a brand image to make the popup more professional
  • Briefly explain the form's purpose in the Description to guide users to fill it out
  • Choose an appropriate Form Width for a comfortable layout inside the popup

Next Steps

Built with VitePress