A pop-up or modal box is an effective way to collect leads, meaning data from potential customers. When a lead clicks on your CTA button, a pop-up window opens with the corresponding form.
By integrating a form into a modal box, you create a pop-up opt-in as an alternative to traditional forms. Of course, you can also embed a classic form directly on the landing page.
📌 Please note: Onepage does not have an automatic function to display the modal directly on the page. The modal only appears when the previously configured button is clicked.
Apart from lead forms, you can use a modal box to place important announcements or provide quick access to additional information without leaving the current page. It is also suitable for displaying images, videos, or call-to-action buttons, helping to increase engagement.
How to create a modal form
Step 1: Add modal
Add a new section from the "Modal" category and customize one of the available templates according to your preferences.
Step 2: Customize the design
You can design the modal exactly as you like. The main settings include:
Centering: Define how the modal is positioned on the page.
Padding: Adjust the inner spacing of the modal to display content optimally.
Pop-up width: Set the width of the modal according to your preferences.
Radius: Round the corners of the modal for a softer design.
“Close” button: Customize the button, e.g., size, icon, or color.
Overlay: Adjust the background behind the modal, such as color or transparency, to keep the focus on the modal.
This way, you can ensure your modal is both functional and visually aligned with your landing page.
Customize the background design: Choose a color, add an image, or even include a video to make the modal visually appealing.
Next, you can adjust the text color to ensure the content remains easily readable.
And much more, customize your modal exactly the way you want.
Step 3: Edit the form/add elements
Edit the form within the modal box to suit your needs: Add new fields, change existing settings, or adjust the structure. Editing a modal form works the same way as editing a standard form.
Step 4: Link the modal to a CTA-Button
Click on any CTA button.
Remove the “onepage.io” URL if it is set.
Select the “Open modal” option.
Link the desired modal box to the button.
Step 5: Publish/Update
Make sure to publish or update your page.
🎉 Done! The modal box is now live and can be accessed by your visitors! 🎉
Frequently Asked Questions (FAQ)
Where can the created modal box be found?
Where can the created modal box be found?
The created modal box can be found in the page structure.
Can the modal box also be renamed?
Can the modal box also be renamed?
Yes, double-clicking on the name of the modal box allows you to edit it.
How can the modal be transferred to another subpage?
How can the modal be transferred to another subpage?
Unfortunately, this is not possible. In this case, you can copy all individual text elements, create a new modal on the desired subpage, and paste the content into it.
Can the modal be set up as a global section?
Can the modal be set up as a global section?
Unfortunately, this is not possible. The modal box is created only on a single subpage and cannot be automatically used on other pages.
Can the modal be linked from a global section?
Can the modal be linked from a global section?
The link only works on the page where you set up the modal, not on other subpages. Therefore, it is recommended to use non-global sections to link to the modal.
How can the modal be set to display automatically when a visitor comes to your website?
How can the modal be set to display automatically when a visitor comes to your website?
By default, Onepage does not provide a way to automatically display a modal when the page loads. The modal only appears when the previously set up button is clicked.
However, it would be possible to achieve this with custom code. For example, a short JavaScript snippet could be added to automatically trigger the desired modal when the page starts.
💡Do you have any feedback concerning this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