Embedding Forms | Embed a form using JavaScript - Zoho Forms

Embed a form using JavaScript

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

Using the Default JS Code

This option allows a user to have contextual resizing of their form. Once this script is used, your form will be 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,
  1. In your form builder, navigate to  Share  tab and click  Embed  in the left menu.
  2. Click  Javascript .
  3. Under  Default JS Code , click  Copy Code .
  4. Paste the copied code into the HTML of your website at the place where you want the form to appear on your page. 

Customizing the JS Code

You can set a fixed height for your form and include URL parameters by customizing the auto-generated  JavaScript code.

Set Fixed Height

You can set a fixed height for your form using this option. If your form is long, a scroll will be provided.
To use a customized  Javascript  code snippet to set a fixed height for your form,
  1. In your form builder, navigate to  Share  tab and click  Embed  in the left menu.
  2. Click  Javascript  and click Customize Now .
  3. Select  Set Fixed Height  and enter the desired form height. 

  4. Click   Get Code, then click  Copy Code .

  5. Paste the copied code to the HTML of your web page.

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. 

Click   Get Code  and click  Copy Code Paste the copied code to the HTML of your web page.
Note If you have already embedded the JavaScript code to your website and later choose to use custom height or include URL parameters for your form, make sure that you click  Copy Code  to copy the code generated after customizing the JS code. If not copied, you may end up using the code snippet for default auto-resizing. Replace the existing code with the copied code in your webpage.

<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 iframe code to embed in your webpage, 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 you to use the JavaScript code, which will help you overcome the following issues:

  • 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 iframes, resulting in blank space in place of the form on your webpage
With the JavaScript code, your form dimensions are auto-calculated to fit the style of your webpage. 

    Zoho DataPrep Personalized Demo

    If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

    Zoho CRM Training

      Create, share, and deliver

      beautiful slides from anywhere.

      Get Started Now

              Zoho CRM Training Programs

              Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

              Zoho CRM Training

                  Zoho SalesIQ Resources

                      Zoho TeamInbox Resources

                                Zoho DataPrep Resources

                                  Zoho DataPrep Demo

                                  Get a personalized demo or POC

                                  REGISTER NOW

                                    Design. Discuss. Deliver.

                                    Create visually engaging stories with Zoho Show.

                                    Get Started Now

                                                          • Related Articles

                                                          • Embed a form using iframe

                                                            Your website layout and the theme used will affect how your form appears in your web page. You can embed your form as a frame on your webpage using the code we provide. We calculate the height and the width of your form based on the container in ...
                                                          • Embed a form using HTML/CSS codes

                                                            To further modify and customize the forms which you wish to embed in your website, you can download your form as a plain HTML file or a HTML with CSS file.  ​ To do so,  In your form builder, go to Share > Embed > HTML & CSS. Click Generate Code to ...
                                                          • Embed form as a Hyperlink

                                                            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. To embed the form as a hyperlink: In your form builder, go to  Share  >  Embed  >  Hyperlink . ...
                                                          • Embed or share a form as 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.  To generate and download the QR code, In your form builder, go to  Share  >  Embed  >  QR Code . Click  Download  to get the ...
                                                          • Form Building

                                                            Why is the decision box checked state not getting pre-filled in the redirected form? If you have configured to pre-fill the decision box state from the current form in the redirected form, check for the following cases: Case 1: If you have customized ...



                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.


                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.


                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.

                                                          CRM Tips

                                                          Make the most of Zoho CRM with these useful tips.

                                                            Zoho Show Resources