Creator Help

Embed Forms And Reports In Website

Overview

One of the very useful features of Zoho Creator is embedding of forms and reports. Zoho Creator lets you embed Forms and Reports in your website/blog just by pasting few lines of code. You can also customize the look and feel of the embedded form/report to match your website.

Embed Forms

To embed a Form in live mode,

  1. Select the Form to be embedded and click on the Settings icon beside the Form name and select Embed in your website option, in Live mode.(To go to live mode, click on Access this application button).
  2. The Embed dialog will be displayed with the <iframe> code, as shown in the screen-shot below. If your form is private, users will have to login to access your embedded form. To access the form without login, select the Click Here link. You will now find an encrypted code appended to the existing url.
  3. To configure next url or customize the header, footer, labels and fields of embedded forms, select Customize Form Properties & Look and Feel. The code displayed will be updated with the selected customization options. Refer the customization section for more information.
  4. Copy and paste the code snippet displayed to your website.

To embed a form in edit mode,

    1. Select the form to be embedded and click on Form Settings -- Publish
    2. The Embed dialog will be displayed with the <iframe> code, as shown in the screen-shot below. If your form is private, users will have to login to access your embedded form. To access the form without login, select the No Login required check box. You will now find an encrypted code appended to the existing url.
    3. You can also configure form properties, header and footer, labels and fields of the embedded form. The code displayed will be updated with the selected customization options. Refer the customization section for more information.
    4. Copy and paste the displayed code to your website.

Note:  

To view the data entered in an embedded form:

  • Log in into Zoho Creator using your Zoho Credentials.
  • Click on the name of the application which contains the form that you’ve embedded.
  • All data entered into a form say “Form A” is stored into a report called “Form A Report”.
  • Click on “Form A Report” to see the data that has been entered.

Customize Embedded Forms

The customization options are divided into 4 sections, each section offering customization parameters for various parts of the form. 

Form Properties

The Form Properties section offers modifications for some basic configurations for your form.  You can hide the form header, specify the url to which the user should be re-directed to, on submitting data into the form, specify the success message to be displayed when data is submitted in the form, specify the background and border color to be applied to the form etc. For specifying any attribute involving color, you have to specify the rgb or hex code. You can use guides like this or this to give you the exact color codes. For example, you can specify the background color for the form in the box provided as #FF9999 or rgb(255,153,153). 

Header and Footer

The Header and Footer secton helps you to tweak the header and footer of the form. The header is the top strip in the form which contains the form name. The footer is the bottom strip containing the “Submit” and “Reset” buttons in the form. 

You can specify a color for the header so that it matches your form’s background color, the height, if the form name is being displayed, the font in which the form name is it to be displayed, the font size and the font color as well. As for the footer, in addition to altering the color and height, you can specify a number of attributes for the buttons being displayed. You can set the background color, font family, text color to be applied to the button when the form is loaded and when there is a mouse over the button etc for the buttons in your form.

Labels and Fields

The Labels and Fields section deals with customizing the field labels and the fields in your form. You can set a background color for the field labels so that they are highlighted and stand out from the background, the font family, font size and font color and also the width of the label. Supposing you have a long label and if you would like to wrap it to your convenience, you can give a small value for the width. Or if you would not like the field label to wrap then you can give the value accordingly. For the fields, you can specify the background color, width, the font color, family and the size as well. 

Field Width and Height

The Field Width and Height section deals with customizing the width and height of the fields. For each field type supported in Zoho Creator, you can specify the width and height attributes. e.g., if the form contains 5 Single Line fields, the specifications mentioned here will be applied to all five fields. 

The attributes chosen for the various sections will be appended to the code snippet. Copy the code snippet as it is and paste it in your blog/website.

Display error messages in visible area of the form

By default, success/error messages are displayed in the top portion of the embedded form. If the form is too long you have to scroll up to the top of the form to view these messages.

To display the message in the visible area of the form:

  1. Embed a js file using a script tag as shown in the example below:

    <script id='zc_external' type='text/javascript' src='http://creator.zoho.com/appcreator/js/embed.js?SRC URL></script>

    where, the SRC URL is the value of "src" parameter in the iframe you embed. Note that this script should be included before the iframe snippet.

  2. Modify the iframe snippet displayed by Zoho Creator in the embed dialog, by adding one more paramenter: id="zohoform".

    <iframe height='2600px' id="zohoform" width='100%' name='zoho-formname' frameborder='0' allowTransparency='true' scrolling='auto' src='SRC URL'></iframe>

Access Private Embedded Forms without Login

To enable shared users to access your private embedded form without login, select the Click Here link displayed in the embed dialog. You will now find an encrypted code appended to the existing <iframe> code, as shown in the screen-shot below.

Copy and paste the code snippet to your website.

Embed Reports

To embed a report,

1. Select the report to be embedded and click on Setting icon on the top right and mouse over to Links and select Embed in your website option.

2. The emded dialog will be displayed with the <iframe> code. To get javascript snippet instead of <iframe>, select the link Get JavaScript Snippet. Copy and paste the code snippet to your website. The embedded report will have permissions to Add, Modify and Delete records based on the Edit permissions provided.

3. By default, the embedded report will enable users to configure the header, number of records to be displayed in a page, search records and view the record summary. To remove these items from the embedded report, deselect the required items and then copy-paste the <iframe> code to your website/blog.

Access Private Embedded Reports without Login

To access the embedded report without login, select the Click Here option displayed in the report embed dialog. You will now find an encrypted code appended to the existing code. Copy and paste the code snippet to your website.

Embed Pages

To embed a Page, the Embed option will be available only in the edit mode.

  • Select the Page from the Dashboard. (Only the application owner has permission to edit his application)
  • Click on Setting icon ->Embed in your website on the top from the page header.
  • The embed dialog will be displayed with the <iframe> code.Copy and paste the code snippet to your website/blog.

Top