Colorful Forms in Zoho Creator

Nov 09 2009 05:30:00 AM Posted By : Aparna
Comments (6)
How would you like it if the plain looking form that you created in Zoho Creator which looked like this,

Simple Form
could be transformed to look like this,
Coloured Form 1
this,
Coloured Form 2
or this? 
Coloured Form 3

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.

Customize


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!


Themes and Layouts for Zoho Creator

Oct 21 2009 08:30:00 AM Posted By : Aparna
Comments (1)

Have you ever felt that it would be nice if your Zoho Creator application could do with a different layout or color or font? Think no more. You can apply different layouts, colors, fonts and loads of other customizations to your Zoho Creator applications. No you don't have to be an html or css expert to do that. As is the norm at Zoho Creator, all this is possible at the click of a mouse.

Zoho Creator offers 6 different layouts for your applications. You can choose from Pane Left, Pane Right, Tabs,Tabbed Pane Left, Tabbed Pane Right and Dropdown menus. You can segregate your forms/views into various sections and apply the required layout so that your application gets the right look.

Layouts

Did you say what about the feel? Of course of course. We took care of that too. Zoho Creator offers 3 built in themes which can be applied to an application. Themes define the colour scheme of the application viz the colors that will be applied to the header strip, the component header, the buttons on the forms, etc., the over all font that will be applied to the application, the different styles that will be applied to the headers/tabs/ component headers/ forms/ views etc and so on.

Classic theme

The above one is what we call the Classic theme. Simple, straightforward, official looking which uses the Arial font across the application. The field labels are left aligned. Each form/view has a prominent looking header strip. And the views have borders on all sides.

The one below is the Gradient theme. A soft looking theme with Verdana font used across the application and a gradient applied to the header strip of the application. The field labels take the color of the theme.

Gradient Theme

The last but definitely not the least is the Contemporary theme. With Georgia font for the application and a very vibrant looking header strip for the application. The field labels/fields are center aligned and the rows in the view come with alternate row colors.

Contemporary

For now, the themes are available in 5 vibrant colours.

Theme Colours

The readymade themes don't quite hit home? Not a problem. You can also mix and match the various attributes and create your own themes. Again all these involve mere mouse clicks and no geeky coding!

Custom Theme

As you can see, we have ten attributes that you can play around with and come up with astounding themes for your application.You can also refer our help wiki for more details on creating different looks for your application.. 

So what are you waiting for? Give that plain looking application a dash of color and some style :)