Understanding buttons

In a nutshell

Buttons are interactive CTA elements that trigger custom on-click actions like opening URLs, submitting forms, running workflows, or navigating pages. You can enable automation through functions, enhance user experience, and streamline navigation both within and cross applications, and to other accessible URLs.

Availability

Buttons can be added in pages in all plans of Creator.
Only the super admin, admins, and developers can add and manage buttons in pages.

1. Overview

Buttons in Zoho Creator are clickable UI elements used to trigger actions on Page components. They serve as action points, allowing users to interact directly with application components, execute Deluge functions, and open accessible URLs, from within a centralised dashboard. For example, the on-click action can call a Deluge function to update a form record, navigate to a Creator report to view relevant data, or open a website in a new tab.

When a button is added to a page, it is placed within a panel. You can customize the label, style, and layout of the button as well as the other elements of the panel to match your branding.

The configuration sections for a button include:

Display - A value for the label of the button that is inserted in the page.
Action - An action that can be initiated on the click of the button.
Style - The visual properties such as button type, color, margins, and so on, for the button.

Since the button is inserted as part of a panel, the above configurations are also available for the other panel elements. Check out the following pages for more details:

1.1. Usecase

In the Community Connect Hub application built to manage community outreach programs, a dashboard displays key metrics related to volunteer participation and donation drives. To encourage awareness and support, multiple buttons, each labeled for a different NGO, are added to the dashboard panel. Each button’s on click action is configured to open the respective NGO’s public website URL in a new tab. By placing these buttons prominently on the dashboard, users such as staff, donors, or volunteers can quickly access each NGO’s official site to learn more or make donations. They can also share these sites externally, all without navigating away from the app’s interface.

1.2. Navigation guide

After you've created a page in the edit mode of your application, you can find the button element on the left pane of the page builder. When Button is clicked, different layouts of a button are displayed alongside from which you can drag and drop the desired one onto the building space.

1.3. Display

When a button is added to a page, it will be inserted as part of a panel. Further, you can also add the other panel elements, text, and image to provide more user interaction and context. You can customize the display properties for the button, and for the text and image elements if they are added. The Display customizations for each panel element are listed below.

Panel Elements	Live Mode Image	Displayed Data
Button		Label - A text that will be displayed on the button. It can denote the action that the button might perform. If required, page variables can be included as labels to provide dynamic values for different users.
Other Panel Elements:
Text		Static Text - An alphanumeric text element that can communicate information. If required, page variables can be included to provide dynamic values for different users.
		Presets: Built-in Presets - You can choose from a built-in panel preset of a panel you might have saved already while creating a panel on any page within the Creator account. It will be of the same configurati on and can be modified further if necessary. Page Variables - You can choose a page variable that you might have already created in the same page to display dynamic values.
		Zoho Creator - Use the data stored in the forms of any of the Creator applications in the same account to do arithmetic operations such as: Sum - The sum value of all relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Prediction, OCR, Integration) Minimum - The minimum value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Time, Date-Time, Prediction, OCR, Integration, and system fields such as Added Time, Modified Time) Maximum - The maximum value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, Time, Date-Time, Prediction, OCR, Integration, and system fields such as Added Time, Modified Time) Median - The median value of all the relevant entries made in a form field. The resultant value will be the middle value when the numbers are arranged in ascending order. If the number of entries is even, the average of the two middle values will be displayed. (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration) Average - The average value of all the relevant entries made in a form field (Supported field types: Number, Percent, Decimal, Currency, OCR, Prediction, Integration) Count - The count of the records entered using a form. You can either display the overall count or use a criteria to show a filtered count. This operation will not be performed based on a specific field since it only provides a count of records. Distinct Count - The count of the unique field values found in the records entered using a form. For example, say you've chosen an Office Location dropdown field while configuring a distinct count. A total of 30 records have Boston, Texas, Phoenix, and Japan (4 unique values) as the office locations repeatedly. Then, the distinct count value displayed on the panel will be 4. Note: The following fields are not supported for distinct count: Multiselect, Checkbox, Subform or subform fields, Add Notes, Section, Lookup (only when the display format is chosen as Multiselect or Checkbox). These operations provide a dynamic numeric value that will be displayed on the panel. Note: After configuring a text element with an arithmetic Zoho Creator operation, (such as Sum, Minimum, Count, etc) you can save it as a preset from within the Display section. This built-in preset can be reused with the same configuration in any other page component within the same Creator account.
		Zoho Sheet - You can use the value stored in a Zoho Sheets spreadsheet's cell to display a dynamic value on the panel. Note: Fetching values from the spreadsheet requires a connection between Zoho Creator and Zoho Sheets. You can either choose an existing connection or create a new one, while configuring the property.
		Zoho Projects - You can use data stored in Zoho Projects such as the number of tasks, bugs, or milestones to display a total count on the panel. Note: Fetching values from a project requires a connection between Zoho Creator and Zoho Projects. You can either choose an existing connection or create a new one, while configuring the property.
