FormTs

Create Smart Forms That
Calculate & Think

The only form builder that combines visual design with TypeScript power. Build dynamic forms with real-time calculations, conditional logic, and complex business rules - with or without code.

Start Building Free See Live Examples

No credit card required • Free forever plan • 5-minute setup

✈️ Dream Travel Planner
Choose your destination and travel style
 
 
 
 
Customize your travel experience
 
 
 
 
 
Review your trip costs
$
 
$
 
 
$
 
$
 
💡 Tip: Select discounts above or travel with 4+ people for group savings!
Enter your details and confirm reservation
 
 
$
 
 
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
export function tripPlannerForm(form: FormTs) {
// Header with branding
form.setTitle(() => '✈️ Dream Travel Planner');
 
// Create pages container
const pages = form.addPages('pages-main', {
heightMode: 'tallest-page'
});
 
// Page 1: Destination & Travel Details
const page1 = pages.addPage('destination');
 
page1.addRow(row => {
row.addTextPanel('header1', {
label: 'Step 1: Destination & Travel Details',
computedValue: () => 'Choose your destination and travel style'
});
});
 
page1.addRow(row => {
row.addDropdown('destination', {
label: 'Destination',
defaultValue: 'paris',
isRequired: true,
options: [
{ id: 'paris', name: '🇫🇷 Paris, France' },
{ id: 'tokyo', name: '🇯🇵 Tokyo, Japan' },
{ id: 'bali', name: '🇮🇩 Bali, Indonesia' },
{ id: 'newyork', name: '🇺🇸 New York, USA' },
{ id: 'dubai', name: '🇦🇪 Dubai, UAE' }
]
});
});
 
page1.addRow(row => {
row.addRadioButton('travelStyle', {
label: 'Travel Style',
defaultValue: 'comfort',
isRequired: true,
orientation: 'horizontal',
options: [
{ id: 'budget', name: '💰 Budget' },
{ id: 'comfort', name: '⭐ Comfort' },
{ id: 'luxury', name: '👑 Luxury' }
]
});
});
 
page1.addRow(row => {
row.addInteger('travelers', {
label: 'Number of Travelers',
min: 1,
max: 20,
defaultValue: 2,
isRequired: true
});
 
row.addDropdown('duration', {
label: 'Trip Duration',
defaultValue: 'week',
isRequired: true,
options: [
{ id: 'weekend', name: '🗓️ Weekend (3 days)' },
{ id: 'week', name: '📅 One Week (7 days)' },
{ id: 'twoweeks', name: '🏖️ Two Weeks (14 days)' }
]
});
});
 
// Page 2: Preferences & Activities
const page2 = pages.addPage('preferences');
 
page2.addRow(row => {
row.addTextPanel('header2', {
label: 'Step 2: Your Preferences',
computedValue: () => 'Customize your travel experience'
});
});
 
page2.addRow(row => {
row.addDropdown('accommodation', {
label: 'Accommodation Type',
defaultValue: 'hotel',
isRequired: true,
options: [
{ id: 'hostel', name: '🛏️ Hostel' },
{ id: 'hotel', name: '🏨 Hotel' },
{ id: 'resort', name: '🏝️ Resort' },
{ id: 'villa', name: '🏡 Private Villa' }
]
});
 
row.addDropdown('mealPlan', {
label: 'Meal Plan',
defaultValue: 'breakfast',
options: [
{ id: 'none', name: '❌ No Meals' },
{ id: 'breakfast', name: '🥐 Breakfast Only' },
{ id: 'halfboard', name: '🍽️ Half Board' },
{ id: 'fullboard', name: '🍴 Full Board' }
]
});
});
 
page2.addRow(row => {
row.addCheckboxList('activities', {
label: 'Activities',
orientation: 'vertical',
defaultValue: ['cultural'],
options: [
{ id: 'adventure', name: '🏄 Adventure Activities' },
{ id: 'cultural', name: '🏛️ Cultural Tours' },
{ id: 'culinary', name: '👨‍🍳 Culinary Experiences' },
{ id: 'wellness', name: '🧘 Spa & Wellness' }
]
});
});
 
page2.addRow(row => {
row.addTextbox('dietary', {
label: 'Dietary Preferences',
placeholder: 'e.g., Vegetarian, Gluten-free'
});
});
 
page2.addRow(row => {
row.addTextbox('specialRequests', {
label: 'Special Requests',
placeholder: 'e.g., Ocean view, Ground floor'
});
});
 
// Page 3: Price Summary
const page3 = pages.addPage('summary');
 
page3.addRow(row => {
row.addTextPanel('header3', {
label: 'Step 3: Trip Summary',
computedValue: () => 'Review your trip costs'
});
});
 
page3.addRow(row => {
row.addMoney('basePrice', {
label: '🏨 Base Package',
currency: '$',
computedValue: () => {
const destPrices = { paris: 800, tokyo: 1200, bali: 600, newyork: 900, dubai: 1100 };
const styleMultiplier = { budget: 0.7, comfort: 1.0, luxury: 1.8 };
const durationDays = { weekend: 3, week: 7, twoweeks: 14 };
 
const dest = page1.dropdown('destination')?.value();
const style = page1.radioButton('travelStyle')?.value();
const duration = page1.dropdown('duration')?.value();
const travelers = page1.integer('travelers')?.value() || 1;
 
if(!dest || !style || !duration)
return 0;
 
const baseRate = (destPrices[dest] || 800) * (styleMultiplier[style] || 1.0);
return baseRate * (durationDays[duration] || 7) * travelers;
}
});
 
row.addMoney('addOns', {
label: '🎭 Activities & Add-ons',
currency: '$',
computedValue: () => {
const activities = page2.checkboxList('activities')?.value() || [];
const travelers = page1.integer('travelers')?.value() || 1;
 
let cost = 0;
if (activities.includes('adventure')) cost += 150 * travelers;
if (activities.includes('cultural')) cost += 100 * travelers;
if (activities.includes('culinary')) cost += 120 * travelers;
if (activities.includes('wellness')) cost += 180 * travelers;
return cost;
}
});
});
 
page3.addRow(row => {
row.addCheckboxList('discountOptions', {
label: '🏷️ Available Discounts',
orientation: 'vertical',
defaultValue: [],
options: [
{ id: 'earlyBird', name: '🐦 Early Bird (60+ days ahead) - Save 10%' },
{ id: 'returning', name: '🔄 Returning Customer - Save 5%' },
{ id: 'referral', name: '👥 Referral Code - Save $50' }
]
});
});
 
page3.addRow(row => {
row.addMoney('discount', {
label: '💸 Total Discounts',
currency: '$',
computedValue: () => {
const duration = page1.dropdown('duration')?.value();
const travelers = page1.integer('travelers')?.value() || 1;
const discountOptions = page3.checkboxList('discountOptions')?.value() || [];
const basePrice = page3.money('basePrice')?.value() || 0;
 
let discount = 0;
if (duration === 'twoweeks') discount += basePrice * 0.15;
if (travelers >= 4) discount += basePrice * 0.10;
if (discountOptions.includes('earlyBird')) discount += basePrice * 0.10;
if (discountOptions.includes('returning')) discount += basePrice * 0.05;
if (discountOptions.includes('referral')) discount += 50;
 
return discount;
}
});
 
row.addMoney('total', {
label: '🌟 Total Price',
currency: '$',
computedValue: () => {
const base = page3.money('basePrice')?.value() || 0;
const addOns = page3.money('addOns')?.value() || 0;
const discount = page3.money('discount')?.value() || 0;
return base + addOns - discount;
}
});
});
 
page3.addRow(row => {
row.addTextPanel('savingsMsg', {
computedValue: () => {
const discount = page3.money('discount')?.value() || 0;
if (discount > 0) {
return `🎉 Amazing! You're saving $${discount.toFixed(2)} on this trip!`;
}
return '💡 Tip: Select discounts above or travel with 4+ people for group savings!';
},
customStyles: {
color: '#1976d2',
fontWeight: '500',
padding: '14px',
background: '#e3f2fd',
borderRadius: '8px'
}
});
});
 
// Page 4: Payment & Booking
const page4 = pages.addPage('booking');
 
page4.addRow(row => {
row.addTextPanel('header4', {
label: 'Step 4: Complete Your Booking',
computedValue: () => 'Enter your details and confirm reservation'
});
});
 
page4.addRow(row => {
row.addTextbox('fullName', {
label: '👤 Full Name',
placeholder: 'John Smith',
isRequired: true
});
 
row.addEmail('email', {
label: '📧 Email Address',
placeholder: 'john@example.com',
isRequired: true
});
});
 
page4.addRow(row => {
row.addRadioButton('payment', {
label: '💰 Payment Option',
defaultValue: 'full',
isRequired: true,
orientation: 'vertical',
options: [
{ id: 'full', name: '✅ Pay in Full - Best Value' },
{ id: 'deposit', name: '🔒 Pay 30% Deposit' },
{ id: 'installments', name: '📆 3 Monthly Installments' }
]
});
});
 
page4.addRow(row => {
 
row.addMoney('amountDue', {
label: '💵 Amount Due Now',
currency: '$',
computedValue: () => {
const total = page3.money('total')?.value() || 0;
const payment = page4.radioButton('payment')?.value();
 
if (payment === 'deposit') return total * 0.3;
if (payment === 'installments') return total / 3;
return total;
}
});
});
 
page4.addRow(row => {
row.addCheckboxList('checks', {
orientation: 'vertical',
options: [{
name: '🛡️ Add Travel Insurance (+$49/person)',
id: 'insurance'
}, {
name: '📜 I agree to Terms & Conditions',
id: 'terms',
isRequired: true
}]
})
});
}
 
