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
| Comparison | Click Popup | Default Popup |
|---|---|---|
| Trigger method | User clicks a button | Auto-pops up after page load |
| Delayed display | ❌ | ✅ Delay can be set |
| Display frequency | Every click | Every Visit / Once Per Session can be set |
| Suitable scenarios | Contact forms, consultation forms | Promotions, announcements, subscriptions |
Click Popup Settings
Popup Anchor
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:
<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.
Popup Appearance Settings
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
- General — Basic form properties
- Integrations — Third-party service integration
- Form Settings Overview — View all setting categories