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 choose to auto-resize or set custom height for your 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 the 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. 

    Customizing the JS Code - Set Fixed Height
  4. Click Get Code, then click Copy Code.

    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.

    Customizing JS - Include URL Parameters
  • Field alias : This helps you to prefill the form fields with predefined values. 

    Customizing JS - Include URL Parameters
Click Get Code and click Copy CodePaste the copied code to the HTML of your web page.
NoteIf 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.
Example: 

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

You can track referrals to know which website your respondents found your form from and also prefill your embedded forms to make the form filling experience simpler for your website visitors.

How to embed a form with webcam option in Image Upload field?

If your embedded form has an Image Upload field, respondents will not be able to capture pictures using the webcam. To allow this, you must include the following in the embed code:
  1. allow="camera"
  2. ?zf_enablecamera=true
For example:
enable webcam in an embedded for

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
With the JavaScript code, your form dimensions are auto-calculated to fit the style of your webpage. 

    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
      Redefine the way you work
      with Zoho Workplace

        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 Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION





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

                        Write to us:  support@zohoforms.com

                                                                       
                            



                            






                              You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                  Manage your brands on social media

                                    Zoho Desk Resources

                                    • Desk Community Learning Series


                                    • Digest


                                    • Functions


                                    • Meetups


                                    • Kbase


                                    • Resources


                                    • Glossary


                                    • Desk Marketplace


                                    • MVP Corner


                                    • Word of the Day


                                      Zoho Marketing Automation

                                        Zoho Sheet Resources

                                         

                                            Zoho Forms Resources


                                              Secure your business
                                              communication with Zoho Mail


                                              Mail on the move with
                                              Zoho Mail mobile application

                                                Stay on top of your schedule
                                                at all times


                                                Carry your calendar with you
                                                Anytime, anywhere




                                                      Zoho Sign Resources

                                                        Sign, Paperless!

                                                        Sign and send business documents on the go!

                                                        Get Started Now





                                                                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 options in Zoho Forms - Which one to choose?

                                                                                                  A website is your platform where you showcase your products or services and connect with your potential customers. So what after they land on your website? They may start browsing your products or services. Browsing is great, but to move them from ...
                                                                                                • 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 a form as a Lightbox pop-up

                                                                                                  Lightbox form is a pop-up that overlays the webpage, when the user engages with your webpage . This helps in drawing the attention of your website visitors to the form. For example, if you require your customers to subscribe to your newsletter to ...
                                                                                                • 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 ...
                                                                                                • Embedding forms on a WordPress website

                                                                                                  WordPress is a free website creation platform. If you are using Wordpress to build your website, you can embed your Zoho Forms form as follows: For WordPress 5.0 and above In your Zoho Forms account, create a form for your WordPress site. Install and ...
                                                                                                Wherever you are is as good as
                                                                                                your workplace

                                                                                                  Resources

                                                                                                  Videos

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



                                                                                                  eBooks

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



                                                                                                  Webinars

                                                                                                  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