Embed Forms in Web Pages
Embedding your form on your website or blog is another way of reaching out to people. Read on to know more about the available options to embed Zoho Forms in your web pages.
Table of Contents
Embedding your form on your website or blog is another way of reaching out to people. Use the code we've provided to embed your forms anywhere on the web.
Under Embed Using, you will find the following choices:
- iframe: This option allows you to embed the form as a frame or an external resource.
- Hyperlink: This option allows you to embed the form as a hyperlink on your web page. Once a website visitor clicks the hyperlink, the form opens in a popup window.
- HTML & CSS: You can download the HTML and CSS codes of your form using this option.
- QR Code: This option generates a machine-readable code which respondents can scan from their mobile and fill out your form.
Your website layout and the theme used will affect how your form appears in your web page. We calculate the height and the width of your form based on the container in which you embed the form. You can copy and embed the code generated in Share > Embed Using > iframe.
To edit the height and width as per your requirement, you can edit in the code with the desired height and width in px.
Here's an example:
The code we've provided:
<iframe frameborder="0" style="height:500px;width:99%;border:none;" src='https://forms.zohopublic.com/zylker/form/ContentMarketingWorkshop/formperma/V0HqLCXF3AC0zw4BjDaqAgGZMtFQrRWkHU0hTwUJSj0'></iframe>
<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.
This option allows a user to have contextual resizing of their form. Once this script is used, your form will set to an initial height based on the visible fields in the first page of the form. As the user navigates through the form, it will resize dynamically based on the user action. The code snippet will automatically calculate the height of your form based on the visible fields in your form page.
If you want to keep the form height constant, you can do it using the Customize JS settings.
This option allows you to do the following:
A. Set Fixed Height
You can set a fixed height for your form using this option. Once a custom height is declared, your form will remain of constant height generating scroll based on the number of visible fields.
To set the custom height, follow these steps:
- Click Customize now button.
- Check the Set Fixed Height checkbox and fill the desired form height in the text box.
- Click Get Code > Copy Code.
- Paste the copied code to the HTML of your web page.
B. Include URL Parameters
You can include the following URL parameters using this option:
- Referrer name: This helps you track the source from which the form was filled.
- Field alias: This helps you to pre-fill the form fields with pre-defined values.
You can select both Fixed Height and Include Custom Parameters for your form.
Note: Click on the Copy Code button once you have generated the code with customized JS option. If not copied, you may end up using the code snippet for default auto-resizing.
On including the height and the width attributes:
While choosing the provided iframe code to embed in your web page, the height and width of the form is auto-calculated. This is an approximate value, hence there are chances of your forms not showing up correctly on your web page.
- There is too much white space around your form.
- A part of the form gets cut-off on embedding.
- The form gets embedded with scroll bars.
- The scrolls vary depending on each page length making your form appear uneven.
- Certain browsers and website builders do not support iframe causing blank space to appear on the web page.
Know where your respondents find your form by tracking referrals. With this feature, you will know where most of your traffic is originating from.
Say, you are embedding a form on two web pages - your Home page and your Contact Us page. Add a tracking parameter accordingly to the permalink of your form before embedding it.
For Home page:
<iframe frameborder="0" style="height:500px;width:99%;border:none;" src='https://forms.zohopublic.com/zylker/form/Workshop/formperma/136dhmA8E0?referrername=homepage'></iframe>
For Contact Us:
<iframe frameborder="0" style="height:500px;width:99%;border:none;" src='https://forms.zohopublic.com/zylker/form/Workshop/formperma/136dhmA8E0?referrername=contactus'></iframe>
By doing so, you will be able to know if a customer filled out your form from your Home page or Contact Us page.
- To know the results, click Reports tab > All Entries.
- A new column - Referrer name, will be added. The referrer name you had specified in your URL would be mentioned here. This will tell you where that particular registrant found your form.
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.
Follow these steps to embed the form as a hyperlink:
- Go to Share > Embed Using > Hyperlink.
- Copy and embed the provided HTML code.
To further modify and customize the forms which you will embed in your website, you can download your form as a plain HTML file or an HTML with CSS file.
To use this feature, go to Share > Embed Using > HTML & CSS.
The following fields are not supported in the HTML and CSS code of the forms:
- Unique ID
- Image Choice
- Zoho CRM
- Hidden fields and rules for hidden fields
- Page rules
- Captcha and ReCaptcha validation
Validation of all field inputs and the Signature field will work only on downloading the HTML and CSS code for the forms. Also, the 'Redirect to Website' feature is available for the HTML and CSS code only if you are under our paid plans.
This option allows you to share your form as a QR code with your respondents either on your web page or as a printed copy.
Follow these steps to generate and download the QR code:
- Go to Share > Embed Using > QR Code.
- Click the Download button to get the QR code. (the QR code generated will be in .png format.)
- The downloaded image can be embedded in your website or shared directly with your respondents.