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:

How to read settings tables

The tables below describe each configurable option as it displays in the Unqork IDE. 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
   input 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!