Feedback Form

Ever wondered how users really react to your blog post or product? Now you can collect feedback the easy way. This component lets users share quick ratings and comments, with every response automatically saved to Google Sheets, sent to Email or or delivered through a Webhook for broader use cases, so you can review insights and decide what to improve. Never lose valuable feedback from your readers or customers again.

Instructions

The Feedback Form is a flexible survey form component designed to collect user feedback, ratings, reviews, and customer satisfaction responses in a clean, interactive way.

To start using it:

• Copy and paste the Feedback Form component into your Framer project.

• Open the Insert panel in Framer and add a Form widget. Remove all default input fields and the button so only the main Form frame remains.

• Drag the Feedback Form component inside the Form frame. This allows the form to send submissions by email, to Google Sheets or to Webhook.

• Click the Form frame to configure where responses should be delivered (email or Google Sheets or webhook).

• Customize the rating field by adding emoji feedback or uploading custom icons in the Rating Options array.

• Add optional custom fields such as text, email, or phone inputs before the main message textarea.

• Adjust styling, spacing, animations, and behavior from the right-side property panel.

This component works well as a review form, testimonial form, customer satisfaction survey form, or product rating form.

How It Works

The component is structured into clear control sections so you can easily build a user feedback and rating form without coding.

Properties Control

1. Content Controls:

Set your question text, placeholders, and submit button labels.

2. Form Display Mode:

Choose how the Emoji feedback form appears:

• Always Open - shows the full contact form layout immediately

• Click to Open - starts with emoji feedback or rating form selection, then expands

3. Page URL Capture:

• Automatically captures and includes the current page URL in form submissions

• Useful for tracking which pages generate feedback

4. Rating Options:

Build your rating form with unlimited options:

• Add emoji feedback buttons or custom icon buttons

• Create unique rating names for survey form tracking

• Add labels for emoji + text layouts

Perfect for customer satisfaction and review form scenarios.

5. Custom Fields (Optional)

Extend the emoji feedback form with custom fields:

• Add text, email, or phone inputs

• Use custom field names for structured user feedback data

• Set required fields individually

Great for contact form and testimonial form use cases.

6. Rating Button and Label Styling:

Choose how your rating form looks:

• Emoji Only - compact emoji feedback strip

• Emoji + Text - labeled rating buttons

• Control Font, colors, padding, borders, shadows, and separators.

• Emoji/text spacing

7. Input Field Styling:

Customize all custom fields and text areas:

• Fonts, padding, borders, colors

• Focus states and shadows

• Min/max textarea height

Works across feedback form, contact form, and review form layouts.

8. Submit Button Styling

Control submit button visuals:

• Colors and hover states

• Padding and shadows

• Smooth animated transitions

9. Character Counter & Validation

Improve feedback quality with validation tools:

• Show or hide character counter

• Display remaining or current/max format

• Warning colors near limits

• Minimum and maximum character rules

Helps structure better user feedback and review form responses.

10. Success Message & Behavior

Control what happens after submission:

• Custom success message

• Hide or keep the feedback form visible

• Auto-reset after a delay

• Built-in honeypot protection and minimum submit time spam filtering

Designed for safe customer satisfaction and survey form collection.

11. Spacing Controls

Fine-tune layout spacing:

• Title → rating buttons gap

• Buttons → input fields gap

• Custom fields spacing

Key Features

• Production-ready feedback form and rating form component

• Emoji feedback and custom icon ratings

• Customer satisfaction and opinion form ready

• Built-in honeypot protection for spam prevention

• Smooth animations and interactive states

• Fully responsive layout

• Accessibility support with ARIA labels and keyboard navigation

• Unlimited custom fields

• Real-time validation and character limits

• Works as survey form, review form, testimonial form, and contact form

• Auto-reset after submission

• Canvas preview support

• TypeScript built for reliability

• Structured data support for sentiment analysis workflows

Use Cases

• Blog/Article Feedback: Collect reader opinions on posts

• Customer Satisfaction Surveys: Quick emoji-based ratings

• Product Reviews: Rating + comment system for products

• Support Ticket Forms: Gather user issues with contact info

• Event Feedback: Post-event satisfaction surveys

• Course Evaluations: Student feedback for online courses

• Landing Page Forms: Lead capture with sentiment rating

• Newsletter Feedback: Content quality assessment

• App Store-Style Reviews: Emoji rating + written feedback

Made with ❤️ by Soyeb

Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.

Have questions or need a custom Framer component? Reach out at heysoyebali@gmail.com