![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M 17.5 0 C 19.433 0 21 1.567 21 3.5 C 21 5.085 19.946 6.424 18.501 6.855 L 18.501 14.145 C 19.946 14.576 21 15.915 21 17.5 C 21 19.433 19.433 21 17.5 21 C 15.915 21 14.576 19.946 14.145 18.501 L 6.855 18.501 C 6.424 19.946 5.085 21 3.5 21 C 1.567 21 0 19.433 0 17.5 C 0 15.914 1.054 14.575 2.5 14.145 L 2.5 6.855 C 1.054 6.425 0 5.086 0 3.5 C 0 1.567 1.567 0 3.5 0 C 5.086 0 6.425 1.054 6.855 2.5 L 14.145 2.5 C 14.575 1.054 15.914 0 17.5 0 Z M 17.5 16 C 16.672 16 16 16.672 16 17.5 C 16 18.328 16.672 19 17.5 19 C 18.328 19 19 18.328 19 17.5 C 19 16.672 18.328 16 17.5 16 Z M 3.5 16 C 2.672 16 2 16.672 2 17.5 C 2 18.328 2.672 19 3.5 19 C 4.328 19 5 18.328 5 17.5 C 5 16.672 4.328 16 3.5 16 Z M 14.145 4.501 L 6.855 4.501 C 6.519 5.629 5.629 6.519 4.501 6.855 L 4.501 14.145 C 5.629 14.481 6.519 15.371 6.855 16.5 L 14.145 16.5 C 14.481 15.371 15.371 14.481 16.5 14.145 L 16.5 6.855 C 15.371 6.519 14.481 5.629 14.145 4.501 Z M 3.5 2 C 2.672 2 2 2.672 2 3.5 C 2 4.328 2.672 5 3.5 5 C 4.328 5 5 4.328 5 3.5 C 5 2.672 4.328 2 3.5 2 Z M 17.5 2 C 16.672 2 16 2.672 16 3.5 C 16 4.328 16.672 5 17.5 5 C 18.328 5 19 4.328 19 3.5 C 19 2.672 18.328 2 17.5 2 Z" fill="rgb(137, 87, 254)" height="21px" id="fBxEEsIjc" transform="translate(7.5 7.5)" width="21px"/><path d="M 1 8 C 0.448 8 0 7.552 0 7 L 0 1 C 0 0.448 0.448 0 1 0 L 1 0 C 1.552 0 2 0.448 2 1 L 2 7 C 2 7.552 1.552 8 1 8 Z" fill="rgb(235, 233, 240)" height="8px" id="G3_oFqgM1" transform="translate(14 14)" width="2px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><path d="M 17.5 0 C 19.433 0 21 1.567 21 3.5 C 21 5.085 19.946 6.424 18.501 6.855 L 18.501 14.145 C 19.946 14.576 21 15.915 21 17.5 C 21 19.433 19.433 21 17.5 21 C 15.915 21 14.576 19.946 14.145 18.501 L 6.855 18.501 C 6.424 19.946 5.085 21 3.5 21 C 1.567 21 0 19.433 0 17.5 C 0 15.914 1.054 14.575 2.5 14.145 L 2.5 6.855 C 1.054 6.425 0 5.086 0 3.5 C 0 1.567 1.567 0 3.5 0 C 5.086 0 6.425 1.054 6.855 2.5 L 14.145 2.5 C 14.575 1.054 15.914 0 17.5 0 Z M 17.5 16 C 16.672 16 16 16.672 16 17.5 C 16 18.328 16.672 19 17.5 19 C 18.328 19 19 18.328 19 17.5 C 19 16.672 18.328 16 17.5 16 Z M 3.5 16 C 2.672 16 2 16.672 2 17.5 C 2 18.328 2.672 19 3.5 19 C 4.328 19 5 18.328 5 17.5 C 5 16.672 4.328 16 3.5 16 Z M 14.145 4.501 L 6.855 4.501 C 6.519 5.629 5.629 6.519 4.501 6.855 L 4.501 14.145 C 5.629 14.481 6.519 15.371 6.855 16.5 L 14.145 16.5 C 14.481 15.371 15.371 14.481 16.5 14.145 L 16.5 6.855 C 15.371 6.519 14.481 5.629 14.145 4.501 Z M 3.5 2 C 2.672 2 2 2.672 2 3.5 C 2 4.328 2.672 5 3.5 5 C 4.328 5 5 4.328 5 3.5 C 5 2.672 4.328 2 3.5 2 Z M 17.5 2 C 16.672 2 16 2.672 16 3.5 C 16 4.328 16.672 5 17.5 5 C 18.328 5 19 4.328 19 3.5 C 19 2.672 18.328 2 17.5 2 Z" fill="rgb(137, 87, 254)" height="21px" id="bfssgG99y" transform="translate(7.5 7.5)" width="21px"/><path d="M 1 8 C 0.448 8 0 7.552 0 7 L 0 1 C 0 0.448 0.448 0 1 0 L 1 0 C 1.552 0 2 0.448 2 1 L 2 7 C 2 7.552 1.552 8 1 8 Z" fill="rgb(4, 3, 6)" height="8px" id="Y8eAQfYa3" transform="translate(14 14)" width="2px"/></svg>)
Built with Typer
Build advanced custom forms in Framer.
Design multipage forms, calculators and quizzes with advanced logic and beautiful effects directly on your canvas.
Highly customisable
Design on the canvas, apply transitions, add custom interactions and even customise dropdowns at their fullest. Typer is fully customisable!
Design on the canvas
Design fields on the canvas for full control over styles.
0
5
10
15
20
25
30
Unfocus
・Primary
Label
Focus
Laura
Label
Value
David
Filled
Label
Value
Invalid
Apply transitions
Add transitions as you would with any other layer.
Title
Name
Surname
Add interactions
12/23/24
On
Invalid
Make dropdowns your own
Edit dropdowns on the Canvas for full control over styles.
Select
🏳️
🇦🇫
Afghanistan
🇦🇱
Albania
🇩🇿
Algeria
Powerfull Logics
Typer works with native forms and independently. Send the data to any URL, reuse values as variables and ensure they follow a specific format.
Use format validation
You can set a custom format validation or pick one from the list.
Label
john@doe.com
Format
Send the form to any URL
Send the form to any URL you want. You can use services like Mailchimp or Formspark. Or send it to your own endpoint.
Compatible with native forms
Use Typer independently or within the native forms.
Name
Value
Nicolas
Submit
Form
Title
Surname
Phone
Stack
Use values as variables
Use math formulas to display statistics.
80%
Product
Annual
Growth
Start
Interest
40k
Unlock Framer possibilities
Now, with Typer, you can create websites that ask complex forms, including multipage forms, surveys, quizzes and calculators.
Calculators
Now, with Noder, you can create websites that include randomness, math calculations or calculators without requiring development. See the use cases below.
Insert
Layout
Text
CMS
Actions
Publish
Quizzes
Now, with Noder, you can create websites that include randomness, math calculations or calculators without requiring development. See the use cases below.
Insert
Layout
Text
CMS
Actions
Publish
A Component for every possibility
Each component has a specific function and works with the others. They can be combined in various ways, creating endless possibilities.
Time
Pick a time.
Copy
Radio Button
Select one option.
Copy
URL
Enter web address
Copy
Hidden
Submit hidden value.
Copy
Enter an email.
Copy
Select
Choose from a list.
Copy
Text
Enter free-form text
Copy
Color
Pick a color.
Copy
Checkbox
Check multiple options.
Copy
Number
Enter a numeric value
Copy
Slider
Slide to set value.
Copy
Date
Pick a date.
Copy
Pay only when you publish.
Typer is free to use on Framer. Try Typer and build your project for free, and pay when you're ready.
Frequently asked questions
We compiled a list of answers to address your most pressing questions regarding Typer. If you don't find your answer here, feel free to contact us.
Is Typer compatible with the Framer forms?
Yes, Typer can be used either independently or alongside the native forms, by placing the Typer components inside the form's frame. For example, this would be useful if you needed a slider but still wanted to submit through the native form.
What do you mean by 'Base Domain' and 'Custom Domain' ?
Can the licence be reused from one project to another?
What is your refund policy?
Remix the Starter Kit
Open the Starter Kit and explore Typer by yourself. Tweak the component, see how fast you can build — no sign up, no commitment!