Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

show form as popup dialog

Avatar

Level 4
Level 4

Hi everyone,

I have a requirement to show a form as a popup with some prefilled list items in a site page in AEM CQ5. Can anyone suggest how I can achieve this? I am not sure how to implement this in AEM and any guidance or suggestions would be greatly appreciated. Thank you in advance!

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Great, then combining with Brian's answer(which is great), you can do this way.

 

1. Update/Add the button to open the XF popup on your triggering component.

2. Create a custom component with a submit button/overlay form container component. Component should have capability to pick up all submitted values of input field and submit it to your custom .net endpoint securely.

3. Based on your forecast of the usage of this component, you can either hardcode the input field our use form fields to make the form content generic and customisable for other forms.

View solution in original post

4 Replies

Avatar

Employee Advisor

Hi @nj2 ,

 

Can you share a little more details of your requirement so that we can build it better. Try to answer these questions.

1. What trigger makes the form shown to the customer ? - is it upon page load, or a customer interaction like button click etc.

2. You mentioned Prefilled list items - what type of data is prefilled, is it static or dynamic data

3. Upon form submission, what is the expected behaviour

4. Do you have AEM Forms sku in your license

 

As a super general answer for a static data prefilled model popup, you can create a form page in AEM using AEM form components and then build a model popup component which essentially iframes the AEM page. Use javascript to manage the trigger point to show the dialog

Avatar

Level 4
Level 4

thanks for your time @Nirmal_Jose , pleaes find below my updates - 

1. What trigger makes the form shown to the customer ? - is it upon page load, or a customer interaction like button click etc.

Button Click

2. You mentioned Prefilled list items - what type of data is prefilled, is it static or dynamic data

Dynamic, but available in form of sections on same html (example- usa.html will be having sections as NY, LA, SFO

3. Upon form submission, what is the expected behaviour - invoking a .NET service and persisting data in database for reporting 

4. Do you have AEM Forms sku in your license - No, but do you think for a single form(only) we should buy Form add-on

 

Regards

Avatar

Correct answer by
Employee Advisor

Great, then combining with Brian's answer(which is great), you can do this way.

 

1. Update/Add the button to open the XF popup on your triggering component.

2. Create a custom component with a submit button/overlay form container component. Component should have capability to pick up all submitted values of input field and submit it to your custom .net endpoint securely.

3. Based on your forecast of the usage of this component, you can either hardcode the input field our use form fields to make the form content generic and customisable for other forms.

Avatar

Community Advisor

Hi @nj2 , here's that steps that I would do to make your requirements come true;

This implementation is driven by experience fragments.

1. Create /content/experience-fragments/my-site/forms/customer-form

2. Create global utils JavaScript which finds class="cmp-model-content" and data-content-xf=""

- The javascript will addEventListener to any HTML elements that has the CSS class of "cmp-model-content". When event listener is added, when the user clicks on it, it will take the HTML data-attribute of data-content-xf, which will be used to make an ajax request to get the contents of that XF to be rendered into the popup model.

3. Now update all component's that requires the model popup function, target possible the <a> tag, so the rendered HTML would be something like <a href="#" class="cmp-model-content" data-content-xf="/content/experience-fragments/my-site/forms/customer-form/master.html">Click Me</a>