Embed a form as a Lightbox pop-up
-
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
On Page-Exit Intent
After a
Time Span
Based On Scroll Percent
How to embed a form with webcam option in Image Upload field?
-
allow="camera"
-
?zf_enablecamera=true
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:
Still can't find what you're looking for?
Write to us: support@zohoforms.com
|
Quick Links |
Workflow Automation |
Data Collection |
|
|
||
|
Form Templates |
||
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Zoho Sheet Resources
Zoho Forms Resources
Zoho Sign Resources
Sign, Paperless!
Zoho TeamInbox Resources
Zoho DataPrep Resources
Design. Discuss. Deliver.
Related Articles
Embed options in Zoho Forms - Which one to choose?
Embedding your form on your website or blog is another way of reaching out to people. Use the code we have provided to embed your forms anywhere on your webpage. You can embed your form using: iframe: This option allows you to embed the form as a ...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 ...