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.
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 an Object Definition
Clarity wants to create a user-friendly contact form to streamline communication with non-employee users. Liferay Objects provides the tools to build and seamlessly integrate this form with their Contact Us page.
Here you’ll create the Contact Us
object and configure its fields for storing relevant information as the Clarity Admin user.
To do this,
-
Sign in as the Clarity Admin user.
- Username:
admin@clarityvisionsolutions.com
- Password:
learn
- Username:
-
Open the Global Menu (), go to the Control Panel tab, and click Objects.
-
Click Add ().
-
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, begin editing the Contact Us 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 False Configuration > Enable Entry History in Audit Framework True -
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 Add (), enter these details, and click Save:
Field Value Label Full Name Field Name fullName
Type Text Mandatory Yes Accept Unique Values Only No -
Repeat the previous step to create the remaining fields:
Label Field Name Type Mandatory Unique Values Only Email Address emailAddress
Text Yes No Phone phone
Text Yes No State or Province stateOrProvince
Text No No City city
Text No No Comment comment
Long Text No N/A -
Return to the Details tab and click Publish.
This creates the database tables for storing form submissions.
Next, you’ll add the form to Clarity’s Contact Us page.
Exercise: Building the Form
Liferay Objects generates a basic user interface automatically, but you can design and add forms to Clarity’s pages.
Previously, you added and wireframed the Contact Us page. Here you’ll add the form to the page as the Clarity Admin user.
To do this,
-
Go to Clarity’s public enterprise website and begin editing the Contact Us page.
-
Drag and drop a form container fragment into the Contact Form container.
-
Click the drop-down menu and select the Contact Us object.
This populates the form with fields from the object automatically.
-
Select the form container and configure these settings:
Tab Setting Value General > Frame Width 400px Styles Padding Spacer 4 (all sides) Styles Background #FFFFFF Styles Border Radius 15px -
Drag and drop the field fragments into this order:
- Full Name
- Email Address
- Phone
- 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.
-
Go to Site Menu (), expand Content & Data, and click Contact Us. The entry you created should appear here.
Great! You’ve fully set up the Contact Us page and made it available for Clarity’s users.
Next, you can learn how to create a multi-step form or move on to the next lesson to learn about Liferay’s capabilities for analytics and personalized user experiences.
Exercise: Creating a Multi-Step Form (Bonus)
Using objects, form fragments, and display page templates, you can develop multi-step forms to enable users to fill a form in different display pages, which are connected to the same object entry.
Here you’ll create a display page for the second step and link the Contact Us form container to it as the Clarity Admin user.
To do this,
-
Open the Global Menu (), go to the Control Panel tab, and click Objects.
-
Begin editing the Contact Us object definition.
-
In the Details tab, configure this setting:
Field Value Configuration > Allow Users to Save Entries as Draft True Note: When creating a multi-step form using objects, you must enable draft mode for the object definition.
-
Click Save.
-
Open the Site Menu (), expand Design, and click Page Templates.
-
Go to the Display Page Templates tab and click New.
-
Select the Primary Master Page template.
-
Enter
Contact Us - Step 2
for the name and select Contact Us for content type. -
Click Save.
-
Drag and drop the Contact Us Page fragment composition into the template.
-
Repeat steps 2-5 from Exercise 19b to create the form.
-
Select the form container and configure these settings:
Tab Setting Value General Success Action Go to Page General Page Home General Show Notification After Submit Yes -
Click Publish.
-
Return to the Contact Us page and begin editing it.
-
Select the form container and configure these settings:
Tab Setting Value General Success Interaction Go to Entry Display Page General Display Page Contact Us - Step 2 -
Remove these fields from the container:
- State or Province
- City
- Comment
-
Select the Submit Button fragment and configure this setting:
Tab Setting Value General Submitted Entry Status Draft Note: Now when users click this button, Liferay saves their entry as a draft and directs them to the next step to complete the form.
-
Double-click the Submit Button fragment to edit its text and enter
Next
. -
Click Publish.
-
Test out the form.
Great! Now you’ve created a multi-step form using objects, form fragments, and display page templates.
Conclusion
Congratulations! You’ve completed Module 6: Content Authoring and Management. Throughout this module, you’ve learned best practices for creating, storing, organizing, and displaying content in Liferay DXP. You also learned about setting up publishing workflows for facilitating and streamlining content collaboration.
In the next module, you’ll learn about using Liferay analytics and personalization features to create and improve user experiences.
Module 7: Analytics and Personalization
Additional Resources
See official documentation to learn more about Liferay objects: