FormTs
For Hair & Beauty Salons

Stop Answering
"How Much for Color?"
Let a Calculator Do It

Free price calculator for your salon or spa website. Clients see instant pricing. You get more bookings. Setup in 5 minutes.

Try Demo Calculator Start Building Free
No credit card required
Free forever for calculators
Works on Wix, WordPress, any site
✂️ Salon Price Calculator
👤 Client Info
 
 
✂️ Services
 
👩‍🎨 Stylist Level
 
💰 Your Quote
$ 0.00
💡 Suggested tip (20%): $0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
export function hairBeautyForm(form: FormTs) {
form.setTitle(() => '✂️ Salon Price Calculator');
 
form.configureCompletionScreen({
type: 'text',
title: () => '💇 Quote Ready!',
message: () => 'Your service estimate is ready. Book your appointment today!'
});
 
const clientSection = form.addSubform('client', {
title: () => '👤 Client Info',
mobileBreakpoint: 0
});
 
clientSection.addRow(row => {
row.addDropdown('clientType', {
label: 'Client Type',
options: [
{ id: 'women', name: 'Women' },
{ id: 'men', name: 'Men' },
{ id: 'child', name: 'Child (12 & under)' }
],
defaultValue: 'women',
isRequired: true
}, '1fr');
 
row.addDropdown('hairLength', {
label: 'Hair Length',
options: [
{ id: 'short', name: 'Short' },
{ id: 'medium', name: 'Medium' },
{ id: 'long', name: 'Long' },
{ id: 'extra-long', name: 'Extra Long' }
],
defaultValue: 'medium'
}, '1fr');
});
 
const servicesSection = form.addSubform('services', {
title: () => '✂️ Services',
mobileBreakpoint: 0
});
 
servicesSection.addRow(row => {
row.addCheckboxList('mainServices', {
label: 'Select Services',
orientation: 'vertical',
options: [
{ id: 'haircut', name: '✂️ Haircut ($25-$65)' },
{ id: 'color', name: '🎨 Color Service ($75-$200)' },
{ id: 'highlights', name: '✨ Highlights/Balayage ($150+)' },
{ id: 'blowout', name: '💨 Blowout/Styling ($45)' },
{ id: 'treatment', name: '💆 Deep Treatment ($35)' }
]
});
});
 
const colorSection = form.addSubform('color', {
title: () => '🎨 Color Details',
isVisible: () => {
const services = servicesSection.checkboxList('mainServices')?.value() || [];
return services.includes('color') || services.includes('highlights');
},
mobileBreakpoint: 0
});
 
colorSection.addRow(row => {
row.addDropdown('colorType', {
label: 'Color Type',
options: [
{ id: 'root-touch', name: 'Root Touch-Up ($75)' },
{ id: 'single', name: 'Single Process ($95)' },
{ id: 'partial', name: 'Partial Highlights ($125)' },
{ id: 'full', name: 'Full Highlights ($175)' },
{ id: 'balayage', name: 'Balayage/Ombre ($200)' }
],
defaultValue: 'single'
}, '1fr');
});
 
colorSection.addRow(row => {
row.addCheckbox('toner', {
label: 'Add Toner (+$35)',
defaultValue: false
}, '1fr');
 
row.addCheckbox('olaplex', {
label: 'Add Olaplex (+$45)',
defaultValue: false
}, '1fr');
});
 
const stylistSection = form.addSubform('stylist', {
title: () => '👩‍🎨 Stylist Level',
mobileBreakpoint: 0
});
 
stylistSection.addRow(row => {
row.addRadioButton('level', {
label: 'Choose Stylist',
options: [
{ id: 'junior', name: 'Junior (-20%)' },
{ id: 'senior', name: 'Senior (Standard)' },
{ id: 'master', name: 'Master (+25%)' }
],
defaultValue: 'senior',
orientation: 'horizontal'
});
});
 
const calculatePrice = () => {
const clientType = clientSection.dropdown('clientType')?.value() || 'women';
const hairLength = clientSection.dropdown('hairLength')?.value() || 'medium';
const services = servicesSection.checkboxList('mainServices')?.value() || [];
const stylistLevel = stylistSection.radioButton('level')?.value() || 'senior';
 
const lengthMult: Record<string, number> = { short: 1, medium: 1.15, long: 1.35, 'extra-long': 1.55 };
const stylistMult: Record<string, number> = { junior: 0.8, senior: 1, master: 1.25 };
 
const lengthMultiplier = lengthMult[hairLength] || 1;
const stylistMultiplier = stylistMult[stylistLevel] || 1;
 
let total = 0;
 
if (services.includes('haircut')) {
const baseCut = clientType === 'women' ? 65 : clientType === 'men' ? 35 : 25;
total += baseCut * lengthMultiplier;
}
 
if (services.includes('color')) {
const colorType = colorSection.dropdown('colorType')?.value() || 'single';
const colorPrices: Record<string, number> = {
'root-touch': 75, single: 95, partial: 125, full: 175, balayage: 200
};
total += (colorPrices[colorType] || 95) * lengthMultiplier;
}
 
if (services.includes('highlights')) {
total += 150 * lengthMultiplier;
}
 
if (services.includes('blowout')) {
total += 45 * lengthMultiplier;
}
 
if (services.includes('treatment')) {
total += 35 * lengthMultiplier;
}
 
total *= stylistMultiplier;
 
if (colorSection.checkbox('toner')?.value()) total += 35;
if (colorSection.checkbox('olaplex')?.value()) total += 45;
 
return Math.round(total);
};
 
const summary = form.addSubform('summary', {
title: () => '💰 Your Quote',
isCollapsible: false
});
 
summary.addRow(row => {
row.addPriceDisplay('total', {
label: 'Estimated Total',
computedValue: () => calculatePrice(),
alignment: 'center',
variant: 'large'
});
});
 
summary.addRow(row => {
row.addTextPanel('tip', {
computedValue: () => {
const total = calculatePrice();
const tip = Math.round(total * 0.2);
return `💡 Suggested tip (20%): $${tip}`;
},
customStyles: {
fontSize: '0.9rem',
color: '#6b7280',
textAlign: 'center'
}
});
});
 
form.configureSubmitButton({
label: () => 'Book Appointment'
});
}
 