Image		An image can be displayed on the panel. It can be sourced from: My library - Images from your local storage. They can be of the formats JPEG, JPG, PNG, and a maximum of 2MB. Weblink - Images from a specified public URL. Profile picture - The logged-in user's profile picture is fetched from their Zoho Account and displayed on the panel. Note: In the following cases, a placeholder image () will be displayed instead of their profile picture: When public users or portal users access the page When the page is exported as a PDF Icons - The built-in icons provided by Creator. They can either be outlined icons or solid icons.

1.4. Action

You can associate an action to a button, or the panel as a whole, other panel elements if added, and panel containers (holds panel elements together), which will be triggered when they are clicked on. The action types that can be linked to them are:

Open URL - A public or private URL that the user might have access to, can be opened in the same window, a new window, or as a popup.

Note: The permalink of published components present in a Creator application can also be specified for this action.

Open Form - A form from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
Open Report - A report from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
Open Page - A page from any of the applications in your Creator account can be opened in the same window, a new window, or as a popup.
Execute Function - A function from any of the applications in your Creator account can be triggered.

1.5. Style

You can customize the style properties of the button, its panel, the panel containers (created when multiple buttons or additional panel elements are added), and any other panel elements. The following table lists the styling properties for the button, panel, and panel container.

Button

Corner radius - The outline of the button can be customized to be sharp or have rounded edges by adjusting its corner radius value.
Style - The content of the button can be emboldened, italicized, underlined, and changed to upper/lower case.
Font family - A font that applies to the content present inside the button. You can choose from six different font families.
Font size - The font size of the content displayed on a button. The preset font sizes range from 12px to 40px. A custom size can be set from the range of 1 to 99 pixels.
Color - The color of the text displayed on the button and its background color.
Stroke - The outline or border of the button, which can be customized with different colors and specific thickness.
Padding - The spacing between the label or text of the button and the button's outline.
Margin - The spacing around the button element.

Panel Container (more than one panel element can be clubbed within a container)
Panel (as a whole)

You can define the various properties of the panel container and the panel as a whole, including:
Column align - The panel elements housed within a panel/panel container can be aligned to different positions such as Top, Bottom left, Center, etc.
Swap - The panel containers that are situated right beside each other can be interchanged.
Height - The height of a panel container can be chosen to Fill or to any custom height in pixels.
Padding - The space between a panel element and its border can be customized in pixel values.
Background color - The color that runs through the background of the panel/panel container.
Background image - The image that runs through the background of the panel/panel container.

The text and image panel element can be added to the panel that has the button element, for more interaction. The table below lists the style properties for them.

Text

Font family - A font that applies to the content present inside the text element. You can choose from six different font families.
Style - The content of the panel element can be emboldened, italicized, underlined, and changed to upper/lower case.
Color - The color of the text and the background color of the panel element
Font size - The font size that will run throughout the content of the panel element. The preset font sizes range from 12px to 40px.
Margin - The spacing between two panel elements.
Prefix - You can attach a prefix to a dynamic value in the panel element. For example, if you want to display the number of pending tasks, the prefix can be "Count:" to display the dynamic count as a label-value pair.
Suffix - You can attach a suffix to a dynamic value in the panel element. For example, if a panel displays the count of children present in a class, the suffix can be "students".

