---
title: "Build an Event Registration Form"
slug: "build-an-event-registration-form"
tags: ["module-builder", "guides"]
updated: 2026-09-15T15:17:30Z
published: 2026-09-15T15:17:30Z
canonical: "docs.unqork.io/build-an-event-registration-form"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Build an Event Registration Form

This guide walks you through configuring an event registration form in Unqork. The form collects company information, auto-fills the requestor's identity from their logged-in session, and allows the requestor to register between one and five participants.

The module uses two Panel components to organize the form into sections, and an Initializer component to populate requestor fields automatically when the module loads.

## Prerequisites

- Access to the Unqork Module Builder
- A module created and open in the editor

## Module Overview

The module contains the following top-level components:

| Component | Key | Type | Purpose |
| --- | --- | --- | --- |
| Initializer | `initGetRegistrationName` | Initializer | Populates requestor name and email from the logged-in user's session on load |
| Company Panel | `panelEventRegistrationImportedCompany` | Panel | Contains company information fields |
| Participant Panel | `panelEventRegistrationImportedParticpant` | Panel | Contains participant fields, count validation logic, and the submit button |

> **How to read settings tables**
> 
> The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: `inline code` — a value to type exactly as shown | **Bold** — a value selected from a drop-down, radio button, tab, or choice chip | **ON**/**OFF** — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

## Step 1: Add the Initializer Component

The Initializer component fires when the module loads and populates the Requestor Name and Requestor Email fields using the logged-in user's session data.

1. Add an **Initializer** component to the canvas.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `initGetRegistrationName` |
| Canvas Label Text | `initGetRegistrationName` |
| Trigger Type | **New Submission** |
3. In the **Inputs** section, add the following:

| ID | Alias |
| --- | --- |
| `currentUser.name` | `name` |
| `currentUser.email` | `email` |
4. In the **Outputs** section, add the following:

| ID | Value |
| --- | --- |
| `requestorName` | `=name` |
| `requestorEmail` | `=email` |

The Initializer component reads `currentUser.name` and `currentUser.email` from the active session and sends the values to the Requestor Name and Requestor Email fields inside the `panelEventRegistrationImportedCompany` **Panel** component when the module loads.

## Step 2: Configure the Company Information Panel

Add a Panel component to contain all company-related fields.

1. Add a **Panel** component to the canvas below the `initGetRegistrationName` **Initializer** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `panelEventRegistrationImportedCompany` |
| Canvas Label Text | *(leave blank)* |
| Modal | **OFF** |

> Add the following components inside the `panelEventRegistrationImportedCompany` **Panel** component.

### Add the Section Heading

1. Add an **HTML Element** component inside the `panelEventRegistrationImportedCompany` **Panel** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `htmlCompany` |
| Tag | `h2` |
| Content | `Company Information` |

### Add the Company Name Field

1. Add a **Text Field** component below the `htmlCompany` **HTML Element** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `companyName` |
| Label Text | `Company Name` |
| Required | **ON** |

### Add the Company Type Drop-Down

1. Add a **Dropdown** component below the `companyName` **Text Field** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `companyType` |
| Label Text | `Company Type` |
| Required | **ON** |
| Data Source | **Values** |
3. In the **Values** section, add the following options:

| Label | Value |
| --- | --- |
| `Client` | `Client` |
| `Partner` | `Partner` |
| `Consulting Firm` | `Consulting Firm` |

### Add the Company Address Field

1. Add an **Address Search** component below the `companyType` **Dropdown** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `companyAddress` |
| Label Text | `Company Address` |
| Service Type | **Google Places** |
| Format | **Short** |
| Street | ✓ |
| Street 2 | ✓ |
| City | ✓ |
| State | ✓ |
| Zip | ✓ |

### Add the Company Email Field

1. Add an **Email** component below the `companyAddress` **Address Search** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `companyEmail` |
| Label Text | `Company Email` |

### Add the Company Phone Field

1. Add a **Phone Number** component below the `companyEmail` **Email** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `companyPhoneNumber` |
| Label Text | `Company Phone` |
| Mask | `(999) 999-9999` |

### Add the Requestor Name Field

The Requestor Name field is disabled because the `initGetRegistrationName` **Initializer** component populates it automatically from the logged-in user's session.

1. Add a **Text Field** component below the `companyPhoneNumber` **Phone Number** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `requestorName` |
| Label Text | `Requestor Name` |
| Disabled | **ON** |

### Add the Requestor Email Field

Like the Requestor Name field, this field is disabled and auto-fills from the logged-in user's session.

1. Add a **Text Field** component below the `requestorName` **Text Field** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `requestorEmail` |
| Label Text | `Requestor Email` |
| Disabled | **ON** |

## Step 3: Configure the Participant Information Panel

Add a second Panel component to contain participant fields, count validation logic, and the submit button.

1. Add a **Panel** component to the canvas below the `panelEventRegistrationImportedCompany` **Panel** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `panelEventRegistrationImportedParticpant` |
| Canvas Label Text | *(leave blank)* |
| Modal | **OFF** |

> Add the following components inside the `panelEventRegistrationImportedParticpant` **Panel** component.

### Add the Section Heading

1. Add an **HTML Element** component inside the `panelEventRegistrationImportedParticpant` **Panel** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `htmlParticipant` |
| Tag | `h2` |
| Content | `Participant Information` |

### Add the Instructions Text

1. Add a second **HTML Element** component below the `htmlParticipant` **HTML Element** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `htmlParticipantInstructions` |
| Tag | `p` |
| Content | `Note: A minimum of one, and maximum of five, participants are needed to register for this event.` |

### Add the Participants Uniform Grid

The `participants` **Uniform Grid** component lets end-users add between one and five participant records. Each row captures the participant's name, designation, email, and keynote speech participation.

1. Add an **Uniform Grid** component below the `htmlParticipantInstructions` **HTML Element** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `participants` |
| Label Text | `participants` |
| Add Button Label | `Add Participants` |
| Minimum Rows | `1` |
| Maximum Rows | `5` |
| Error (minimum) | `Must have at least one participant to complete registration` |
| Error (maximum) | `{{data.participants}} must contain no more than 5 Participants` |
| Add Row Trigger | `calcParticipantArrayLength` |
| Delete Row Trigger | `calcParticipantArrayLength` |

> [!NOTE]
> The Add Row and Delete Row triggers reference the `calcParticipantArrayLength` **Calculator** component configured in the **Add the Participant Count Calculator** section below. Add these triggers after completing that step.
3. Add the following components inside the `participants` **Uniform Grid** component:

**Participant Name**

| Setting | Value |
| --- | --- |
| Property ID | `participantName` |
| Label Text | `Participant Name` |
| Type | Text Field |
| Required | **ON** |
| Error (required) | `Participant Name is required` |

**Participant Designation**

| Setting | Value |
| --- | --- |
| Property ID | `participantDesignation` |
| Label Text | `Participant Designation` |
| Type | Text Field |

**Participant Email**

| Setting | Value |
| --- | --- |
| Property ID | `participantEmail` |
| Label Text | `Participant Email` |
| Type | Email |
| Required | **ON** |
| Error (required) | `Participant Email is required` |

**Keynote Speech Participation**

| Setting | Value |
| --- | --- |
| Property ID | `participantKeynoteSpeech` |
| Label Text | `Are you also participating in the Keynote speech?` |
| Type | Radio |
| Values | `Yes`, `No`, `Maybe` |

### Add the Participant Count Calculator

The `calcParticipantArrayLength` **Calculator** component calculates the number of participant rows and sends the count to the `participantCount` field. It triggers manually when a row is added or deleted from the `participants` **Uniform Grid** component.

1. Add a **Calculator** component below the `participants` **Uniform Grid** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `calcParticipantArrayLength` |
| Canvas Label Text | `calcParticipantArrayLength` |
| Trigger Type | **Manual** |
| Post Trigger | `ruleCheckParticipantCount` |
3. In the **Inputs** section, add the following:

| ID | Required |
| --- | --- |
| `participants` | ✓ |
4. In the **Outputs** section, add the following:

| ID | Formula |
| --- | --- |
| `participantCount` | `=LEN(participants)` |
5. Return to the `participants` **Uniform Grid** component and set the Add Row and Delete Row triggers to `calcParticipantArrayLength`.

### Add the Participant Count Hidden Field

The `participantCount` **Hidden** component stores the participant count calculated by the `calcParticipantArrayLength` **Calculator** component.

1. Add a **Hidden** component below the `calcParticipantArrayLength` **Calculator** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `participantCount` |
| Label Text | `participantCount` |

### Add the Participant Count Decisions Component

The `ruleCheckParticipantCount` **Decisions** component controls the enabled state of the Submit Registration button. It disables the button when there are no participants and enables it when at least one participant exists.

1. Add a **Decisions** component below the `participantCount` **Hidden** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `ruleCheckParticipantCount` |
| Canvas Label Text | `ruleCheckParticipantCount` |
| Trigger Type | **Manual** |
| Execution Type | **First** |
3. In the **Inputs** section, add the following:

| ID |
| --- |
| `participantCount` |
4. In the **Outputs** section, add the following:

| ID | Property |
| --- | --- |
| `btnSubmitRegistration` | `disabled` |
5. Add the following decision rows:

| participantCount | btnSubmitRegistration (disabled) |
| --- | --- |
| `0` | `yes` |
| *(empty)* | `no` |

### Add the Submit Registration Button

The Submit Registration button is disabled by default. The `ruleCheckParticipantCount` **Decisions** component enables it once at least one participant is added.

1. Add a **Button** component below the `ruleCheckParticipantCount` **Decisions** component.
2. Configure the following settings:

| Setting | Value |
| --- | --- |
| Property ID | `btnSubmitRegistration` |
| Label Text | `Submit Registration` |
| Theme | **Primary** |
| Action | **Validate** |
| Disabled | **ON** |
| Error Title | `Oops - {{ errors }} error(s) have been found!` |
| Error Message | `Please check your module and fix fields outlined in red` |
| Success Message | `Success!` |

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Deteremines how the component triggers.

The component fires when the page or called module loads without an existing submission ID. Dashboards and remote execute modules are great uses for this trigger.

Enter inputs components and actions you want the component to perform..

Enter outputs components and actions you want the component to perform.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

A modal is a window that appears on top of the content you are currently viewing.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

The Post Trigger value fires after a component has completed its action. For example, post triggering a component to display the data received from a Plug-In component's API call.