Colorful Forms in Zoho Creator

Zoho Creator | November 9, 2009 | 3 min read

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!

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. bwm.digital

    i can’t work out how to make a view that uses a join of two tables. any areas in help you can point to?

  2. bwm.digital

    i can’t work out how to make a view that uses a join of two tables. any areas in help you can point to?

  3. Charles

    @schultzter @Eagle Thanks for your comments. This feature is almost a year old and it was one of the under-used features and hence this post. We are definitely not losing the focus on the important ones. We are listening and we are working hard to give users a powerful platform. Support for Chrome is under development. It should be available soon.Creator does have iterators but you can iterate only on fetched data. We generally encourage loop-free programming. Please find below the link of a presentation published by our CEO Sridhar Vembu about Loop-free programming and its benefits.http://show.zoho.com/embed?id=3499000000030085Since Zoho Creator relies heavily on the relational database structure, we have intentionally not given the general iterators like for loop and while loop. It will make sure that the system is not abused. It will also make sure that the code written is always bound to the designed data model and is less error-prone.Charles

  4. Charles

    @schultzter @Eagle Thanks for your comments. This feature is almost a year old and it was one of the under-used features and hence this post. We are definitely not losing the focus on the important ones. We are listening and we are working hard to give users a powerful platform. Support for Chrome is under development. It should be available soon.Creator does have iterators but you can iterate only on fetched data. We generally encourage loop-free programming. Please find below the link of a presentation published by our CEO Sridhar Vembu about Loop-free programming and its benefits.http://show.zoho.com/embed?id=3499000000030085Since Zoho Creator relies heavily on the relational database structure, we have intentionally not given the general iterators like for loop and while loop. It will make sure that the system is not abused. It will also make sure that the code written is always bound to the designed data model and is less error-prone.Charles

  5. Eagle

    Yep. I agree with schultzter. Colors and themes are ok , but it doesn’t deserve such a lengthy posting …It should be just a checklist …We are expecting much more serious stuff from Creator and if this is (colors et all) going to drive the Creator roadmap then I guess I am sorry. “Owner” of Creator ..listening ??

  6. Eagle

    Yep. I agree with schultzter. Colors and themes are ok , but it doesn’t deserve such a lengthy posting …It should be just a checklist …We are expecting much more serious stuff from Creator and if this is (colors et all) going to drive the Creator roadmap then I guess I am sorry. “Owner” of Creator ..listening ??

  7. kunjichen

    I just like it!

  8. kunjichen

    I just like it!

  9. Prasad

    Is there any plans of releasing “Zoho Themes”?? this could help making the website or other apps providing consistent look along with Creator Forms.Your update will be helpful

  10. Prasad

    Is there any plans of releasing “Zoho Themes”?? this could help making the website or other apps providing consistent look along with Creator Forms.Your update will be helpful

  11. schultzter

    I just checked and Creator still doesn’t have loops (for..next, while, etc.). Pretty colours are nice but I had to abandon my project for lack of loops (the work-around was too silly).And what about support for Chrome? I haven’t checked recently but at the time Chrome was not a viable browser for Creator Apps!

  12. schultzter

    I just checked and Creator still doesn’t have loops (for..next, while, etc.). Pretty colours are nice but I had to abandon my project for lack of loops (the work-around was too silly).And what about support for Chrome? I haven’t checked recently but at the time Chrome was not a viable browser for Creator Apps!