Embed Forms and Views

Overview

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

Embed Forms

To embed a form,

1. Select the form to be embedded and click on the Setting 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.
4. Copy and paste the code snippet displayed to your website.

Customize Embedded Forms

The Form embed dialog provides options to customize the header, footer, labels and fields of embedded forms.

1. Select the form to be embedded and click on click on the Setting icon beside the Form name and select Embed in your website option
2. Click on Customize Form Properties & Look and Feel
3. The left-side tree will display the options to customize form properties, header, footer, labels and fields. Click on the required option and specify the values on the right-side. The embed code snippet displayed below, will be updated with the values you specify in this dialog.
4. Copy and paste the embed snippet in your website or use the permalink.

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 Views

To embed a view (all views other than HTML view)

1. Select the view 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 view will have permissions to Add, Modify and Delete records based on the Edit permissions provided for this view.
3. By default, the embedded view will enable users to configure the number of records to be displayed in a page, search records and view the record summary. To remove these items from the embedded view, deselect the required items and then copy-paste the <iframe> code to your website/blog.

To embed a HTML view

For an HTML View, theembed option will be availableonly in the edit mode.

1. Select the View tab from your applications Edit mode. (Only the application owner has permission to edit his application)
2. Select the required HTML view and click on Setting icon ->Embed in your website from the view header.
3. Theembed dialog will be displayed with the <iframe> code.Copy and paste the code snippet to your website/blog.

To access private embedded views without login

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