Skip to main content

Add a Popup Form

Tip: In this guide, you will add a popup form and make a button open the correct form. Estimated time: 6 minutes.

Popup forms are useful for Get a Quote, Contact Us, and Request Sample buttons. Before starting, create the form in Forms in the admin.

Confirm normal form email first

If notification email is not set, or normal form submissions are not received, do not add many popup forms yet. Configure notification email in Site Settings first.

Find the page first​

Path: AllinCMS Workspace site list → Target site → Enter Admin → Themes → Current theme pages → Home or target page

1Enter the target site adminFind the site you want to edit and click Enter Admin
AllinCMS Workspace site list - the Enter Admin button is marked with a red box
2Open Themes and click PagesClick Pages on the card for the active theme
AllinCMS admin theme list - the Themes entry and Pages button on the active theme card are marked
3Find Home or the target pageFind Home or the page you want to edit in the current theme
AllinCMS admin theme page list - the Themes menu and target pages such as Home, Products, and Posts are visible

Overview​

1Create form in admin
2Confirm notification email
3Add Popup Form module
4Set button Target to Action
5Select popup and form
6Preview and submit test

1. Add the Popup Form Module​

In the page designer, find Form and choose Contact Form (Split).

You can also enter this AI instruction:

Add a popup form

AllinCMS admin add popup form module - find Form and choose Contact Form Split, or add the popup form with an AI instruction

The popup may be empty at first

If the popup opens but looks empty, it usually means no form has been selected yet.

Select the popup layer, then choose the form in the right-side Form / Props panel. The form must already exist in Forms in the admin. After you choose it, the name, email, message, and submit fields will appear inside the popup.

AllinCMS admin empty popup form preview - the popup is open but the form area has no fields, reminding users to select Form in the right-side properties panel

Start with one main popup per page. Do not place many popups on one page at the beginning. First make the main Get a Quote or Contact Us button open the form.

2. Set the Button Action​

First make sure the form already exists in Forms.

Then select the button or layer and configure the right-side properties:

FieldValue
CTA Target / TargetAction
Action typeThe popup action
FormThe form to open

AllinCMS admin button popup action setting - set CTA Target to Action and choose the matching popup and form

3. Select the Form​

Click the popup layer, then choose the specific form in the right-side Props.

The form must be created in Forms first. Otherwise it may not appear in the dropdown.

AllinCMS admin popup layer Props setting - select the popup layer and choose the specific form in the right-side panel

AllinCMS admin popup form selection example - choose the form created in admin so popup submissions use the correct form

4. Preview and Test​

After setup:

  1. Click the button and confirm the popup opens.
  2. Confirm the popup shows the correct form.
  3. Submit one test entry.
  4. Check the form admin or notification email for the submission.
Do not launch without testing

The popup opening does not mean submissions are received. Submit one test yourself.

Pitfalls​

MistakeResultHow to avoid it
Form not created firstNo form to selectCreate it in Forms first
Popup opens emptyNo Form is selected on the right sideSelect the popup layer, then choose a form in Props
Target is not ActionButton does not open popupSet button action to Action
Popup added but button not linkedVisitors cannot open itConfigure both popup and button
Notification email not testedInquiries may not be receivedSubmit one test yourself

Next​

Site Settings - configure notification email so form notices can be received.