Embed Forms, Reports and Pages

Overview

You can embed Zoho Creator Forms and Reports in your website, wiki or blogs just by pasting the embed url of the Form or ReportYou can also customize the look and feel of the embedded Form/Report to match it with your website.

Note:

  • While accessing a published page, all the Forms/Reports embedded into it should also be published to avoid errors/conflicts.

Embed Forms

To embed a Form,

  1. Navigate to Form Settings -> Publish.

    (or)
    Navigate to Application dashboard and click on Publish for the required Form.
  2. On the next screen, click on Publish.
  3. The Embed URL tab will contain the link which can be used to embed the Form in your website/blog.

Note:

  • To unpublish, click on Remove Publish.
  • If any changes are made to the published Form, you need to publish the Form again for changes to reflect.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/< app owner name >/< app name >/form-embed/< form-name >/< pre-generated encryption key >'></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/sampleapps/sales-database/form-embed/Sales/pre-generated-sample-encryption-key'></iframe>

Customize look and feel of embedded forms

The form 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 section 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. 

Embed Reports

To embed a Report,

  1. Navigate to Report Settings -> Publish.

    (or)
    Navigate to Application dashboard and click on Publish for the required Report.
  2. On the next screen, click on Publish.
  3. The Embed URL tab will contain the link which can be used to embed the Report in your website/blog.

Note:

  • To remove publish, click on Remove Publish.
  • If any changes are made to the published Report, you need to publish the Report again for changes to reflect.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/< app owner name >/< app name >/view-embed/< report name >/< pre-generated encryption key >'></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zoho.com/sampleapps/assignment-tracker/view-embed/Dashboard/pre-generated-sample-encryption-key'></iframe>

Customize look and feel of reports

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

Header and Footer

The header is the top strip in the report which contains the report name. The footer is the bottom strip in the report. You can show or hide the header and footer in the report, specify a color for the header, group header and border so that it matches your report's background color.

Menu Bar

The Menu Bar section provides option to show or hide the following parameters:

  • Record Print(right click)
  • Export Records
  • Record Search
  • Record Sum
  • Record Selection
  • Filter
  • Column menu
  • Record Limit

  • Page Navigation

Record Permissions

The Record Permissions section provides option to show or hide the following parameters:

  • Add Record
  • Edit Record
  • Bulk edit record
  • Duplicate record
  • Save record
  • Delete record

Embed Pages

To embed a Page,

  1. Navigate to the Application dashboard -> Pages and click on Publish for the Page you want to publish.
  2. The link in the Embed URL tab can be used to embed the Page in your website/blog.

(or)

  1. Navigate to the required page in edit mode, and click on the icon on the top right corner. Select Publish header and click on Publish.
  2. The link contained in the Embed URL section can be used to embed the Page in your website/blog.

Sample URL Format

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/< app owner name >/< app name >/view-embed/<page name >/< pre-generated encryption key >'></iframe>

Sample URL

<iframe height='500px' width='100%' frameborder='0' allowTransparency='true' scrolling='auto' src='https://creator.zohopublic.com/sampleapps/assignment-tracker/view-embed/Dashboard/pre-generated-encryption-key'></iframe>

Note:

  • Internet Explorer users make sure you do NOT have the following setting in your website, to ensure proper loading of embedded forms and reports.
    <meta http-equiv="X-UA-Compatible" content="IE=8">
  • To prompt for login in embedded forms/reports/pages, remove the encrypted key in the embed url and replace zohopublic with zoho.