150+ Templates

Give Your Customers
Instant Quotes

Browse our gallery of calculator templates for service businesses. Find one that fits your industry and customize it in minutes.

  • Embed on any website with one line of code
  • Fully customizable pricing & branding
  • Convert visitors into qualified leads
Browse All Templates Build with AI

Health & Fitness

Gym, personal training, BMI

Automotive

Car wash, detailing, rental

Freelance

Website cost, logo design

Events

Wedding, catering & more

View all categories

How Does It Work?

FormTs is a code-based form builder. Write TypeScript (or let AI write it for you), see your form update in real-time, then share it with the world.

1

Write Code or Ask AI

Describe your form in TypeScript or plain English. Our AI assistant turns your ideas into working code instantly.

2

See It Live

Watch your form update in real-time as you type. Test calculations, logic, and validation before publishing.

3

Share or Embed

Get a shareable link or embed the form on your website with a simple code snippet. Works everywhere.

Built for Your Industry

See how FormTs powers intelligent forms across different industries. Click any industry to explore a live example.

Financial Services

Loan calculators with amortization schedules, investment ROI forms, insurance quotes with real-time premium calculations.

E-commerce & Retail

Product configurators with dynamic pricing, order forms with shipping calculations, wholesale quote generators.

HR & Operations

Employee onboarding with role-based fields, PTO calculators, expense reports with automatic approvals.

