---
title: "Net Promoter Score — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Kai Studio · Forms. Start for free Collect clear, actionable feedback with this fully customizable NPS (Net Promoter Score) input field for Framer."
canonical: "https://framer.elliotli.dev/component/net-promoter-score"
---

[Home](/)/[Components](/components)/[Forms](/components/category/forms)/Net Promoter Score

# Net Promoter Score

Interactive NPS input for Framer forms

[View on Framer](https://framer.com/marketplace/components/net-promoter-score/?via=elliot-li)

![Net Promoter Score preview image 1](https://framer.elliotli.dev/og/component/net-promoter-score/81124303f15a32cd/1600x1200.jpg)

## Summary

Start for free Collect clear, actionable feedback with this fully customizable NPS (Net Promoter Score) input field for Framer.

## Description

**This component is Part of the  Essential Components plugin.** Browse and insert 30+ components directly in Framer. [Start for free](https://www.framer.com/marketplace/plugins/essential-components/preview/)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mbmh4yty-AXw5PRSczSK8fSuFm6Poo8GHz7f1Dt)](https://www.framer.com/marketplace/plugins/essential-components/)

Collect clear, actionable feedback with this fully customizable NPS (Net Promoter Score) input field for Framer. Users select a score from 0 to 10 and can optionally provide an explanation for their choice in a follow-up text area. It’s perfect for surveys, onboarding flows, product feedback, and customer experience forms.

**This component is Part of the  Essential Components plugin.** Browse and insert 25+ ready-to-use components directly in Framer. [Get the Plugin](https://www.framer.com/marketplace/plugins/essential-components/preview/)

### How to Use the Net Promoter Score Component

-   **Copy and paste the component into a Framer Form.**The component must live _inside_ a Framer Form. Framer Forms let you send submissions to Email, Google Sheets, or Webhooks (such as Zapier, CRM systems, or any tool of your choice), so your NPS score and feedback go exactly where you need them.
    
-   **Set the Score Field Name:** Match the field name to your form setup so the selected score is captured correctly in your submissions.
    
-   **Adjust the Max Score:** Leave it at **10** for classic NPS, or change it if you want a different scoring range.
    
-   **Style the Score Buttons:** Customize the button text color, background, size, and border radius to match your design.
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-i8z60hc2-VHPcyJvxtPZpyT7vium8YGLKzUrT0e)

-   **Design the Selected State:** Use the _Selected_ controls to style the active button with its own background, text color, border, and shadow.
    
-   **Control Spacing and Labels:** Set the gap between buttons, the space to the labels, and the score label text color.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-i8z60hc2-srnFuQGXWF9kkX0f9hbxYHR3jUAAcx)

-   **Enable the Follow-Up Text Area:** Turn **Show Follow-up** to _Yes_ if you want to collect written feedback. When enabled, a text area appears after a score is selected so users can explain their choice.
    
-   **Customize the Text Area:** Style the textarea with your own placeholder text, font, colors, border, radius, padding, and number of rows.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-i8z60hc2-FZfsAtu2OPVz1ZvvamtpaLrWvMzhxq)

### Features

-   Classic 0–10 NPS scoring layout
    
-   An optional follow-up textarea appears after selection so users can explain their choice
    
-   Fully customizable  buttons and selected states• You can customise the score labels (“Not at all likely” → “Extremely likely”) to fit your purpose . You can also customise the color and Font properties• Adjustable spacing and layout
    
-   Works with Framer Forms (Email, Google Sheets, Webhooks)• Mobile-friendly and responsive
    

### Use Cases

1.  Product feedback forms
    
2.  Customer satisfaction surveys
    
3.  SaaS onboarding feedback
    
4.  Post-purchase experience tracking
    
5.  UX and website surveys
    
6.  Support follow-ups
    
7.  Client or user research
    

Live Preview: [https://netpromoterscore.framer.website/](https://netpromoterscore.framer.website/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #2772

## Details

- **Author**: Kai Studio
- **Price**: $9.00
- **Published**: 2026-02-15
- **Updated**: 2026-04-05
- **Added**: 2026-02-06
- **Categories**: Forms

## More across types

-   [Wallble: Guest Book & Wall of Love](/plugin/wallble-guest-book-wall-of-love) — Wallble · Free — Guest book & Wall of Love

## More like this

-   [Stay Booking Pro](/component/stay-booking-pro) — Design Foundry · $10 — Stay Planner with Dynamic Pricing
-   [Postcode Checker](/component/postcode-checker) — Sean Weekes · $15 — Do we cover your area? (UK
-   [Property Calculators](/component/property-calculators) — Sean Weekes · $12 — UK Stamp Duty, mortgage and yield
-   [UTM Lead Capture](/component/utm-lead-capture) — Sean Weekes · $9 — See where every lead came from