Embed Forms in Web pages
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 options, you will find the following options:
- iframe Source: When you choose this option, you can embed forms on your webpage by pasting the iframe tag that we provide.
- Popup Dialog: To display your form as a pop-up on your website, use this code.
- Download HTML: You can download the HTML and CSS codes of your form using this option.
- QR Code: A QR code is automatically generated for all your forms. Click on QR code >> Download to download the QRcode. Include it your printed material to reach your audience offline as well.
Your website layout and the theme used will have an effect on 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. This is an approximate value and so, there are chances of your forms not showing up correctly on your web page.
You could be facing these problems:
- 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.
To fix this, follow these steps:
- Remove the 'position=absolute;' parameter from the code we've provided.
- Adjust the value of the height and the width attribute. Make sure you specify the desired height 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/Workshop/formperma/136dhmA8E0'></iframe>
<iframe frameborder="0" style="height:900px;width:400px;border:none;" src='https://forms.zohopublic.com/zylker/form/Workshop/formperma/136dhmA8E0'></iframe>
To get your forms to fit perfectly in your website, adjust the height and the width of your form. To do so, include height and width attributes to the code provided. Make sure you specify the height in px.
The code provided:
On including the height and the width attributes:
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 - Referrername, will be added. The referrername you had specified in your URL would be mentioned here. This will tell you where that particular registrant found your form.
To further modify and customize the forms which you will embed in your website, you can download the HTML or CSS codes of your forms. You can download the forms in the formats of plain HTML, as well as, CSS.
To use this feature, go to Share Tab>>Embed Options>>Download HTML.
The following fields are not supported in the HTML/CSS code of the forms:
- Unique ID
- Image Choice
- Zoho CRM
- Hidden fields and rules for hidden fields
- Page rules
- Captcha validation
Validation of all field inputs and the Signature field will work only on downloading the HTML/CSS code for the forms.
Also, the 'Redirect to Website' feature is available for the HTML/CSS code only if you are under our paid plans.