Personalizing Custom Forms Using Form Fragments
Form fragments auto-generate forms based on custom objects. If Liferay’s out-of-the-box form fragments don’t satisfy your use case, you can create custom form fragments and alter the style of your forms by mapping your custom form fragment to a field type.
The custom form fragments use HTML, CSS, and JavaScript code to create an element with customized style and functionality. This way, you can customize your forms using an existing design system and/or components library. See Creating Form Fragments for more information.
Form fragments can only be used with custom objects. Liferay hides the Form Components fragment set until you have at least one published object. Once published, users with access to the object can view and use the Form Components fragments. See Creating Objects for more information.
Map Custom Form Fragments to Form Fields
To alter the default style and functionality of a form field, you can map a custom form fragment to a field type:
-
Open the Site Menu (
) and click Design → Fragments.
-
In the Fragments application, click Options (
) in the applications bar → Configuration.
-
Select the Form Fragment (in the right column) to be applied to the Field Type (in the left column).
-
Choose the fragment set under your site’s tab. Fragments with a compatible type of field appear.
-
Select the custom form fragment you want to apply.
You can check if the custom fragment is applied to the field type by adding a form to a content or template page. See Using Fragments to Build Forms to learn more about building forms using fragments.
Once you’ve applied the custom form fragment to the field type, the new style (on the left) is applied to the field type instead of the out-of-the-box style (on the right).