Feedback Survey
The widget starts with a Yes/No question. Selecting an answer reveals a tailored follow-up form specific to that choice, then submission replaces the form with a confirmation message.
Built-in Features
Activates on every .nds-user-feedback element on the page. All click handlers and state transitions wire up without any JavaScript calls.
Clicking Yes or No reveals a tailored follow-up form for that answer, hiding the other branch. Closing resets the entire widget back to the initial question state.
Saves a cookie keyed to the current page path for 365 days. Returning visitors see the confirmation message instead of being presented the survey again.
Reads the page language from the lang attribute and delivers success and error messages in Arabic or English automatically.
Uses data-required and data-min-checked on fieldsets to validate before submission. Inline error messages surface directly below the failing field.
The nds-user-feedback-section class on the enclosing section applies a primary-color top border and neutral background for standard bottom-of-page placement.
Usage Guidelines
Best Practices
- Copy the markup from the HTML tab above and place it inside a
<form>near the bottom of the page, after the main content, so it reads as a closing prompt - Leave the widget off transactional pages such as checkout flows, multi-step forms, or confirmation screens, where user attention should stay on the task
- Tailor the
.nds-why-yesand.nds-why-nocheckbox options in the include to match the type of content on the page - Keep both checkbox lists to four to six options. Long lists reduce completion rates and produce noisier data
- Do not use this as the only feedback channel for critical issues. The widget collects qualitative signals, not bug reports. Pair it with a link to a dedicated support form
- Connect your data collection endpoint via the form's
actionattribute or by intercepting the submit event before the component's handler runs, since the component itself does not make a network request - Use
data-success-messageanddata-error-messageon the.nds-user-feedbackelement only when the built-in bilingual defaults do not match your page's tone - The
.nds-user-feedback-statisticspan is optional. Remove it if you do not have real satisfaction data to display
Data Attributes
| Attribute | Element | Description |
|---|---|---|
data-answer="Yes|No" |
.nds-btn (answer buttons) |
Tells the JS which follow-up branch to reveal. Must be exactly Yes or No (capitalized). |
data-state="details|status" |
.nds-user-feedback (JS-stamped) |
Set at runtime by the component. details shows the follow-up form and hides the statistic; status shows the confirmation message and hides the question and answer buttons. Absent in the initial question state. |
data-answer="yes|no" |
.nds-user-feedback (JS-stamped) |
Set at runtime on the root element (lowercase) when the user selects an answer. Controls which follow-up branch is visible: yes shows .nds-why-yes, no shows .nds-why-no. Removed on reset. |
data-required |
fieldset |
Marks a checkbox or radio group as required. At least one option must be selected before submission proceeds. |
data-min-checked="N" |
fieldset |
Requires at least N checkboxes to be selected. Used on the yes branch to encourage multiple selections. |
data-feedback-target |
.nds-form-footer |
Marks the element where NDS.Forms injects inline validation error messages for that field group. |
data-success-message |
.nds-user-feedback |
Overrides the default success message. Defaults to "Your feedback is submitted!" (English) or "تم استلام ملاحظتك!" (Arabic). |
data-error-message |
.nds-user-feedback |
Overrides the default error message. Defaults to "An error occurred, please try again" (English) or "حدث خطأ، يرجى المحاولة مرة أخرى" (Arabic). |
data-no-persist |
.nds-user-feedback |
Disables cookie persistence: the widget never restores a saved submission and never writes one. Useful for demos, previews, or pages that should ask on every visit. |
JavaScript API
The component auto-initializes on page load. The methods below cover re-initializing or wiring up a widget added to the DOM after load.
// Initialize every .nds-user-feedback on the page. Idempotent: already
// initialized widgets are skipped, so it is safe to call repeatedly.
NDS.UserFeedback.init();
// Alias of init(), provided for parity with other NDS components.
NDS.UserFeedback.reinit();
// Initialize a single widget element (also skips if already initialized).
NDS.UserFeedback.create(document.querySelector('.nds-user-feedback'));
// Dependencies, all in the standard NDS bundle and auto-initialized:
// - NDS.Feedback: renders the inline success/error confirmation message
// - NDS.Cookies: persists submission state per page path for 365 days
// - NDS.Forms: validates required fieldsets before submission