Zoho Creator is a powerhouse for business apps, but its default design options can feel rigid. If you've ever struggled to match a form to your brand guidelines, you're not alone. This simple Deluge 'hack' lets you inject custom CSS directly into your forms.

Quick details

• App: Zoho Creator
• Complexity: Medium (Deluge + CSS)
• Function Output: Fully branded/customized Form UI.

The Challenge: Zoho Creator's Rigid Default UI

Usually, you would style a website using a CSS stylesheet loaded in the header. Unfortunately, Zoho Creator doesn't allow this. You are stuck with basic 'Design' tab options that often fail to deliver the professional look your users expect.

Manually, you can change a few colors in the editor. However, if you want rounded input fields, custom shadows, or specific header gradients, you will run into a wall. The system simply doesn't provide the toggles for advanced UI customization.

The trick is using an 'Add Notes' field as a hidden container to inject a CSS <style> block via a Deluge On Load workflow.

The Solution: Injecting CSS via Deluge

Below is the boilerplate script. We create the CSS stylesheet as a string and push it into the 'Add Notes' field. Instead of showing text, Creator will load the style and transform your form instantly.

hide styling; 
css = "<style>"; 
css = css + "*ANY CSS YOU WANT TO ADD GOES HERE*"; 
css = css + "*NEXT STYLE HERE*"; 
css = css + "</style>"; input.styling = css;

Prerequisite Check

• An Add Notes field placed anywhere in your form (e.g., named styling)
• A Workflow set to run on "Created or Edited" -> "Load of the form"

Step-by-Step Implementation

1. Add the Add Notes field: Anywhere in your form, drag an "Add Notes" field. I always like to call it something like "styling".
2. Create Workflow: Create an "On load" workflow for this form.
3. Paste the Code: Copy the script above and paste it.
4. Update Placeholders: Replace the placeholders with your actual values (see below).
5. Trigger the Script: Load the form in your Creator application.

Applying Modern Styling (Example)

I'm using the standard "Apply leave" form template to show this.

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: Find the correct CSS classes

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 any web browser: right-click on the element that you would like to change and select "Inspect". For this example, this is the CSS we would like to insert:

/*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;
}

Step 4: Enter the styling code

The above CSS 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;

Simply paste this code into the workflow and you're good to go! Once you have saved the workflow, the form should change:

From this:

To this:

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.

Variations

This is a very simple example. There are many things you could do using this method, including:

• Dynamic styling: Overwrite the Notes field with different styling using other triggers, such as "On user input". This immediately changes the CSS of the form. You could even use multiple Notes fields for granular control.
• Creating buttons: Style a Decision field to look like a button.
• Create tabs: Style a Checkbox field to look like tabs, and use hide and show actions based on which "tab" is clicked.
• Hide the Submit and Reset buttons: Targeting the Footer, or the buttons separately allows you to hide these buttons, for instance until a certain field is filled.

Want to try Zoho?
Start your free Zoho Creator trial or explore the entire suite with a Zoho One trial.

Final Conclusion: Elevate Your User Experience with Custom Design

A professional-looking form builds trust. By moving beyond the default Zoho Creator constraints, you can build applications that don't just work well—they look amazing.

---

This article was originally published on GreenStayn. For more Zoho Creator tutorials and UI hacks, visit the GreenStayn Hub or Book a Free Consultation.