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.
To embed a Form in live mode,
To embed a form in edit mode,
To view the data entered in an embedded form:
The customization options are divided into 4 sections, each section offering customization parameters for various parts of the form.
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.
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:
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.
<iframe height='2600px' id="zohoform" width='100%' name='zoho-formname' frameborder='0' allowTransparency='true' scrolling='auto' src='SRC URL'></iframe>
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.
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.
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.
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.
To embed a Page, the Embed option will be available only in the edit mode.