Create Form elements in AEM Sites | Community
Skip to main content
NageshRaja
NageshRaja
Level 5
October 15, 2024
Solved

Create Form elements in AEM Sites

  • October 15, 2024
  • 3 replies
  • 2291 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Hemalatha

Hi @nageshraja ,

 

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

3 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
October 17, 2024

@mahesh_gunaje @rajumuddana @heenamadan @albinis1 @hemalatha @avesh_narang Curious to hear your perspectives on this question. Do you all mind sharing your thoughts?

Kautuk Sahni
Hemalatha
HemalathaAccepted solution
Level 4
October 17, 2024

Hi @nageshraja ,

 

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

    M
    MaheshaGu
    Level 2
    October 17, 2024

    Hi @nageshraja 

     

    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
      avesh_narang
      Level 3
      October 17, 2024

      Hi @nageshraja 

      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.$);

       

        A
        Community Advisor
        AlbinIs1Community Advisor
        Community Advisor
        October 17, 2024

        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

          NageshRaja
          NageshRajaAuthor
          Level 5
          October 17, 2024

          Hey @albinis1 , 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?

            A
            Community Advisor
            AlbinIs1Community Advisor
            Community Advisor
            October 17, 2024

            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

              Terms & ConditionsAccessibility statement

              Loading footer...