How to Create Buttons in Zoho Creator Forms

Create buttons in Zoho Creator forms!

One clearly missing feature in Zoho Creator forms is buttons! I have made many forms where I wanted to have a little button to "Calculate" or to "Fetch data", but was left with using a Decision field, which sometimes was unclear to the users. Recognise this? Then look no further! Buttons can be made by restyling components such as Decision and Radio fields, and I'll show you how!

As with most styling effects, we start with a notes field. 

Single button: Decision field

A single button is made using a Decision field. The following snippet changes all decision fields into buttons. If you only want to change a specific field, you need to add the specific group class to the code. You can look for the correct class using the Inspector tool in Chrome, or an equivalent in any other browser. Another way is to look at the Field link name in the form designer. In this case, this name is "Calculate". The class is then zc-Calculate-group. In the snippet below, add it in this way to the three classes (decision-box-field and 2 times decision-box-label) like this: ".zc-Calculate-group .decision-box-field" and ".zc-Calculate-group .decision-box-label". Make sure you do this correctly: mind the two points and that there's a space in between them.
  1. hide styling;
  2. css = "<style>";
  3. css = css + ".decision-box-field  {display:none;} .decision-box-label{  left: -20px; background-color:#228B22; border-color:#228B22; border-width:1px; border-style:solid; color:white !important; border-radius: 2px; padding: 5px 10px !important; font-weight:400 !important; font-size:14px !important;}";
  4. css = css + ".decision-box-label:hover{ background-color:#FFFFFF; color:#228B22 !important;}";
  5. css = css + "</style>";
  6. input.styling = css;
This snippet changes this Calculate Decision field:

To this: (left normal, right when hovering over it)

So how does the code snippet work? Let's break it down. First for the button itself, which is line 3:
  1. .decision-box-field  {display:none;} This part hides the checkbox, so that only the label (text) remains. As you can click on both the box and the label to activate the Field, this is no problem.
     --> 
  2. .decision-box-label{  left: -20px; The box is now hidden, but the label did not move. We move it 20 pixels to the left, to align with the other fields.
  3. background-color:#228B22; border-color:#228B22; border-width:1px; border-style:solid; We now give the background a color and add a 1 pixel wide solid border of the same color to it. The border is added here, as I added a border to the hovered button as well. If I wouldn't do this, the size of the button would change while hovering over it, moving the form below it by 2 pixels (the with of the top and bottom border combined) each time.
  4. color:white !important; Change the text color to white, to make it easier to read than black. Sometimes, you need to add the !important, as otherwise another stylesheet overrules this one.
  5. border-radius: 2px; Added a small radius to the border for rounded edges
  6. padding: 5px 10px !important; With this, you give the text some padding, to make it a nice, big button
  7. font-weight:400 !important; I made the font a little less bold
  8. font-size:14px !important;}"; And finally I made the font a little bit larger

Then, line 4 changes the button when you hover your mouse over it. The only changes that really happen is that it the background color and the text color change. It does it like so:
  1. .decision-box-label:hover This part says to the browser that it only needs to be applied when the mouse hovers over the button.
  2. background-color:#FFFFFF; color:#228B22 !important;}"; And the rest changes the background color to white (#FFFFFF is the hex notation of white, so they both work) and the text color to forest green. 

Multiple button: Radio field

Having a row of multiple buttons to select something with works in roughly the same way as with the single button explained above here. But there are a few differences! First, the general snippet of building the CSS part:
  1. fieldname = "Plan";
  2. css = css + "." + fieldname + " .choice-table-cell span .customRadio+label {display:none}";
  3. css = css + "." + fieldname + " label{background-color:white; color:#228B22; border-radius: 2px; border: 1px solid transparent; font-weight: 400 !important;font-size: 14px !important; padding: 5px 10px;}";
  4. css = css + "." + fieldname + " label:hover{border-color:#228B22;}";
  5. css = css + "." + fieldname + " .customRadio:checked~label{border-color: #228B22;}";
In this example, I have a Radio field with the Field link name "Plan". Change this for your own field link name in the snippet. In the field options in the form builder, you can also specify whether you want a One column, Two column or Three column layout. This changes how the options are situated, but the snippet works for all of them. A quick rundown of how this snippet works:
  1. .choice-table-cell span .customRadio+label {display:none}"; This removes the radio buttons:
     --> 
  2. label{background-color:white; color:#228B22; border-radius: 2px; border: 1px solid transparent; font-weight: 400 !important;font-size: 14px !important; padding: 5px 10px;}"; This changes the label, just like in the single button example:
  3. label:hover{border-color:#228B22;}"; This adds a border around the option that is hovered over with the mouse
  4. .customRadio:checked~label{border-color: #228B22;}"; This adds a border around the option that is selected:




    • Related Articles

    • Create a European VAT ID checker (also works for Zoho CRM!)

      For invoicing to other businesses within the EU, it is mandatory to check whether the VAT ID of your customer is correct, in order to invoice using a 0% tax rate. I wrote a script that checks the VAT number that you have from your customer against ...

    • Limitations in CSS styling

      Styling forms in Zoho Creator using CSS styling in a Notes field brings many possibilities, but unfortunately not all CSS properties and functions work: some are simply stripped out. Whenever I come across a limitation, I add it to the list below, ...

    • Sending images to imagekit.io using API

      imagekit.io is a service for optimising media content for websites. It's API is pretty straightforward, but it's always a bit finicky to get a connection going the way you want it. To make an API call, first follow the steps in "Authorisation" and ...

    • Add a custom logo to an app

      Zoho Creator gives you a couple of options for the logo that is displayed in the top left corner of an app: Your company logo (the same for all your apps) An icon from the predefined icon list A 1-3 letter combination Now, you might have different ...

    • Creating a Function

      When you have a piece of scripting code that you use frequently, it can be better to create a function for this. Instead of copying this piece of code (and having to update each and every instance when you need to change it!), you have it in one ...