show form as popup dialog | Community
Skip to main content
N
nj2
Level 3
March 19, 2023
Solved

show form as popup dialog

  • March 19, 2023
  • 2 replies
  • 1707 views

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!

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 Nirmal_Jose

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.

2 replies

Nirmal_Jose
Adobe Employee
Nirmal_JoseAdobe Employee
Adobe Employee
March 20, 2023

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

    N
    nj2Author
    Level 3
    March 20, 2023

    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
      Adobe Employee
      Nirmal_JoseAdobe EmployeeAccepted solution
      Adobe Employee
      March 21, 2023

      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
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        March 20, 2023

        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>

          Terms & ConditionsAccessibility statement

          Loading footer...