OpenFeedback Component | Open-Ended Qualitative Survey Questions

OpenFeedback is a web component for qualitative research. Ask open-ended questions to understand user pain points, collect detailed feedback, and capture insights that structured surveys miss.

@sensefolks/openfeedback

OpenFeedback Features

📝 Open-ended text feedback collection
✅ Built-in form validation with accessible error messages
♿ WCAG 2.1 AA accessible out of the box
⌨️ Full keyboard navigation (Tab between fields)
🔊 Screen reader optimized with ARIA labels
🎨 Fully customizable via CSS Parts
📱 Mobile-first responsive design
🌐 Works with React, Vue, Angular, and vanilla JS

When to Use OpenFeedback

Embed OpenFeedback at exit, confusion, or frustration points:

Help docs and FAQs — "Didn't find what you needed?"
Error states — "What were you trying to do?"
Exit intent modals — "What made you leave?"
Account cancellation flows — "How can we improve?"

Installation

CDN (Recommended)

html

<!-- Modern browsers (ES modules) -->
<script type="module" src="https://unpkg.com/@sensefolks/openfeedback/dist/sf-openfeedback/sf-openfeedback.esm.js"></script>

<!-- Legacy browsers -->
<script nomodule src="https://unpkg.com/@sensefolks/openfeedback/dist/sf-openfeedback/sf-openfeedback.js"></script>

NPM

bash

npm install @sensefolks/openfeedback

Usage

HTML

html

<sf-openfeedback 
  survey-key="your-survey-uuid" 
  completion-message="Thank you for your feedback!">
</sf-openfeedback>

React

jsx

import '@sensefolks/openfeedback';

function App() {
  return (
    <sf-openfeedback 
      survey-key="your-survey-uuid" 
      completion-message="Thank you!">
    </sf-openfeedback>
  );
}

API Reference

Properties

Property	Attribute	Type	Default	Description
`surveyKey`	`survey-key`	string	—	UUID of the survey to load
`completionMessage`	`completion-message`	string	'Thank you for your response!'	Message shown after submission

CSS Parts

Style the component using CSS Parts:

css

sf-openfeedback::part(container) {
  /* Main container */
}
sf-openfeedback::part(heading) {
  /* Step headings */
}
sf-openfeedback::part(textarea) {
  /* Feedback textarea */
}
sf-openfeedback::part(field) {
  /* Form field container */
}
sf-openfeedback::part(field-label) {
  /* Form field labels */
}
sf-openfeedback::part(input) {
  /* Input elements */
}
sf-openfeedback::part(button) {
  /* All buttons */
}
sf-openfeedback::part(error-message) {
  /* Error messages */
}

Accessibility

Full keyboard navigation (Tab between fields)
ARIA labels and live regions for screen readers
Form validation with accessible error messages
Focus indicators and high contrast mode support
Respects prefers-reduced-motion

Browser Support

Browser	Version
Chrome	88+
Firefox	85+
Safari	14+
Edge	88+
IE11	✅ (ES5 build)