Skip to main content
All CollectionsIntegrations
How can I add a modal box and integrate a form in it?
How can I add a modal box and integrate a form in it?

In this article you will learn how to integrate a modal box form in your landing page.

Dmytro avatar
Written by Dmytro
Updated over 2 months ago

⚙️ The pop-up/modal box is another way of gathering leads or in other words, data of potential customers. If your lead clicks on your CTA-Button the pop-up window with the form will open.

Whenever you integrate a form into a modal box, a pop-up opt-in will be created, which you can use instead of a classic form. Of course, you are also welcome to use a classic form that is directly seen on the landing page. Read this article to find the instructions.

📌 Please note: Onepage does not provide an automated feature for displaying the modal on your page. The modal will only appear once the set-up button has been clicked.

Apart from lead forms, you can use a modal box to display important announcements or offer quick access to additional information without leaving the current page. It can also be used to showcase images, videos, or call-to-action buttons to boost engagement.

⏩ How to create a modal box form in Onepage

Follow these steps if you want to integrate a modal box form into your landing page.

Step 1: Add modal

Add a new section from the category “Modal”. In total, there are 3 templates, which you can edit to your needs.

Step 2: Adjust design

Apart from the standard section settings, you can also adjust the width of the modal, edit the "close" button and add an overlay colour if needed.

Step 3: Edit the form/add elements

Edit the form inside modal box form, add new fields to it, or change the settings of the form. Editing a modal box form works the same way as editing a classic form. For more information, please read this article.

If required, you can add some additional elements. For example: let us delete the text and add a logo instead.

Step 4: Link the modal to a CTA-Button

  • Click on any CTA-Button.

  • Make sure to remove the "onepage.io" URL first.

  • Select the option “Open Modal”.

  • Link The modal box.

Step 5: Publish/Update

Make sure to publish or update your page.


🎉 All done! Your modal box can now be accessed in the live page! 🎉


Frequently asked questions and solutions

How can I copy the modal to another subpage?

The modal sections are a bit more complicated. It is required to add any conventional section and any modal from the template to the new subpage prior to pasting the modal. See this video instruction:

Is it possible to set up the modal as a global section?

This is currently not possible.

Can the modal be linked from a global section?

The link will work only from one page, where you set up the modal, but not for other subpages. Its recommended to use non-global sections, which link to the modal.

How can I set up the modal to be automatically displayed when my site is visited?

Onepage does not provide an automated feature for displaying the modal on your page. The modal will only appear once the set-up button has been clicked.


Related articles


💡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! 🙂

Did this answer your question?