Image

Shape - The shape of the image can be a circle, square, or a square with rounded edges.
Shape size - The shape size can be small, medium, large, or a custom size.
Icon size - If the image is chosen to be an icon, its size can be selected from a preset range of 12px to 40px. A custom size can be set from the range of 1 to 99 pixels.
Color - The color of the icon can be chosen.
Margin - The spacing between two panel elements.

2. Related topics

What's next

Learn how to add and manage buttons as clickable UI page elements on dashboards.

Learn about snippets that let you add custom UI elements using HTML, ZML, or Deluge, and embed videos, URLs, or interactive content into dashboards.

Create. Review. Publish.

Write, edit, collaborate on, and publish documents to different content management platforms.

Get Started Now

Access your files securely from anywhere

Zoho CRM Training Programs

Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.

Redefine the way you work

with Zoho Workplace

Start your free trial

Zoho DataPrep Personalized Demo

If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.

Create, share, and deliver

beautiful slides from anywhere.

Get Started Now

Zoho Sign now offers specialized one-on-one training for both administrators and developers.

BOOK A SESSION

Zoho Workerly Home
Forums
Connect With Us:

Zoho Recruit Home
Forums
Connect With Us:

Start tracking your website metrics today

Use PageSense to understand what your visitors are looking for, how they are behaving, and where they are facing problems on your website.

Ready to improve your website's performance?

Install the PageSense code snippet on your site in a matter of minutes and start collecting in-depth data about the website visitors to grow your business.

Track and measure every business goal

Set up goals in PageSense to measure every single action performed by visitors on your website like button or link clicks, form submissions, and page engagements.

Understand the customer journey on your website

Create funnels in PageSense to quickly see which pages visitors use to enter your website, where they navigate to next, and which pages they decide to leave without converting.

Visualize your visitor's behavior with color codes

Set up heatmaps in PageSense to see where users have clicked more, how far they've scrolled, and on which parts of a page they've spent the most time using color-coded patterns in reports.

Measure customer engagement with your web forms

Use form analytics in PageSense to see how people interact with different fields in your form, whether they complete the form successfully or not, and where exactly they drop out on your form.

Record real visitor interactions on your website

Use session recordings in PageSense to watch a video of all the visitor actions performed on your website including the pages they navigate, the buttons they click, the UX issues they face, and more.

Test and optimize webpages for better conversions

Run A/B or Split URL tests in PageSense to figure out which version of your web page works best for your business and results in the best conversion rate.

Give each customer a unique website experience

Use personalization in PageSense to deliver customized versions of your website for every individual customer based on their demographics, local weather, browsing history, and more.

Grow your business through customer feedback

Run polls on your website using PageSense to understand what your customers think about your products/services and what needs improvement on your site.

Send timely updates that customers love

Use web push notifications in PageSense to schedule and notify your customers about an upcoming flash sale, product releases, promotional coupons, and a lot more that can spark conversions on your website.

Advertise your business to website visitors

Use pop-ups in PageSense to instantly grab the attention of visitors by showing attractive signup offers, coupon code discounts, or email newsletters that can eventually convert them into subscribers.

Access more advanced settings in PageSense

Use PageSense's advanced features like creating mutually exclusive groups, enabling cross-domain tracking, configuring customized project JS, and more to get deeper insights about your website.

Try easy-to-use extensions

Download the PageSense extension app available for your web browser with a few clicks and start collecting all of your required website metrics in real time.

Discover your favorite integrations with PageSense

Get a deeper look at your website's data by seamlessly integrating PageSense with a host of popular third-party apps like Google Analytics, Mixpanel, Intercom, and more.

