show form as popup dialog

[nj2]

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!

[Nirmal_Jose]

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

[nj2]

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

[Nirmal_Jose · Accepted solution]

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.

[BrianKasingli]

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>