Documentation Index
Fetch the complete documentation index at: https://mintlify.com/formsmd/formsmd/llms.txt
Use this file to discover all available pages before exploring further.
Build a comprehensive customer feedback survey that combines rating inputs, opinion scales, choice inputs, and open-ended questions. This example demonstrates how to gather both quantitative and qualitative feedback from your customers.
Complete example
This survey collects satisfaction ratings, detailed feedback, and improvement suggestions using various input types.
import "formsmd/dist/css/formsmd.min.css";
import { Composer, Formsmd } from "formsmd";
const composer = new Composer({
id: "feedback-survey",
postUrl: "/api/feedback",
title: "Customer Feedback Survey"
});
// Rating input for overall satisfaction
composer.ratingInput("satisfaction", {
question: "How satisfied are you with our product?",
required: true,
outOf: 5,
icon: "star"
});
composer.slide({
pageProgress: "1/4"
});
// Opinion scale for recommendation likelihood
composer.opinionScale("nps", {
question: "How likely are you to recommend us to a friend or colleague?",
required: true,
startAt: 0,
outOf: 10,
labelStart: "Not likely",
labelEnd: "Very likely"
});
composer.slide({
pageProgress: "2/4"
});
// Multiple choice for features used
composer.choiceInput("features", {
question: "Which features do you use most often?",
description: "Select all that apply",
choices: [
"Dashboard",
"Reports",
"API Integration",
"Mobile App",
"Email Notifications"
],
multiple: true,
required: true
});
composer.slide({
pageProgress: "3/4"
});
// Open-ended feedback
composer.textInput("feedback", {
question: "What could we improve?",
description: "Your detailed feedback helps us build a better product",
multiline: true,
required: true
});
// Optional contact information
composer.choiceInput("followUp", {
question: "May we contact you about your feedback?",
choices: ["Yes", "No"],
required: true
});
composer.emailInput("email", {
question: "What's your email address?",
required: true,
displayCondition: {
dependencies: ["followUp"],
condition: "followUp == 'Yes'"
}
});
const formsmd = new Formsmd(
composer.template,
document.getElementById("survey-container"),
{
saveState: true
}
);
formsmd.init();
Progress indicators
You can show progress as a percentage or fraction:
composer.slide({
pageProgress: "50%"
});
Save user progress: Enable saveState: true when initializing the form to automatically save responses to local storage. Users can return later and continue where they left off.
For surveys, consider using descriptive progress indicators like “2/4” instead of percentages to help users understand how many questions remain.
Customization tips
Adjust rating scales: Use outOf to set different rating scales. Common options are 5 stars for satisfaction and 10 points for NPS.
Add context with descriptions: Use the description parameter to clarify questions or provide instructions like “Select all that apply”.
Keep it short: Surveys with 5-7 questions typically have higher completion rates. Use conditional logic to show additional questions only when relevant.
Next steps
- Learn about all input types including ratings and opinion scales
- Explore theming to customize your survey appearance
- Check the Formsmd API for state management and options