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: admin@clarityvisionsolutions.com
   • 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.

4. Select all fields and click Save.

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

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

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

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

   Tab	Setting	Value
   Styles	Padding	Spacer 3 (bottom)

8. Click Publish.

   

9. Test the form by submitting an entry.

10. 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 and form fragments, you can create multi-step forms. These forms are useful for complex objects that contain a large number of fields.

Here, you’ll convert the Contact Us form into a multi-step form 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. Navigate back to the Contact Us page and start editing the page.

6. Drag and drop a Stepper fragment into the form container above the Full Name field.
   This triggers a warning saying that adding this fragment converts the form into a multi-step form.

7. Click Continue.

8. Configure these settings for the Stepper fragment:

   Tab	Setting	Value
   Styles	Padding	Spacer 3 (bottom)
   Styles	Padding	Spacer 2 (left and right)

   
   

9. Select the form container and configure this setting:

   Tab	Setting	Value
   General	Display All Steps in Edit Mode	Enabled

   
   You can now arrange the form fields across different steps.

10. Scroll down and move these fields into the second step's drop zone:

    • State and Province
    • City
    • Comment
    

11. Select the form container and disable the Display All Steps in Edit Mode option.

12. Click the first circle in the Stepper fragment to edit the first step.
    

13. Drag and drop a container above the Submit button and configure these settings:

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

14. Drag the Submit button into the container and configure these settings:

    Tab	Setting	Value
    General	Type	Next
    General	Submitted Entry Status	Draft

    
    

    
    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. Furthermore, selecting the Draft option for the Submitted Entry Status field saves the object entry as a draft upon submission of the first form step.

15. Go to the second form step in the Stepper fragment.

16. Repeat step 13 to drag and drop a container fragment under the Comment field.

17. Drag and drop a Form Button fragment into the container.

18. Select the button, click Options () for the fragment’s toolbar, and select Duplicate.
    You’ll use these fragments to create the Submit and Previous buttons.

19. Click the left button and configure these settings:  

    Tab	Setting	Value
    General	Type	Previous
    Styles	Padding	Spacer 2 (Right)

20. Double-click the “Step 1” text for the Stepper fragment and enter Contact Info.

21. Double-click the “Step 2” text and enter Additional Info.

22. Click Publish and test out the form.
    

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

Conclusion

Congratulations! You’ve implemented Clarity’s Contact Us form. Next, you’ll learn how you can leverage data sets and workflow to improve visibility for Clarity’s contract submissions.

Additional Resources

See official documentation to learn more about Liferay objects:

• Objects
• Using Fragments to Build Forms