Embed Forms in Webpages
Embedding your form in 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: On using this option, the form will be embedded as a part of your web page.
- JS Code: Paste this code in the HTML of your web page to embed forms in your web
- HTML Link: If you want to insert a link that redirects to your form, use this code.
- HTML Button: On pasting this code, a button will be included in your page. The form will be displayed in a new tab when your respondents click on the button.
- Popup Dialog: To display your form as a pop-up in 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:
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
- 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.