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.

You can use Liferay objects to define your data models.

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 (Global Menu), go to the Control Panel tab, and click Objects.

  3. Click Add (Add Button).

  4. Enter these details:

    FieldValue
    LabelContact Us
    Plural LabelContact Us
    Object NameContactUs
  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:

    FieldValue
    Scope > ScopeSite
    Scope > Panel LinkContent & Data
    Configuration > Show Widget in Page BuilderFalse
    Configuration > Enable Entry History in Audit FrameworkTrue
  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 (Add Button), enter these details, and click Save:

    FieldValue
    LabelFull Name
    Field NamefullName
    TypeText
    MandatoryYes
    Accept Unique Values OnlyNo
  11. Repeat the previous step to create the remaining fields:

    LabelField NameTypeMandatoryUnique Values Only
    Email AddressemailAddressTextYesNo
    PhonephoneTextYesNo
    State or ProvincestateOrProvinceTextNoNo
    CitycityTextNoNo
    CommentcommentLong TextNoN/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:

    TabSettingValue
    General > FrameWidth400px
    StylesPaddingSpacer 4 (all sides)
    StylesBackground#FFFFFF
    StylesBorder Radius15px
  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:

    TabSettingValue
    StylesPaddingSpacer 3 (bottom)
  7. Click Publish.

    You can fill out the Contact Us form after publishing the page.

  8. Test the form by submitting an entry.

  9. Go to Site Menu (Site Menu), expand Content & Data, and click Contact Us. The entry you created should appear here.

    The Contact Us entry appears in the menu.

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 (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:

    FieldValue
    Configuration > Allow Users to Save Entries as DraftTrue

    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 (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:

    TabSettingValue
    GeneralSuccess ActionGo to Page
    GeneralPageHome
    GeneralShow Notification After SubmitYes

    You can configure the form to redirect to another page when submitted.

  13. Click Publish.

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

  15. Select the form container and configure these settings:

    TabSettingValue
    GeneralSuccess InteractionGo to Entry Display Page
    GeneralDisplay PageContact 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:

    TabSettingValue
    GeneralSubmitted Entry StatusDraft

    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.

    The form will redirect to its second step when clicking Next.

  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:

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy