Embed in Webpages

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

Overview

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 choices:

  1. iframe SourceThis option allows you to embed the form as a frame or an external resource. 
  2. JavaScript CodeThis option allows you to embed the form as a part of your webpage. You can customize the JS code for automatic height, adding field alias, and referral tracking using JS Code. 
  3. Popup DialogThis option allows you to load the form once the website visitor clicks a button or scroll to a certain section on your page.
  4. Download HTML with CSSYou can download the HTML and CSS codes of your form using this option.
  5. QR CodeThis option generates a machine-readable code which respondents can scan from their mobile and fill out your form. 

iframe Source

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 ShareEmbed Options > iframe Source.

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>

On changing:

<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. 

JavaScript Code

A JavaScript code helps you to embed a form in your website as a part of your web page. Unlike iframe, this option will embed the form as a page element and not as an external resource. You can choose to auto-resize or set custom height for your form using the JavaScript embed code. 

Note: If you have already embedded a JavaScript code to your website and later choose to auto resize or use custom height for your form, replace the existing code with the new code generate after you make changes in ShareEmbed Options > JavaScript code and click on Copy Code button.

Auto Resizing

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.

To get the auto resizing JS code go to ShareEmbed OptionsJavaScript Code and click the Copy Code button. Paste the copied code into the HTML of your website at the place where you want the form to appear on your page. 

If you want to keep the form height constant, you can do it using the Customize JS settings.

Customize JS

Use this option to customize the auto-generated JavaScript code. To do so, click on the Customize now button.

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: 

  1. To use a Customized JavaScript code snippet, go to Share > Embed Options > JavaScript Code.
  2. Click Customize now button.
  3. Check the Set Fixed Height checkbox and fill the desired form height in the text box. 

  1. Click Get Code > Copy Code.

  1. 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.

<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>

When to prefer JavaScript code over iframe?

While choosing the provided the 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.

In such cases, we recommend to use the JavaScript code which will help you overcome the following issues:

  • 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. 

With JavaScript code, your form dimensions are auto-calculated to fit the style of your web page. 

Track referrals

Know where your respondents find your form by tracking referrals. With this feature, you will know where most of your traffic is originating from.

To track referrals, you need to add a tracking parameter at the end of your FormPermalink (URL) before embedding the iframe or JavaScript code. 

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.

Tracking Results

  • 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.

Popup Dialog

This option lets you include a button in your web page. When the website visitors click this button, the form will open in a popup dialog box.

Follow these steps to embed the form as a popup dialog box:

  1. Go to Share > Embed Options > Popup Dialog.
  2. Copy and embed the provided popup HTML code.

Download HTML with CSS

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 Tab > Embed Options > Download HTML.

The following fields are not supported in the HTML and CSS code of the forms:

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

QR Code

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:

  1. Go to Share > Embed Options > QR Code.
  2. Click the Download button to get the QR code. (the QR code generated will be in .png format.)

  1. The downloaded image can be embedded in your website or shared directly with your respondents.

Also, the 'Redirect to Website' feature is available for the HTML and 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