Embed in Webpages

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:

  1. iframe SourceOn using this option, the form will be embedded as a part of your web page.
  2. JS CodePaste this code in the HTML of your web page to embed forms in your web
  3. HTML Link: If you want to insert a link that redirects to your form, use this code.
  4. 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.
  5. Popup Dialog: To display your form as a pop-up in your website, use this code.
  6. Download HTMLYou can download the HTML and CSS codes of your form using this option.
  7. 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.

iframe Source

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:

  1. Remove the 'position=absolute;' parameter from the code we've provided.
  2. 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>

On changing:

<iframe frameborder="0" style="height:900px;width:400px;border:none;" src='https://forms.zohopublic.com/zylker/form/Workshop/formperma/136dhmA8E0'></iframe>


JS Code

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.

For example,

The code provided:

<script type="text/javascript"src="https://forms.zohopublic.com/zylker/form/Workshop/jsperma/136dhmA8E0" id="ZFScript"></script>

On including the height and the width attributes:

<script type="text/javascript"src="https://forms.zohopublic.com/zylker/form/Workshop/jsperma/136dhmA8E0?height=700px&width=100%25"id="ZFScript"></script>

Download HTML

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:

  • Rating
  • Unique ID
  • Slider
  • Image Choice
  • Payment
  • Formula
  • 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.

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohoforms.com