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 iframe on your webpage using the code we provide. We calculate the height and the width of your form based on the container in which you embed the form.
To get the code to embed your form as a iframe,
-
In your form builder, navigate to Share > Embed > iframe.
- Choose between Basic iframe or Advanced iframe with Referrer Tracking based on your tracking needs.
-
Copy the code provided and embed it on your webpage.
iframe Types
Basic iframe
This iframe allows you to embed your form into your website and when a response is captured, it identifies the base URL of the website where the form is hosted, excluding any specific page paths or parameters.
Advanced iframe with Referrer Tracking
In addition to embedding form on your website, it captures the complete source URL, including the full page path and any URL parameters, giving you precise data on exactly where your leads are coming from.
Comparison
| Feature | Basic iframe | Advanced iframe with Referrer Tracking |
| Code | Simple iframe | iframe with script |
| Data Captured | Base URL | Full path and parameters |
Browser & Referrer policy | Obeys browser and referrer policies | Bypasses browser and referrer restrictions |
Implementation | Can be embedded in iframe element | Requires custom code snippet element (not all builders support this code in iframe) |
Example ( Consider the form is embedded in https://www.zylker.com/real-estate/apartment-listings ) | https://www.zylker.com/real-estate/apartment-listings/?utm_source=zylkerconstruction&utm_medium=referral |
Height and Width Adjustment
To edit the height and width, you can edit in the code with the desired height and width in px.
For example:
The code we have provided:
You can change it as given below:
<iframe frameborder="0" style=
"height:900px;width:400px
;border:none;" src='
https://forms.zohopublic.com/zylker/form/ContentMarketingWorkshop/formperma/V0HqLCXF3AC0zw4BjDaqAgGZMtFQrRWkHU0hTwUJSj0'></iframe>
This will make your form load with the desired height and width as per attribute value.
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:
<iframe frameborder="0" style="height:500px;width:99%;border:none;" allow="camera" src= "https://forms.zoho.com/zylker/form/TravelRequestForm/formperma/1d2ld7jUoGDLINcnloYo2R_VOPJGeUSGtSq5WWDf3sc?zf_enablecamera=true"></iframe>