Publish and Embed Forms

Overview

The Publish url of a Form can be used to access the Form directly, without having to sign into Zoho Creator. The Embed url of a Form can be used by the Application owner to embed the Form in websites, wiki or blogs etc. You can also customize the look and feel of the embedded Forms to match it with your website. Generate the Publish and Embed urls using the "Publish" feature. 

Publish and Embed Forms

To publish or 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 Publish URL tab will contain the link which can be used to access the Form without signing in to Zoho Creator.
  4. 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 published and embedded Forms

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 of your Form. You can hide the Form header, specify the url to which the user should be re-directed to on Form submission, specify the success message to be displayed when a Form is submitted, 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 as #FF9999 or rgb(255,153,153) in the provided space. 
  • 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, chosse to show/hide the Form name, 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 loads 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. Suppose you have a long label and 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. For example, if the Form contains 5 Single Line fields, the specifications mentioned here will be applied to all five fields. 

Note:

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