Embed a form as a Lightbox pop-up
Lightbox form is a pop-up that overlays the webpage, when the user engages with your webpage
. This helps in drawing the attention of your website visitors to the form. For example, if you require your customers to subscribe to your newsletter to receive updates about your products and the discounts on them, you can use a Lightbox email subscription form on your webpage which shows up after the user has spent a certain amount of time on the website.
Check out a quick video on customizing lightbox pop-up form for your webpage.
To embed your form as a Lightbox pop-up on your webpage,
-
In your form builder, navigate to the
Share
tab >
Embed
>
Lightbox.
-
Click
Get Started.
-
In the pop-up, you can customize the height and width of the form in px to suit your website by selecting the
Set Pop-up Dimensions
option under
Display Settings. A scroll will be provided if the form is long.
- Under Advanced Properties, you can set the placement of the lightbox form on your webpage from the Position dropdown.
- You can choose an Animation style (Slide-In / Fade-In) for the lightbox form while it loads on your webpage.
-
You can also customize the look of your form by adding color to the border of Lightbox pop-up using the
Apply Border & Color
option.
-
Under
Launch settings, you can choose when the Lightbox form should pop up on your webpage from the options under
Pop-up Launch Criteria.
-
You can additionally choose to pre-load form as the website loads and keep the form hidden until the selected
Pop-up Launch Criteria
displays your Lightbox form. Enabling this option will prevent any form loading delays when the website loads.
-
You can choose to have a Pop-up Launch Button on your webpage which will show up the Lightbox form when clicked.
-
If you wish to prefill your Lightbox form and add referrers to track sources,
-
Configure
Field Alias
for the fields in the form that you wish to prefill.
-
Select the
Include URL parameters
option.
-
Map the Parameter Names ( denoted by the configured Field Aliases/ Referrer Name to
track the source from which the form was filled
) to the Parameter Values that are to be prefilled.
-
Click
Get Code and click Copy Code.
- Paste the copied code to the HTML of your webpage.
Pop-up Launch Criteria
On Page Load
Choose this option if you want the form to load and show up simultaneously with your webpage. The form will be loaded and displayed as soon as the website loads. For example, you can show your visitors a Sign Up form to get a time-sensitive discount on signup in your online store page as soon as the page loads.
On Page-Exit Intent
Choose this option if you want your form to show up when a visitor decides to leave the page in order to re-capture the attention of visitors abandoning your webpage. For example, if a visitor leaves your blog page due to a shortage of time, you can show up a form to get their email address and send a PDF copy of the important details on your website to their email for future reference.
After a
Time Span
Choose this option if you want your form to show up after the user has spent some time and engaged with your webpage. Enter the delay in seconds after which your form has to show up over the webpage. For example if you have Sign Up form, it would be appropriate to give the visitors some time to engage with your website before requesting for their details. Choose a time when your visitors will have been influenced by your content and will not be annoyed by your pop-up form.
Based On Scroll Percent
Choose this option if you want your form to show up after the user has scrolled to a certain percentage of the website. Scrolling through the content could indicate a visitor's interest on your webpage and choosing to show up the form after they have scrolled to a certain portion, can fuel their interest. For example, you can find the point/section of your website where the user would have received necessary details from the content and show up your Subscription form when the user scrolls down past that point.
You can
track referrals
to know which website your respondents found your form from and also
prefill your embedded forms
to make the form filling experience simpler for your website visitors.
How to embed a form with webcam option in Image Upload field?
If your embedded form has an
Image Upload
field, respondents will not be able to capture pictures using the webcam. To allow this, you must include the following in the embed code:
-
allow="camera"
-
?zf_enablecamera=true
For example:
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Embed options in Zoho Forms - Which one to choose?
A website is your platform where you showcase your products or services and connect with your potential customers. So what after they land on your website? They may start browsing your products or services. Browsing is great, but to move them from ...Embed form as a Hyperlink
This option lets you include the form as a hyperlink on your web page. When the website visitors click this link, the form will open in a popup window. To embed the form as a hyperlink: In your form builder, go to Share > Embed > Hyperlink. Copy ...Deleting a Form
Table of contents Moving a form to trash Restoring a form Deleting a form permanently If you no longer require a form, and would like to remove the form and all its associated data, you can choose to move them to the trash or delete them permanently. ...Embed a form using iframe
Your website layout and the theme used will affect how your form appears in your web page. You can embed your form as a frame on your webpage using the code we provide. We calculate the height and the width of your form based on the container in ...Embed a form using HTML/CSS codes
To further modify and customize the forms which you wish to embed in your website, you can download your form as a plain HTML file or a HTML with CSS file. To do so, In your form builder, go to Share > Embed > HTML & CSS. Click Generate Code to ...
New to Zoho LandingPage?
Zoho LandingPage Resources