ngx-feedback-form

A highly customizable Angular feedback and review form component. This library provides a complete solution for collecting user feedback, reviews, and suggestions with a modern UI and extensive customization options.

Features

• 💬 Customizable feedback popup
• ⭐ Star rating component
• 📊 Likert scale questions
• ☑️ Category selection
• ✅ Checkbox options for improvement areas
• 📱 Device type selection
• 📝 Text feedback and suggestions
• 🎨 Fully customizable styling
• 🔧 Configurable form sections

Installation

npm install ngx-feedback-form

Basic Usage

1. Import the module in your app.module.ts:

import { NgxFeedbackFormModule } from 'ngx-feedback-form';

@NgModule({
  imports: [
    // ...
    NgxFeedbackFormModule
  ],
})
export class AppModule { }

2. Add the component to your template:

<feedback-form
  [config]="feedbackConfig"
  (onSubmit)="handleFeedbackSubmit($event)">
</feedback-form>

3. Configure the feedback form in your component:

import { Component } from '@angular/core';
import { FeedbackFormConfig } from 'ngx-feedback-form';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  feedbackConfig: FeedbackFormConfig = {
    title: 'Your Feedback Matters!',
    subtitle: 'Help us improve our service',
    showPopup: true,
    popupTitle: 'Share Your Thoughts',
    popupMessage: 'Would you like to complete a quick survey?',
    // Additional configuration options...
  };

  handleFeedbackSubmit(data: any) {
    console.log('Feedback submitted:', data);
    // Process the feedback data
  }
}

Configuration Options

The feedback form can be extensively customized through the FeedbackFormConfig interface:

General Configuration

| Property | Type | Description | |----------|------|-------------| | title | string | Main title for the feedback form | | subtitle | string | Subtitle or description text | | submitButtonText | string | Text for the submit button | | showPopup | boolean | Whether to show the initial popup |

Popup Configuration

| Property | Type | Description | |----------|------|-------------| | popupTitle | string | Title for the popup dialog | | popupMessage | string | Message content for the popup | | popupSkipButtonText | string | Text for the skip button | | popupFillButtonText | string | Text for the fill feedback button |

Section Visibility

| Property | Type | Description | |----------|------|-------------| | showDeviceTypeSection | boolean | Show/hide device type section | | showFrequencySection | boolean | Show/hide usage frequency section | | showStarRatingSection | boolean | Show/hide star rating section | | showLikertScaleSection | boolean | Show/hide Likert scale questions | | showCategoriesSection | boolean | Show/hide categories section | | showImprovementSection | boolean | Show/hide improvement areas section | | showFeedbackSection | boolean | Show/hide feedback text section |

Section Content Customization

| Property | Type | Description | |----------|------|-------------| | deviceTypePrompt | string | Prompt for device type section | | deviceTypes | Array | Available device type options | | frequencyPrompt | string | Prompt for frequency section | | frequencyOptions | Array | Available frequency options | | starRatingPrompt | string | Prompt for star rating section | | maxRating | number | Maximum rating value (default: 5) | | categories | Array | Available categories | | categoriesPrompt | string | Prompt for categories section | | ... | ... | And many more options |

Callbacks

| Property | Type | Description | |----------|------|-------------| | onSubmit | Function | Callback when form is submitted | | onSkip | Function | Callback when popup is skipped |

Styling Customization

The component uses CSS variables that can be overridden for custom styling. You can also provide custom CSS using Angular's component styling options.

License

MIT