Building Clarity’s Contact Us Form

Business forms are essential components of digital experience solutions. They serve as the primary means for collecting user data, facilitating direct user interactions, and enabling workflow automation. Analysis of form data provides valuable insights into user behavior and preferences, which can be leveraged for personalization and optimizing digital experiences. Moreover, well-implemented forms ensure businesses adhere to compliance and regulatory requirements by collecting necessary user information responsibly.

By effectively designing and implementing business forms, organizations can create more engaging, efficient, and user-centric digital experiences. Clarity wants a very common type of business form: a Contact Us form that will collect data from site visitors and make that data available to the appropriate internal users. Traditionally, even a straightforward process like this requires a significant time investment from a development team to produce and iterate on code that will be expensive to maintain.

To avoid the pain points of traditional development, Clarity wants to leverage Liferay Objects and page fragments to build a Contact Us form without touching a single line of code. Additionally, to support their global strategy, they’ll localize the form’s options into Spanish, allowing visitors to submit inquiries in their preferred language.

Objects

With Liferay Objects, you can define the schema of your data models with specific attributes, create relationships between objects, and implement business logic to determine how objects should behave. You can use objects to iterate rapidly without the need to write or deploy code, which translates directly to increased business agility. Because of this, objects are perfect for building business forms, whether they are simple or complex. You can define fields for the data you want to collect, enforce input validations for those fields, and automatically perform certain actions when a form is submitted.

One of the true strengths of objects is their integration with Liferay’s core frameworks and functionalities, such as permissions, security, workflows, analytics, and more. This creates a cohesive user experience where your business forms feel and act like native parts of the Liferay platform. Not only does this let you achieve faster time to value, but it also means that any Liferay practitioner can maintain your forms, eliminating the need for technical developer resources.

Exercise: Creating a Picklist

Picklists provide a centralized, reusable way to manage standardized list options across your platform. Before building Clarity’s object to store the form data, you must establish the specific inquiry categories visitors can select to ensure data consistency and simplify localization.

Here, you’ll create the Inquiry Nature picklist and translate it into Spanish as Ian Miller.

Sign in using these credentials:
- Username: ian.miller@clarityvisionsolutions.com
- Password: learn
Open the Global Menu (), go to the Control Panel tab, and click Picklists.
Click New ().
Enter Inquiry Nature for the Name and click Save.
Click on the newly created Inquiry Nature picklist to add items to it.

Under the Items section, click New () and create the following items one by one:

Name	Key
`Sales`	`Sales`
`Support`	`Support`
`Partnership`	`Partnership`
`General`	`General`

Click Sales and observe its language selector.

This provides translation options for the picklist’s item.
Change the language selector to Spanish (es_ES), enter Ventas for the name, and click Save.
Repeat steps 7-8 to add a Spanish translation for the other three items:
- Support: Soporte
- Partnership: Asociación
- General: General
Click Save.

Great! You’ve created a picklist with an included translation for users browsing Clarity’s site in Spanish.

Exercise: Creating an Object Definition

Liferay Objects empower you to build custom data models and REST APIs entirely through Liferay’s user interface. Clarity wants to create a user-friendly contact form to streamline communication from users visiting their site. To do so, they’ll create an object and populate its fields on a page using a form container.

Here, you’ll create Clarity’s Contact Us object definition as Ian Miller.

Open the Global Menu (), go to the Control Panel tab, and click Objects.
Click New.

Enter these details:

Field	Value
Label	Contact Us
Plural Label	Contact Us
Object Name	ContactUs

Click Save.
This creates a draft object definition with some default system fields. You can now configure the definition to determine how its data is stored and which features you want to enable.
From the Objects overview page, click Contact Us to begin editing the object definition.

In the Details tab, configure these settings:

Field	Value
Scope > Scope	Site
Scope > Panel Link	Content & Data
Configuration > Show Widget in Page Builder	Disabled
Configuration > Enable Entry History in Audit Framework	Enabled

Click Save.
Now that you’ve configured the object definition, you can add custom fields to determine the type of information you want to gather with the form.
Go to the Fields tab.

Click New, enter these details, and click Save:

Field	Value
Label	`Full Name`
Field Name	`fullName`
Type	Text
Enable Entry Translation	Disabled
Mandatory	Enabled
Accept Unique Values Only	Disabled

Repeat the previous step to create the remaining six fields:

Label	Field Name	Type	Picklist	Enable Entry Translation	Mandatory	Unique Values Only
`Email Address`	`emailAddress`	Text	N/A	No	Yes	No
`Phone`	`phone`	Text	N/A	No	Yes	No
`Nature of Inquiry`	`natureOfInquiry`	Picklist	Inquiry Nature	Yes	Yes	N/A
`State or Province`	`stateOrProvince`	Text	N/A	No	No	No
`City`	`city`	Text	N/A	No	No	No
`Comment`	`comment`	Long Text	N/A	Yes	No	N/A

Return to the Details tab and click Publish.
This creates the object and its associated database tables for storing form submissions.
Open the Global Menu (), go to the Control Panel tab, and click Roles.
In the Regular Roles tab, click Web Developer to edit that role.
Go to the Define Permissions tab and search for Contact Us.
Click on Contact Us in the Content & Data section.
Check all permissions under General Permissions and Resource Permissions.

