Style based URLs for Embedded forms

In this topic we list out the parameters used in customizing the look and feel of Zoho Creator forms and views. These parameters can be applied to the Forms and Views embedded in your HTML views.

Form Properties

DescriptionParameter/Value
Display form without form headerzc_Header=false
Form background colorzc_BgClr=<color value>
Form border colorzc_BdrClr=<color value>
Customize the success messagezc_SuccMsg=<custom message>

Embed form with transparent background

Refer this link to view a sample form with transparent background

zc_BgClr=transparent

Note:

  • Color values can be given as CSS or Hex values or color names.
    Example: zc_BgClr=_00FF00, zc_BgClr=lime, zc_BgClr=rgb(0, 255, 0)

Form Header Customization

DescriptionParameter/Value
Header colorzc_HdrClr=<color value>
Header heightzc_HdrHeight=<header height in px or %>
Header fontzc_HdrFont=<header font family>
Header font colorzc_HdrFontClr=<color value>
Header font sizezc_HdrFontSize=<header font size>

Note:

  • Color values can be given as CSS or Hex values or color names.
    Ex : zc_HdrClr=rgb(0, 255, 0) , zc_HdrClr=_00FF00, zc_HdrClr=lime
  • Width and height can be given in px, % etc

Form Footer Customization

DescriptionParameter /Value
Footer colorzc_FtrClr=<color value>
Button background colorzc_BtnBgClr=<color value>
Button fontzc_BtnFont=<font family>
Button text colorzc_BtnClr=<color value>
Button footer heightzc_FtrHeight=<footer height in px or %>
Button background color on mouse overzc_BtnMovrBgClr=<color value>
Button text color on mouse overzc_BtnMovrClr=<color value>
Button font sizezc_BtnFontSize=<footer font size>

Note:

  • Color values can be given as CSS or Hex values or color names.
    Ex : zc_HdrClr=rgb(0, 255, 0) , zc_HdrClr=_00FF00, zc_HdrClr=lime
  • Width and height can be given in px, % etc

Form Labels and Fields Customization

DescriptionParameter /Value
Field Label - background colorzc_LblClr=<color value>
Field Label - widthzc_LblWidth=<width in px or %>
Field Label - font familyzc_LblFont=<font family>
Field Label - font colorzc_LblFontClr=<color value>
Field Label - font sizezc_LblFontSize=<font size>
Field input - background colorzc_InpClr=<color value>
Field input - container widthzc_InpWidth=<width in px or %>
Field input - font familyzc_InpFieldFont=<font family>
Field input - font sizezc_InpFieldFontSize=<font size>
Field input - font colorzc_InpFieldFontClr=<color value>

Note:

  • Color values can be given as CSS or Hex values or color names.
    Ex : zc_HdrClr=rgb(0, 255, 0) , zc_HdrClr=_00FF00, zc_HdrClr=lime
  • Width and height can be given in px, % etc

Form Field Width/ Height Customization

Field TypeParameter for Field WidthParameter for Field Height
Single line/Emailzc_InpFieldWidth=<width>zc_InpFieldHeight=<height>
Multi Selectzc_MultiSelectWidth=<width>zc_MultiSelectHeight=<height >
Radio buttonzc_RadioWidth=<width>zc_RadioHeight=<height>
Decision boxzc_DecisionCBWidth=<width>zc_DecisionCBHeight=<height>
Number/Decimal/Percent/Currencyzc_NumberFieldWidth=<width>zc_NumberFieldHeight=<height>
Multi Linezc_TextAreaWidth=<width>zc_TextAreaHeight=<height>
Datezc_DateWidth=<width>zc_DateHeight=<height>
DateTimezc_DateTimeWidth=<width>zc_DateTimeHeight=<height>
Checkboxzc_CheckBoxesWidth=<width>zc_CheckBoxesHeight=<height>
Dropdownzc_DropDownWidth=<width>zc_DropDownHeight=<height>

Note:

  • Width and height can be given in px or %

View Customization

DescriptionParameter /Value
View - Header Colorzc_HdrClr=<color value>
View - border colorzc_BdrClr=<color value>
View - Group Header Colorzc_GrpHdrClr=<color value>
Need search optionzc_Search=<true/false>
Need pagination optionzc_Paging=<true/false>
Show/Hide record summary linkzc_Summary=<true/false>
Show/Hide "Add" linkzc_AddRec=<true/false>
Show/Hide "Delete" linkzc_DelRec=<true/false>
Show/Hide view headerzc_Header=<true/false>
Show/Hide view footerzc_Footer=<true/false>
Show/Hide filters in viewzc_Filter=<true/false>
Show/Hide column drop-down menuzc_ColMenu=<true/false>
Show/Hide summation rowzc_SumRow=<true/false>
Show/Hide "Edit" link in each recordzc_EditRec=<true/false>
Show/Hide "Duplicate" optionzc_DuplRec=<true/false>
Show/Hide "Save" option. Applies only for grid viewzc_SaveRec=<true/false>
Deluge name of field based on which calendar view
will be shown. Applies only for calendar view
zc_CalField=<delugeName>
Record limit of each view pagezc_RecLimit=<number>
Show/Hide record selection check box in each recordzc_RecSelect=<true/false>
Show/Hide secondary header (having Add, Edit,
Search, etc) in view
zc_SecHeader=<true/false>
Show/Hide "Bulk Edit" linkzc_EditBulkRec=<true/false>
Hide "Export" optionzc_Export=true (by default it is false)
Hide "Print" optionzc_Print=true (by default it is false)
Hide record level Print optionzc_RecPrint=false (by default it is true)

Note:

  • Color values can be given as CSS or Hex values or color names. Example: Ex : zc_HdrClr=rgb(0, 255, 0) , zc_HdrClr=_00FF00, zc_HdrClr=lime

Examples

  1. To customize the embedded form in your HTML view, add the required parameters after the params=' as shown in the sample code below.

    <div elName='zc-component' formLinkName='Sales'params='zc_Header=true&zc_SuccMsg=Data Added Sucessfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset&zc_HdrFontClr=Blue&zc_HdrFontSize=20'>Loading Form..</div>

  2. To customize the embedded view in your HTML view, add the required parameters after the params=' as shown in the sample code below.

    <div elName='zc-component' viewLinkName='Sales_View' params='zc_Summary=false&zc_Filter=false&zc_ColMenu=false'>Loading View...</div>