Why Salon Owners Love It

Stop playing phone tag. Let clients see your prices and book while they're excited.

Fewer Phone Calls

No more "how much for highlights?" calls. Clients get instant pricing 24/7.

More Bookings

Instant pricing means less friction. Clients book while they're excited about their new look.

Upsell Services

Show add-ons like treatments and styling. Clients add more when they see the options.

No Coding Required

Describe your services. Our AI builds your calculator in minutes.

Add a Price Calculator in 3 Steps

1

Build Your Calculator

Use our AI assistant or pick a template. Set your service prices, stylist levels, and add-ons.

2

Customize Your Look

Match your brand colors and add your logo. Mobile-friendly by default. Looks great everywhere.

3

Embed Anywhere

Copy 2 lines of code. Works on WordPress, Wix, Squarespace, Shopify, or any custom site.

Add to your website
<script src="https://formts.com/widget.js"></script>
<formts-widget link-id="your-calculator"></formts-widget>

Ready-Made Salon Calculator Templates

Don't start from scratch. Pick a template, customize it with your prices, and go live today.

Hair Salon Calculator

Cuts, color, treatments, styling

Use Template

Beauty Spa Services

Facials, waxing, makeup, lashes

Use Template

Nail Salon Pricing

Manicures, pedicures, nail art

Use Template

Laser Hair Removal

Treatment areas, packages, sessions

Use Template

Aesthetic Treatments

Botox, fillers, skin treatments

Use Template
Browse All Beauty Templates

Everything You Need to Automate Pricing

Real-Time Calculations

Prices update instantly as clients select services. No page reloads, no waiting.

Email Notifications

Get notified the moment someone requests a quote. Never miss a potential client.

Stylist Levels

Set different prices for junior, senior, and master stylists automatically.

Hair Length Pricing

Adjust prices based on hair length, texture, and service complexity.

Works Everywhere

Embed on any website with 2 lines of code. WordPress, Wix, Squarespace, custom sites.

Mobile Optimized

Looks great on phones and tablets. Most clients browse on mobile.

Frequently Asked Questions

Do I need to know how to code?

No. Our AI assistant builds the calculator from your description. Just tell it what services you offer and your prices. You can also start from a template and customize it - no coding required.

Will it work on my Wix/WordPress/Squarespace site?

Yes. FormTs works on any website that allows custom HTML. You just paste 2 lines of code where you want the calculator to appear. Works on WordPress, Wix, Squarespace, Shopify, and any custom site.

Is the calculator really free?

Yes. Calculators that don't collect submissions are completely free - no limits, no credit card. If you want to collect client details, the Free plan includes 100 submissions/month. Need more? Pro gives you 1,000/month.

Can I set different prices for different stylists?

Absolutely. You can set price multipliers for junior, senior, master, and creative director levels. The calculator adjusts pricing automatically based on who the client selects.

How do I get notified when someone requests a quote?

All submissions appear in your dashboard instantly. Pro plan includes email notifications and webhooks to connect with Zapier, n8n, Make, or send data directly to your booking system.

Can I adjust prices based on hair length?

Yes! You can set different multipliers for short, medium, long, and extra-long hair. Works great for color services where product usage varies significantly.

Ready to Stop Wasting Time on Pricing Questions?

Join hundreds of salon owners who automated their pricing. Start with a free template or let AI build your custom calculator.

Start Building Free Browse Templates

No credit card required. Free plan available. Setup in under 10 minutes.