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,

1. Sign in as the Clarity Admin user.

   • Username: [e-mail]
   • Password: learn

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

3. Click Add ().

4. Enter these details:

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

5. 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.

6. From the Objects overview page, begin editing the Contact Us object definition.

7. 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

8. 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.

9. Go to the Fields tab.

10. 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

11. 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

12. 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,

1. Go to Clarity’s public enterprise website and begin editing the Contact Us page.

2. Drag and drop a form container fragment into the Contact Form container.

3. Click the drop-down menu and select the Contact Us object.

   This populates the form with fields from the object automatically.

4. 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

5. Drag and drop the field fragments into this order:

   • Full Name
   • Email Address
   • Phone
   • State or Province
   • City
   • Comment

6. Select each of these field fragments and configure this setting:

   Tab	Setting	Value
   Styles	Padding	Spacer 3 (bottom)

7. Click Publish.

   

8. Test the form by submitting an entry.

9. 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,

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

2. Begin editing the Contact Us object definition.

3. 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.

4. Click Save.

5. Open the Site Menu (), expand Design, and click Page Templates.

6. Go to the Display Page Templates tab and click New.

7. Select the Primary Master Page template.

8. Enter Contact Us - Step 2 for the name and select Contact Us for content type.

9. Click Save.

10. Drag and drop the Contact Us Page fragment composition into the template.

11. Repeat steps 2-5 from Exercise 19b to create the form.

12. 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

    

13. Click Publish.

14. Return to the Contact Us page and begin editing it.

15. 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

16. Remove these fields from the container:

    • State or Province
    • City
    • Comment

17. 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.

18. Double-click the Submit Button fragment to edit its text and enter Next.

19. Click Publish.

    

20. 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:

• Objects
• Using Fragments to Build Forms