Seeking input on implementing a feedback form for web page with 10 sections

[nj2]

Hi everyone,

I have a use case where the end user needs to provide feedback on the content they are viewing on a web page. The web page consists of 10 different sections (e.g. Section-A, Section-B, etc.). To allow the end user to provide feedback on a specific section, I need to implement a pop-up feedback form that will be available when the "Contact Us" link is clicked.

The feedback form will have a dropdown list that enables the end user to select the section they wish to provide feedback on, as well as a description field where they can enter their feedback or suggestions. Once the end user submits the feedback form, the data will be stored in a separate database for reporting purposes.

I'm seeking the community's input on the best way to implement this feature. Please let me know if you have any suggestions or recommendations.

1. I am looking for suggestions on how to approach implementing a feedback form for a web page with multiple sections. Has anyone done this before and what was your experience?
2. What is the recommended approach for storing data submitted through a feedback form in a separate database?
3. Are there any security measures that I should keep in mind while implementing the feedback form?
4. How can I generate a dropdown list of available sections on the web page for users to select in the feedback form?

Environment - AEM Cloud Services

Thank you!

[DPrakashRaj · Accepted solution]

1) & 4) you can use data source to create the drop-down dynamically by pulling the title of each section. You can also create the drop down list using cad common. http://aemlab.blogspot.com/2022/01/aemaacs-touch-ui-dialog-dynamic-dropdown.html?m=1
2) Make a POST call to a servlet. This servlet stores the data in the database. Make sure aem is able to connect to your database.

3) There should not be any security concern as it will contain generic information. Make sure to do validation on feedback form to validate the data that user submitted.

[Nitin_laad]

Hi, 

1. If there are already sections available on the page, you can utilize JavaScript to create a list of sections using the DOM object. Alternatively, you can obtain the list of sections in the form of a JSON object and create a list.

2. You can create a servlet or use a separate Service layer to push the data in external database and invoke the service using an AJAX call to submit the form data.

3. To ensure that only valid data is processed, implement server-side validation of the form data.

4. To prevent malicious code execution, utilize encoding and sanitization techniques such as HTML entity encoding, JavaScript encoding, and HTML sanitization.