Quick Links	Workflow Automation	Data Collection
Web Forms	Enterprise	Online Data Collection Tool
Embeddable Forms	Banking	Begin Data Collection
Interactive Forms	Workplace	Data Collection App
CRM Forms	Customer Service	Accessible Forms
Digital Forms	Marketing	Forms for Small Business
HTML Forms	Education	Forms for Enterprise
Contact Forms	E-commerce	Forms for any business
Lead Generation Forms	Healthcare	Forms for Startups
Wordpress Forms	Customer onboarding	Forms for Small Business
No Code Forms	Construction	RSVP tool for holidays
Free Forms	Travel	Features for Order Forms
Prefill Forms	Non-Profit
Intake Forms	Legal	Mobile App
Form Designer	HR	Mobile Forms
Card Forms	Food	Offline Forms
Assign Forms	Photography	Mobile Forms Features
Translate Forms	Real Estate	Kiosk in Mobile Forms
Electronic Forms
Drag & drop form builder
Notification Emails for Forms	Alternatives	Security & Compliance
Holiday Forms	Google Forms alternative	GDPR
Form to PDF	Jotform alternative	HIPAA Forms
Email Forms	Formstack alternative	Encrypted Forms
	Wufoo alternative	Secure Forms
	Typeform	WCAG

Quick Links

New to Zoho Writer?

Signup Now

Zoho Writer

What's new

Help Guide

Blogs

Forums

Webinars

API

Developers

Build Extensions

Create. Review. Publish.

Write, edit, collaborate on, and publish documents to different content management platforms.

Get Started Now

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

Zoho Pagesense Resources

You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho Social?

Manage your brands on social media

Access Zoho Social

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day
Ask the Experts

Zoho Sheet Resources

New to Zoho Forms?

Latest Feature Updates

Explore our Pricing & Plans

Zoho Forms Resources

Secure your business

communication with Zoho Mail

Get started

Mail on the move with

Zoho Mail mobile application

Go Mobile

Stay on top of your schedule

at all times

Get started

Carry your calendar with you

Anytime, anywhere

Get started

Latest Announcements

New to Zoho Sign?

Zoho Sign Resources

Sign, Paperless!

Sign and send business documents on the go!

Get Started Now

Zoho SalesIQ Resources

New to Zoho TeamInbox?

Zoho TeamInbox Resources

Connect with us

New to Zoho ZeptoMail?

LEARN MORE

Latest Feature Updates

Zoho DataPrep Resources

New to Zoho DataPrep?

Access Zoho DataPrep

Zoho DataPrep Demo

Get a personalized demo or POC

Design. Discuss. Deliver.

Create visually engaging stories with Zoho Show.

Get Started Now

New to Zoho Workerly?

Access Zoho Workerly

New to Zoho Recruit?

Access Zoho Recruit

New to Zoho CRM?

Signup Now

Access Zoho CRM

Latest Feature Updates

New to Zoho Projects?

Access Zoho Projects

New to Zoho Sprints?

Access Zoho Sprints

New to Zoho Assist?

Access Zoho Assist

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Related Articles
Creating and managing buttons
What does this page cover Learn to insert button elements in Creator pages to configure CTA actions like in-application navigation, opening URLs, and performing automated tasks. Availability Buttons can be created in all plans of Creator. Only the ...
Understanding reports in a page
In a nutshell In Zoho Creator, reports can be embedded within pages to serve as part of a centralized dashboard, making form data easily accessible and organized with other relevant page elements. End-users can view, filter, and manage data without ...
Understanding snippets
In a nutshell Snippets are custom blocks within a Page component that can be built using ZML (Zoho Markup Language), HTML, or iframe codes. Deluge can be incorporated into the code blocks to make them interactive and display application data. They ...
Embedding a report in a page
What does this page cover Learn to embed Zoho Creator reports in a page component to allow users to view and manage record data from a centralized dashboard. Availability Reports can be embedded in pages in all plans of Creator. Only the super admin, ...
Understanding canvas layout designer
1. What does this page cover? Learn about how you can use Canvas layout builder in Creator to design the detailed view layout of your records, corresponding to your business requirements. 2. Availability This help page is for users in Creator 5 and ...