How to Create an NPS Survey (Free Template)

Net Promoter Score is one question: "How likely are you to recommend us?" Score 0-10. That's it. But the magic is in what you do after they answer. This guide shows how to build an NPS survey with smart follow-up questions that adapt based on the score.

What is NPS?

NPS divides respondents into three groups based on their score:

• Promoters (9-10) - Love you. Will recommend you. Your best customers.
• Passives (7-8) - Satisfied but not excited. Could switch to a competitor.
• Detractors (0-6) - Unhappy. Might leave bad reviews. Need attention.

Your NPS score = % Promoters - % Detractors. Ranges from -100 to +100. Above 0 is okay. Above 50 is excellent. Above 70 is world-class.

The Basic NPS Question

Start with the core NPS question. FormTs has a built-in NPS preset that handles the 0-10 scale:

form.addRow(row => {
    row.addRatingScale('nps', {
        preset: 'nps',
        label: 'How likely are you to recommend us to a friend?',
        isRequired: true
    });
});

The preset: 'nps' gives you:

• 0-10 scale with proper labels
• Automatic categorization (promoter/passive/detractor)
• Standard NPS styling

Adding Visual Feedback

Make the survey more engaging with category labels and celebrations:

row.addRatingScale('nps', {
    preset: 'nps',
    label: 'How likely are you to recommend us?',
    showCategoryLabel: true,     // Shows "Detractor", "Passive", "Promoter"
    showConfettiOnPromoter: true, // Celebration for scores 9-10
    isRequired: true
});

showCategoryLabel displays "Detractor", "Passive", or "Promoter" after selection. showConfettiOnPromoter adds a small celebration when someone gives you a 9 or 10. It's a nice touch.

Getting the NPS Category

To customize the survey based on the score, use the npsCategory() helper:

// Get the NPS category based on score
const category = form.ratingScale('nps')?.npsCategory();
// Returns: 'promoter' (9-10), 'passive' (7-8), or 'detractor' (0-6)

This returns the category as a string, which you can use in conditions throughout your form.

Dynamic Follow-Up Questions

The real value of NPS is understanding why someone gave that score. Add a follow-up section that appears after they rate:

const followUp = form.addSubform('followUp', {
    isVisible: () => {
        const score = form.ratingScale('nps')?.value();
        return score !== null && score !== undefined;
    }
});

followUp.addRow(row => {
    row.addTextarea('feedback', {
        label: () => {
            const category = form.ratingScale('nps')?.npsCategory();
            if (category === 'promoter') return 'Awesome! What do you love most?';
            if (category === 'passive') return 'Thanks! How can we do better?';
            return "We're sorry. What went wrong?";
        },
        placeholder: 'Share your thoughts...',
        rows: 3
    });
});

The question changes based on the category:

• Promoters see "What do you love most?" - learn what's working
• Passives see "How can we do better?" - find improvement areas
• Detractors see "What went wrong?" - understand problems

Collecting Contact Info for Detractors

When someone's unhappy, you want a chance to fix it. Show an email field only for detractors:

followUp.addRow(row => {
    row.addEmail('email', {
        label: 'Email (optional)',
        placeholder: 'For follow-up if needed',
        isVisible: () => form.ratingScale('nps')?.npsCategory() === 'detractor'
    });
});

Keep it optional. Some people just want to vent. Others want help. Give them the choice.

Visual Styling by Category

Make the follow-up section visually match the sentiment. Green for promoters, yellow for passives, red for detractors:

const followUp = form.addSubform('followUp', {
    isVisible: () => form.ratingScale('nps')?.value() !== null,
    customStyles: () => {
        const category = form.ratingScale('nps')?.npsCategory();
        if (category === 'promoter') {
            return { backgroundColor: '#d1fae5', padding: '16px', borderRadius: '8px' };
        }
        if (category === 'passive') {
            return { backgroundColor: '#fef3c7', padding: '16px', borderRadius: '8px' };
        }
        return { backgroundColor: '#fee2e2', padding: '16px', borderRadius: '8px' };
    }
});

The customStyles function runs whenever the category changes, updating the background color in real-time.

Thank You Message

End with a message that acknowledges their feedback:

form.addRow(row => {
    row.addTextPanel('thanks', {
        computedValue: () => {
            const category = form.ratingScale('nps')?.npsCategory();
            if (category === 'promoter') return 'Thank you for being a fan!';
            if (category === 'passive') return 'Thank you for your feedback!';
            if (category === 'detractor') return "We appreciate your honesty.";
            return '';
        },
        isVisible: () => form.ratingScale('nps')?.value() !== null
    });
});

Different messages for different categories. Promoters feel appreciated. Detractors know you heard them.

Complete Example

Here's a minimal NPS survey with dynamic follow-up:

export function npsSurvey(form: FormTs) {
    form.addRow(row => {
        row.addRatingScale('nps', {
            preset: 'nps',
            label: 'How likely are you to recommend us to a friend?',
            showCategoryLabel: true,
            showConfettiOnPromoter: true,
            isRequired: true
        });
    });

    const followUp = form.addSubform('followUp', {
        isVisible: () => form.ratingScale('nps')?.value() !== null
    });

    followUp.addRow(row => {
        row.addTextarea('feedback', {
            label: () => {
                const category = form.ratingScale('nps')?.npsCategory();
                if (category === 'promoter') return 'What do you love most?';
                if (category === 'passive') return 'How can we improve?';
                return 'What went wrong?';
            },
            rows: 3
        });
    });

    form.configureSubmitButton({
        label: () => 'Submit Feedback'
    });
}

Copy this, paste it in the FormTs editor, and you have a working NPS survey. Customize the labels and questions to match your brand.

When to Send NPS Surveys

Timing matters. Here are common triggers:

• After purchase - 1-2 days after delivery/completion
• After support interaction - immediately after ticket closed
• Periodically - quarterly for long-term customers
• After milestone - 30/60/90 days as a customer

Don't survey the same person too often. Once per quarter is usually enough.

What to Do with the Responses

Promoters

These are your advocates. Ask them for:

• Reviews on Google/G2/Capterra
• Case studies or testimonials
• Referrals

Passives

They're satisfied but not loyal. Find out what would make them a 9 or 10. Often it's a small thing you can fix.

Detractors

Reach out personally if they left contact info. Apologize, understand the issue, fix it if possible. A recovered detractor often becomes a promoter.

Tracking NPS Over Time

One NPS score is a snapshot. The trend matters more. Track monthly or quarterly:

• Is your score improving or declining?
• Did a product change affect scores?
• Which customer segments have the highest/lowest NPS?

Export your submissions to a spreadsheet or send them to your analytics tool via webhooks.