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
- Include the widget via
{% include user-feedback.html %}. It is automatically rendered at the bottom of everypagelayout unlesshideFeedback: trueis set in the page front matter - Use
hideFeedback: trueon transactional pages such as checkout flows, multi-step forms, or confirmation screens where user attention should remain 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-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). |
JavaScript API
The component auto-initializes on page load. Call NDS.UserFeedback.init() again after dynamically adding a widget to the DOM.
// Re-initialize after dynamically inserting a .nds-user-feedback element
NDS.UserFeedback.init();
// The component depends on two other modules:
// - NDS.Feedback — renders the inline success/error confirmation message
// - NDS.Cookies — persists submission state per page path for 365 days
// Both are included in the standard NDS bundle and initialize automatically.