Colorful Forms in Zoho Creator

How would you like it if the plain looking form that you created in Zoho Creator which looked like this,

could be transformed to look like this,

this,

or this?

Great, right? Yes, it is possible to revamp your forms into stunning works of art. The actual forms displayed above can be accessed from

Plain

ArtWork1

ArtWork2

ArtWork3

Zoho Creator offers a plethora of customizing options for your forms. You can find these options in the embed dialog. Click on the “Customize Form Properties and Look and Feel” to reveal the options. The customization options are divided into 4 sections, each section offering customization parameters for various parts of the form.

The first section offers modifications for some basic configurations for your form like the page/iframe to which the user should be re-directed to, on submitting data into the form,  the success message to be displayed when data is submitted in the form, the background and border color to be applied to the form etc. For specifying any attribute involving color, you’d 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). For standard colors like teal, cyan etc you can use the color names as well. Once you key in the color code and click outside the  textbox, you can notice that the text box where you entered the code displays the color specified by you. This way you can make sure you are setting the desired color.The height, width attributes can be specified in pixels or % e.g., 50px or 50 %. And did I mention, you can also hide the form header as well? Yes you can do that too!

Now that we’ve applied some background coloring to the form, lets tweak the header and footer of the form a bit. The second section will help you with that. 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 altering the color and height, you can specify a number of attributes for the buttons being displayed. How about setting 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? Terrific? You can do that too.

Coming to the most important part of your form. The fields. The third section deals with giving the field labels and the fields themselves the right look. 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 loong label and if you’d 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. 

Now that you’ve splashed enough color in your form, you can set right some heights and widths. In the final section, 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.

Once you have picked and chosen the attributes from the various sections, you’d notice that some parameters have been appended to the code snippet. Copy the code snippet as is and paste it in your blog/website and boom! Your colorful form, looking just the way you want it to is ready to go!