Building Clarity’s Distributor Application Form

In the previous article, you explored how you can use form fragments to create engaging and user-friendly object experiences. Here, you'll continue implementing Clarity’s distributor management app by creating a form for distributor applications. This includes designing a submission success page.

Before diving into the exercises, you’ll prepare the resources you’ll use throughout this module’s exercises.

Exercise: Creating the Distributor Application Form

Here you’ll create the International Distributor Application form for potential distributors to fill out.

1. Open the Global Menu () and click Clarity Public Enterprise Website.

2. Open the Site Menu (), expand Site Builder, and click Pages.

3. In the Static Pages tab, click Actions () for the Apply page and select Edit.

4. Drag and drop the International Distributor Application Page fragment composition into the page body.
   

   This composition adds an empty form container to the page.

5. For the form container, select Distributor Application.
   
   A modal appears prompting you to select which fields to include in the form. However, you’ll use fragment compositions to accelerate form design.

6. Click Save without selecting any fields.

7. Select the Form Container fragment and configure these settings in the General Tab.

   Setting	Value
   Form Type	Multistep
   Number of Steps	3
   Display All Steps in Edit Mode	Checked

   
   
   This adds three dropzones that represent different steps for Clarity’s form. You can now add fields and other fragments to each dropzone.
    

8. Drag and drop these fragment compositions into each dropzone:

   • Step 1: General Details Container | Distributor Application Form

   • Step 2: Business Details Container | Distributor Application Form

   • Step 3: Additional Details Container | Distributor Application Form

     
     These compositions include most of the fields and fragments that Clarity needs. Though you’ll add a few missing fields manually.

9. Select the Form Container and click Manage Form Fields in the side panel.
   

10. In the modal, check these fields:

    1. Annual Purchase Volume

    2. Business License

    3. Business Website URL
       

11. Click Save.
    The fields are added to the bottom of Step 1.
    
    Next, you’ll move them to their appropriate locations.

12. Move Annual Purchase Volume above the Comments field in Step 1.
    

13. Move Business Website URL below the Business Details Grid fragment in Step 2.
    

14. Move Business License below the Business TAX ID Number in Step 3.
    
    Next, let’s take a look at the buttons that control how users move between steps.

15. Click the Step 1 - Next button and confirm that its Type is set to Next in the General tab. This ensures the button leads to the second step.
    

16. Drag and drop the Form Button fragment into the second module of the Other Details - Buttons grid.
    

17. Select the Submit button and configure these settings in the Styles tab:

    Key	Value
    Padding Top	Spacer 4
    Padding Bottom	Spacer 4
    Text Alignment	Center

    
    

18. Click Publish.
    Liferay displays a warning because the form does not include the mandatory applicationState field. You can safely ignore this warning and proceed.

The updated Apply page is now live. Authenticated users can access it to submit a distributor application.

Exercise: Creating the Submission Success Page

Now that you've built the Distributor Application form, Clarity wants to further customize the application process with a custom success page. This page should provide applicants with clear confirmation that their application has been received successfully. Here you’ll implement this page.

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

2. Go to the Display Page Templates tab.

3. Click New and select Primary Master Page.

4. For Name, enter Application Success.

5. For Type, select Distributor Application.

6. Click Save.

7. Drag and drop the Distributor Application Success Page composition into the page body. This includes a nearly complete design for Clarity’s success page.

8. Select element-text for the Mapped Business Name fragment.

9. In the configuration side panel, map the text element to the object’s Business Name as the Field.

10. Click Publish. With the page template complete, you can use it for the International Distributor Application form you created in the previous exercise.

11. Open the Site Menu (), expand Site Builder, and click Pages.

12. Begin editing the Apply page.

13. Select the Distributor Application Form Container and configure these settings:

    Tab	Setting	Value
    General	Actions After Submit > Success Action	Go to Entry Display Page
    General	Actions After Submit > Display Page	Application Success

    
    
    ​​​​​​​

14. Click Publish, then click Publish again to proceed.

Now when users click submit, Liferay submits the entry and directs the user to a separate success page. Take some time to test it out and verify the form behaves as expected.

Conclusion

Great! You’ve created Clarity’s distributor application form using objects and form fragments. Together, these features empower you to create engaging, seamless, and user-friendly experiences for creating object entries. Next, you’ll learn how you can use page builder features to display lists of object entries.

Up Next: Displaying Lists of Object Entries in Site Pages