Create Form elements in AEM Sites

[_CL]

Hey guys,

I want to create basic form elements in AEM such as Date Picker, Numeric, Text fields, dropdowns etc.

I know AEM Forms is the way to go with their OTB support for validations, maxlength, regex based validations etc.

But since the client doesn't want to go with the additional Form licensing cost - What is my best option?

The Content Fragment Model Editor console also offers some validations for the fields.

Should we use a content fragment to build out the form in AEM Sites?

Or should we go for the standard AEM component building with authorable max/min length, validations etc?

[kautuk_sahni]

@Mahesh_Gunaje @Rajumuddana @HeenaMadan @Albin_Issac @Hemalatha @avesh_narang Curious to hear your perspectives on this question. Do you all mind sharing your thoughts?

[Hemalatha · Accepted solution]

Hi @_CL ,

In my experience, if you want to use end user forms in AEM without using OOTB AEM Form Components, then the best way is to create your own custom AEM form components with option for authoring, custom input validation rules, hidden fields management etc. Front end code will take care of validation of user input, payload creation, form submission, analytics etc. 

Hope this helps.

Regards,

Hemalatha C

[MaheshaGu]

Hi @_CL 

Already @Hemalatha   expalined the concepts, that you can follow.

1: Create  form container, that will allow you to add other newly created form components. In this component, set the form action details. If you want to send mail, after the form submission, add the dialog box to include To, cc mail ID, email template etc.

2: Create different components for Name (Text field), County, State(Drop down), Google Captcha. Add validation in each component. Whether this is mandatory or not.

Note: This is not a simpe 1 sprint task. Consider this as an epic. 

[avesh_narang]

Hi @_CL 

In addition to above steps , should you wish to manage any unique validation within the authoring dialog box, please do not hesitate to create your own jquery code to incorporate the validation into the dialog field and then register it with the Foundation.validation.validator. Here is the pseudo code :

(function (document, $) {
    "use strict";
    applyValidation("<fieldName of dialog>");
   //below example for multifield validation - can be extended to any dialog field via giving appropiate selector value
    function applyValidation(fieldName) {
        $(window).adaptTo("foundation-registry")
            .register("foundation.validation.validator", {
                selector: 'coral-multifield[data-granite-coral-multifield-name^="' + fieldName + '"]',
                validate: function (el) {
                    //Apply Custom Validation Logic
                },
            });
    }
})(document, Granite.$);

[_CL]

Hey @Hemalatha, @avesh_narang, @MaheshaGu - Thanks for the responses! Can't we leverage content fragments too for the same?

The form fields in a content fragment also provide the validations - Can't we just have content fragments properties binded to the form fields?

[Hemalatha]

@_CL  Content fragments are typically used to maintain variation of contents managed by authors. We cannot leverage content fragments for the end user input validations.

Typical CF use cases in AEM are explained below, 

https://axamit.com/blog/adobe-experience-manager/content-fragments-vs-experience-fragments/#:~:text=....

Hope this helps.

Regards,

Hemalatha C

[Albin_Issac]

If you don't want to proceed with an AEM Forms license (which enables extensive form capabilities), you can use the Core Form Components that are part of the AEM Core Components. You can find them here: AEM Core WCM Components - Form.

Additionally, you can create custom components or override existing form components, including validation, styling, and more. You can also define form actions to handle submitted data. Some actions are supported out-of-the-box (e.g., sending to an email or an API).

Regards

Albin

https://myprofile.albinsblog.com

[_CL]

Hey @Albin_Issac , thanks but I have one query!
What about binding form component fields to the content fragment properties? Is that a way to go about building forms?

[Albin_Issac]

The approach I explained focuses more on building forms for end users, allowing them to submit different types of data, such as capturing lead information.

Content Fragments, on the other hand, are mainly used to enable headless (content not bound to a page) structured content. The Content Fragment Model types can be customized for various use cases. For more details on customizing Content Fragment Models, you can refer to this resource:

- AEM Content Fragments extensions | Adobe Experience Manager

Regards

Albin

https://myprofile.albinsblog.com