Zoho Creator – Custom styling of a form
Yes, Zoho Creator DOES allow CSS; You just need to know how!
Zoho Creator is a great tool for a lot of types of internal and external applications. The default styling options however are not that great… I was struggling with this for a while until I stumbled across some posts on the Zoho Community pages where custom styling was discussed. I tried it out, and it worked! However, it is not as straightforward as regular CSS, as it involves overriding the default styling and not all styling options are allowed by the system: they simply get stripped out.
How does it work?
Usually you would style a website using a CSS stylesheet, that gets loaded in the header of the page. Unfortunately, that is not possible in Zoho Creator. But there is a little trick that lets you insert your own sort of stylesheet into the form directly. It involves an Add Notes field and an On Load workflow. We are going to create a CSS stylesheet as a string in a workflow and then put that string into the Add Notes field as the content. Instead of displaying the content, the style will then actually be loaded into the page and change how your form looks!
So how do we do it?
Step 1: Add the Add Notes field
The first step is to add an Add Notes field to the form. I always like to put it at the very top, but it doesn’t really matter where you put it, as we’re going to hide it anyway: it’s not going to be visible in the form. Give the field a logical name, for instance “styling”.
Step 2: Create a new workflow
Now, create a new workflow. Select the form you just inserted the Add Notes field in (in my example, this is the Apply Leave form). This workflow should always run when the form is opened, so select “Created or Edited” for Run when a record is… Then, select “Load of the form” from the dropdown menu next to When to trigger workflow. Finally, give it a logical name, like “form styling” and press “Create Workflow”.
Step 3: Enter the basic styling code
Now that we have created the workflow, we can enter the code in a new Action using Deluge. The five lines of Deluge script is all you need to change the whole styling of your form!
Line 1 is used to hide the field (called “styling” in my case) from your form. Line 2 starts the stylesheet. Line 3 can be repeated as many times as needed to include more CSS, as it makes the code easier to read than putting everything in one line. Line 4 ends the stylesheet and finally line 5 inputs the CSS code into the “styling” field.
hide styling;
css = "<style>";
css = css + "*ANY CSS YOU WANT TO ADD GOES HERE*";
css = css + "</style>";
input.styling = css;An example
Now that you know the basics, let’s show a little example. I’m using the standard “Apply leave” form template to show this. Let’s say we want to change the background and color of the headings and have rounded input fields with a drop shadow. First, we need to know what the CSS code should be. For this, I use the Inspector that is built into Google Chrome: right-click on the element that you would like to change and select “Inspect”. I will create an article later to explain this more in detail. For now, the CSS that we need to insert is as follows:
/*Background of form header*/
.form-header {
background: #228b22;
}
/*Font color of form header*/
.form-title {
color: white !important;
}
/*Font color of section header*/
.form-section h2 label.section-label {
color: #228b22;
}
/*Rounded fields with shadow*/
.form-control {
border-radius: 10px;
box-shadow: 1px 1px 5px grey;
}Which then looks like this in Deluge:
hide styling;
css = "<style>";
// Background of form header
css = css + ".form-header {background: #228b22;}";
// Font color of form header
css = css + ".form-title {color: white !important;}";
// Font color of section header
css = css + ".form-section h2 label.section-label {color: #228b22;}";
// Rounded fields with shadow
css = css + ".form-control {border-radius: 10px; box-shadow: 1px 1px 5px grey;}";
css = css + "</style>";
input.styling = css;And turns the form from the left screenshot to the right:
Of course, there are many more options than just this and the styling of this example is also not perfect: some small tweaks are still necessary to have the Calendar and Envelope symbols not overlap the now rounded edge of the fields. But that’s a story for another time.