How to Open Zoho Creator Forms in Popup Windows from HTML Buttons

Opening a Form in Popup Mode from an HTML Button in Zoho Creator

The Challenge

When embedding buttons on a Zoho Creator page using HTML, you might want to open a form in a popup window when the button is clicked. Simply using an <a> tag with zc-popup attributes doesn't always produce the expected popup behavior.

Idea
Solution: Use Page Redirection with the openUrl() Function

To reliably open a form in popup mode, follow this two-step approach:

Step 1: Create an Intermediary Page with openUrl() Function

  1. Create a new page (e.g., "OpenScript") that contains a Deluge script with the openUrl() function
  2. Configure the function to open your target form with any required parameters
  3. Example script for your intermediary page:
openUrl("#Form:Scripts_Notes?CID=" + input.CID + "&Type_field=" + input.Type, "popup window", "width=800px,height=600px");

Step 2: Link to the Intermediary Page Instead of Directly to the Form

In your HTML button or link, reference the intermediary page instead of the form itself:

<a href="#Page:OpenScript?CID=<%=prov.ID%>&Type=<%=type.ID%>" class="add-note-btn">
    <i class="fas fa-plus"></i>
    Add Script
</a>

How It Works

  1. When a user clicks the button, it opens the intermediary page
  2. The intermediary page executes the openUrl() function
  3. The openUrl()
     function then opens the actual form in a popup window with the specified parameters

Notes

Important Notes

  • Make sure all required parameters are passed correctly between pages and forms
  • You can customize the popup dimensions in the openUrl() function's third parameter
  • This approach works because the openUrl()
     function has direct access to Zoho Creator's internal methods for handling popups

By using this approach, you can ensure consistent popup behavior for forms accessed from HTML buttons in your Zoho Creator applications.


    • Related Articles

    • How to properly set Subforms in Zoho Creator Part 2

      To build a robust Order form in Zoho Creator you need to be able to automatically "fetch" the information about a product and let the system pre-populates the subform with pre-existing data in the Products Table. First, you need to have a Products ...

    • How to properly set Subforms in Zoho Creator Part 3

      The first step is to have the Subtotal or Total field value in the Order Form. Normally this would be a currency field or decimal field if you need to consider 1 or more decimals into your calculations. If not you can also set it the field as a ...

    • How to properly set Subforms in Zoho Creator Part 1

      This is the most important step in the process of setting up your Zoho Creator database. A properly linked setup will enable your information to run smoothly and avoid wasting space ( MB ) First, you need to create at least 2 Forms. For example.- ...

    • How to define number of subform rows dynamically using script in Zoho Creator?

      It´s important to highlight that this post assumes you are already familiar with proper subform creation in Zoho Creator. If you are not please check out our Master Zoho Creator Subforms course in the url below before implementing this custom ...

    • Zoho Flow Selective Updates - Complete Implementation Guide

      Creator Scripts Zoho Trusted Partner in Digital Transformation Zoho Flow Selective Updates - Complete Implementation Guide Executive Summary Challenge: Preventing Zoho Flow from overwriting existing Creator record data with blank values during ...