NOTE
Permissions to an object are required to view its form components while editing pages.
Click Save.

Well done! You’ve created an object and provided permissions to build its associated forms.

Exercise: Building the Form

While objects include a basic user interface by default, form components in Liferay’s page builder enable you to map object fields directly to visually appealing forms without writing code. With the backend data structure established, you can now create a user-friendly Contact Us form on Clarity’s site.

Here, you’ll add and style this form as Walter Douglas.

Sign in using these credentials:
- Username: walter.douglas@clarityvisionsolutions.com
- Password: learn
Go to Clarity’s public enterprise website and begin editing the Contact Us page.
Drag and drop a Form Container into the Contact Form container:

Select the form container and configure these settings:

Tab	Setting	Value
Styles	Padding	Spacer 4 (all sides)
Styles	Background	#FFFFFF
Styles	Border Radius	15px

Go to the General tab, click the Content Type drop-down menu, and select Contact Us.
Select all fields except External Reference Code and click Save.
Because the Contact Us object includes a localizable field, you’re prompted to configure whether this form container should allow localized object entries.
Click Add Localization Select.

Select the Localization Select fragment and configure these settings:

Tab	Setting	Value
General	Options > Size	Small
General	Options > Hide Language Label	Enabled
Styles	Padding Bottom	Spacer 3

Drag and drop the field fragments into this order:
- Full Name
- Email Address
- Phone
- Nature of Inquiry
- State or Province
- City
- Comment
Select each of these field fragments and configure this setting:

Tab

Setting

Value

Styles

Padding

Spacer 3 (bottom)
Click Publish.
Test the form by submitting an entry.
Click the Site Menu (), expand Content & Data, and click Contact Us. The entry you created should appear here.

Tab	Setting	Value
Styles	Padding	Spacer 3 (bottom)

Click to view the entry and try to change the language locale to es-ES.

You should be able to see any translated entry content in the Comment and Nature of Inquiry fields.

Great! You’ve fully set up the Contact Us page and made it available for Clarity’s users.

Exercise: Creating a Multi-Step Form

Multi-step forms reduce cognitive load for users by breaking complex data collection into manageable steps. For detailed inquiries, Clarity wants to offer sequential steps to collect portions of data at a time.

Here, you’ll convert the Contact Us object’s form into a multi-step experience as Walter Douglas.

Open the Global Menu (), go to the Control Panel tab, and click Objects.
Begin editing the Contact Us object definition.
In the Details tab, toggle the Allow Users to Save Entries as Draft field to Enabled.

NOTE
When creating a multi-step form using objects, you must enable draft mode for its object definition.
Click Save.
Navigate back to the Contact Us page and start editing it.
Drag and drop a Stepper fragment into the Form Container above the Localization Select fragment.

This triggers a warning saying that adding this fragment converts the form into a multi-step form.
Click Continue.
Drag and drop the Next button under the Nature of Inquiry field.

Configure these settings for the Stepper fragment:

Tab	Setting	Value
Styles	Padding > Bottom	Spacer 3
Styles	Padding > Left	Spacer 2
Styles	Padding > Right	Spacer 2

Select the Form Container and toggle the Display All Steps in Edit Mode to Enabled.
This enables you to arrange the form fields across different steps.
Scroll down and move these fields into the second step’s drop zone:
- State and Province
- City
- Comment
Select the form container and disable the Display All Steps in Edit Mode option.
Click the first circle in the Stepper fragment to edit the first step.

Drag and drop a container above the Next button and configure these settings:

Tab	Setting	Value
General	Content Display	Flex Row
General	Align Items	Center
General	Justify Content	End

Drag and drop the Next button into the container.

In a multi-step form, every step except the last needs a Next-type Form Button fragment. Similarly, all steps except the first require a Previous-type button. For a button with a type of Submit, selecting Draft for its Submitted Entry Status will save the object entry as a draft.
Go to the second form step in the Stepper fragment.
Drag and drop a Grid fragment above the two buttons and configure this setting:

Tab

Setting

Value

General

Number of Modules

2
For each Grid module, repeat step 17 to drag and drop a container fragment into these modules.

Tab	Setting	Value
General	Number of Modules	2

For the left container, configure these settings:

Tab	Setting	Value
General	Content Display	Flex Row
General	Align Items	Center
General	Justify Content	Start

For the right container, configure these settings:

Tab	Setting	Value
General	Content Display	Flex Row
General	Align Items	Center
General	Justify Content	End

Drag and drop the Previous button into the left container.
Drag and drop the Submit button into the right container.
Double-click the “Step 1” text on the Stepper fragment and enter Contact Info.
Double-click the “Step 2” text and enter Additional Info.
Click Publish and test out the form.

Great! You’ve created a multi-step form using objects and form fragments.

Conclusion

Business forms facilitate critical communication between site visitors and your internal teams. By combining Liferay Objects with drag-and-drop form fragments, you can rapidly implement localized data collection processes.

Next, you’ll learn how you can leverage data sets with workflows to improve visibility for Clarity’s Contact Us submissions.