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). No user action is needed.

Suitable for content you want to show users 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.

Useful when the user arrives from another page or an email link and the form should pop up directly, for example:

  • Links in marketing emails: Click to contact us#contact
  • Buttons on other pages: link 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.

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 spent some time reading (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 does not pop up again until 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 encourage users to fill it out
  • Choose an appropriate Form Width for a comfortable layout inside the popup

Next Steps ​

Built with VitePress