Education & Training

Course registration with prerequisite checking, graded quizzes with instant scoring, student feedback forms with analytics.

Events & Bookings

Event registration with capacity limits, appointment scheduling with availability checks, workshop signups with tiered pricing.

Marketing & Research

Survey forms with branching logic, lead scoring calculators, market research with weighted responses, ROI calculators for campaigns.

Live Form Preview

⏳
Loading form preview...

Why Code? Because AI Changed Everything

You might think "code is for developers." That was true — until AI arrived. Today, code isn't a barrier. It's your superpower.

AI Speaks Code Fluently

AI models are trained on millions of code examples. They understand TypeScript better than any drag-and-drop interface. Just describe what you need — AI writes the code for you.

No-Code Has Limits. Code Doesn't.

Every no-code tool eventually hits a wall. "You can't do that here." With code, there are no walls. Any calculation, any logic, any workflow — if you can describe it, you can build it.

Text Editors Just Work Better

Copy, paste, find & replace, undo, redo — text editing is second nature. No hunting through menus or learning proprietary interfaces. Your keyboard skills finally pay off.

Iterate at the Speed of Thought

Want to change something? Just tell AI. No clicking through menus, no hunting for settings. Describe the change, see it instantly. Code makes iteration effortless.

You're in Control, Forever

