Popup Forms

Popup Forms

You can mark a web form as a Popup Form for tracked pages of your web site and define conditions when it should be shown.

For example, a form can be made to pop up when a site visitor leaves a page:

You can add padding, text color, background color, background image, and, if needed, adjust the z-index of you pop-up form:

To add a setting, click in its preview box. To remove a setting, click next to it.

Adding Padding

Use the Padding field to add the value of the Padding CSS property to create space around the form:

Setting Text Color

Click in the Text color box and use the color picker to set the color for all text on the form.

Setting Background Color

Click in the Background color box and use the color picker to set the color that will be used for the form. It is recommended to set the background color even if you use a background image as it can be used in those cases when the image could not be loaded for any reason.

Setting Background Image

Click in the Background image box and select an image in the Image Editor.

If needed use the editor toolbar commands to adjust your image. Click OK when ready.

Select an image size setting from the Image Size list:

• auto. The background image is displayed in its actual size in the top left corner. If the image is bigger than the form, then it will be cut.


If the image is less than the form then it will be repeated.

• Cover. The image will be resized proportionally to its minimum size fully covering the whole form.

• Contain. The image will be resized proportionally to its maximum size fully visible inside the form.

To add extra design to your form, you can set custom CSS.

To make a form work as a popup form:

1. Select Popup Form.
2. From the Show list choose when it should be shown:
• Before Exit. The form will pop up whenever a page visitor shows intentions to leave the page. For example, when the mouse cursor leaves the page window.
• After Scrolling. The form will pop up after a page visitor scrolled the page more than you specified in percents.
• After Time. The form will pop up when a specified amount of seconds has passed.
3. From the Use on list select web pages where you want this form to appear. Please note that one web page can have one form of each type. It is not recommended to have more than one form of the same type available for a page as it is very complicated to determine which one will be shown in various circumstances.
• all pages. The form will work for all tracked pages (all pages where the Vine script is added).
• these pages. You need to specify pages where you want the form to appear. You can use wildcards at the end of web address.

• all pages but. You need to specify pages where you do not want the form to appear. The form will work in all tracked pages except the ones you set here:

4. From the Show to list select who you want the form to be shown to:
• All Persons. The form will be shown to all web page visitors.
• Identified persons. The form will be shown only to recognized web page visitors.
• Anonymous persons. The form will be shown only to unknown web page visitors.
5. Select Modal if you want to make other elements on the page not accessible when the popup form is shown.
6. Use the After closing the form, show again after and After submitting the form, show again after settings to define when you want the form to pop up again in the same browser after the form has been closed or submitted, respectively.


You can only use positive integers to define a period of time in hours or days. Zero means the form can be shown again immediately after it has been closed or submitted.