Your forms are defined in clean, readable TypeScript. No vendor lock-in, no proprietary formats. You own your logic — copy it, version it, take it anywhere.

Track Every Change

See exactly what changed and when. Roll back mistakes instantly. Compare versions side by side. Code gives you a complete history that no-code tools simply can't match.

Don't fear code. Let AI write it for you.
You bring the ideas. We handle the rest.

Forms That Ask the Right Questions

Stop guessing what to ask. Enable AI Follow-up and let your forms conduct intelligent interviews - automatically generating personalized questions based on each user's previous responses.

1

User fills your form

Start with your base questions

2

AI analyzes answers

Understands context & gaps

3

Smart follow-ups appear

Personalized to their answers

Complete picture

Rich, qualified data

Conversational Experience

Forms feel like a natural dialogue, not a checklist. Users engage more and provide better answers.

Deeper Insights

AI knows when to dig deeper. Get the context and details that static forms miss.

You Set the Rules

Define what information matters. AI follows your instructions and asks relevant follow-ups.

Choose Your Way to Build

Whether you're a developer who loves code or a business user who prefers plain English, FormTs adapts to your workflow.

AI-Powered Builder

Describe your form in plain English. Our AI understands complex requirements and generates the TypeScript code for you - no programming knowledge needed.

  • Natural language to working form
  • Handles complex logic automatically
  • Learn by seeing generated code

TypeScript Code Editor

Write forms using our intuitive TypeScript API with full IntelliSense support. Perfect for developers who want complete control.

  • Full programming flexibility
  • Type-safe with error checking
  • Reusable components & logic

Embed in Seconds

No complex setup. No developer required. Just two simple steps to add a powerful, interactive form to any website.

1Add to your page's <head>
<script type="module" src="https://formts.com/widget.js"></script>
2Place the widget anywhere on your page
<formts-widget link-id="your-form-id"></formts-widget>
Lightweight (~100KB)
Loads async, no page blocking
Consistent look everywhere

Connect to Your Entire Stack

Every form submission triggers instant webhooks. Connect FormTs to thousands of apps and automate your entire workflow.

Form Submission
Instant Webhook
Your Apps

Works seamlessly with

Zapier

Connect to 5,000+ apps without writing code

n8n

Build complex workflows with visual automation

Make (Integromat)

Create powerful scenarios and automations

Custom Webhooks

Send data directly to your API endpoints

Popular Integration Workflows

Email Notifications

Send customized emails via SendGrid, Mailchimp, or Gmail when forms are submitted

CRM Integration

Automatically create leads in Salesforce, HubSpot, or Pipedrive

Spreadsheet Sync

Add rows to Google Sheets, Airtable, or Excel Online instantly

Real-time delivery
Secure HTTPS
Automatic retries
JSON payload

Frequently Asked Questions

Do I need to know how to code?

No! Our AI assistant can build forms from your plain English descriptions. However, knowing TypeScript gives you more control and flexibility.

What makes FormTs different?

FormTs is the only form builder that combines visual design with real programming power. Create forms with complex calculations, dynamic logic, and business rules that other builders can't handle.

What kind of calculations can I create?

Any calculation you can imagine! From simple additions to complex financial formulas, tax calculations, scoring algorithms, and multi-step conditional computations.

How do I embed forms on my website?

It's incredibly easy! Just add our script to your page and place a single HTML tag where you want the form. Works on any website - WordPress, Wix, Shopify, custom sites, or any platform that allows custom HTML.

Ready to Build Smarter Forms?

Join thousands of businesses creating forms that calculate, adapt, and think.

Start Building Free Book a Demo