Custom Forms in Framer

With Typer, you can design form fields directly on the Canvas, allowing you to choose any layout and aesthetic for your form.

Insert

Layout

Text

CMS

Actions

Publish

Pages

Layers

Assets

Empty

Primary

Label

Placeholder

Required

Error

Typer

Filled

Variant

Label

Placeholder

Required

Error

Typer

Error

Variant

Label

Placeholder

Required

Error

Typer

Home

Email Textfield

John

Empty

・Primary

E-mail

Required

Filled

E-mail

victorien@typer.framer.website

Error

E-mail

victorien@typer.framer.website

The email is mistyped

Position

Type

Relative

Size

Width

1fr

Fill

Height

Auto

Fit

Effect

Styles

Transition

Instant

Opacity

1

100001

Visible

Yes

No

Rotation

Text

Node

Random

Tag

p

Placeholder

A

Placeholder

Abhaya LIbre

Color

#4D4C48

Size

16

16

Letter

0

-

+

Line

1.2

-

+

Paragraph

0

-

+

Align

-

-

Transform

None

Decoration

Aa

Aa

Aa

Insert

Layout

Text

CMS

Actions

Publish

Pages

Layers

Assets

Empty

Primary

Label

Placeholder

Required

Error

Typer

Filled

Variant

Label

Placeholder

Required

Error

Typer

Error

Variant

Label

Placeholder

Required

Error

Typer

Home

Email Textfield

John

Empty

・Primary

E-mail

Required

Filled

E-mail

victorien@typer.framer.website

Error

E-mail

victorien@typer.framer.website

The email is mistyped

Insert

Layout

Text

CMS

Actions

Publish

Home

Email Textfield

John

Empty

・Primary

E-mail

Required

Filled

E-mail

victorien@typer.framer.website

Error

E-mail

victorien@typer.framer.website

The email is mistyped

What sets Typer apart?

Typer relies on Event Handlers that trigger component transitions when certain user interactions take place. It lets you free to choose the aesthetics you want.

Meet the Event Handlers

They are the core of Typer. These simple blocs trigger transitions based on type events, form events or selection events.

Typer

Interaction

On

Empty

Full

Valid

Invalid

Required

Focusing

Filling

Validating

Invalidating

Requiring

Toggler

Selecter

Submitter

Label

Highly Cuztomise Variants

Design all forms and fields states directly on the Canvas. Fields and forms are 100% customisable.

Label

Nicolas

Label

Unfocs

・Primary

Label

Placeholder

Laura

Placeholder

Focus

Label

Value

Filled

Label

Placeholder

Error

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 service.

Add Transitions

Add transition as you do as usual with any design component.

Name

John Doe

Transition

Instant

Ease

Spring

Ease

Ease In Out

Bezier

0.44, 0, 0.56, 1

Visible

0.3

no

Delay

0

Use format validation

You can set a custom format validation or pick one from the list.

E-mail

victorien.net

Typer

Format

Email

Regex

None

Email

Custom

Components Store

Whatever options you choose, all components are fully customizable.

All-in-one
bundle

All of Typer's components are in this bundle. With it, you can build all form parts, including text fields, checkboxes, radio buttons, drop-down lists and sliders. See what's included →

All form components

Unlimited forms & sites

Lifetime access

Textarea

Textfield

100

Textfield

Textfield

Other

Button

Textfield

Dropdown

Toggle

Textarea

Textfield

100

Textfield

Textfield

Other

Button

Textfield

Dropdown

Toggle

$59

VAT included

Tailored
Forms

from

$320

Do you have a project with an advanced form? Using our expertise from Typer, we code and design tailored forms that perfectly fit your needs.

Connect Typer to any form solution

Reusable and customizable form

Ready-to-use solution

All about
Texfield

$28

VAT Included

This bundle provides the Submitter and the Typer components, allowing you to build text-oriented forms. See what's included →

All text fields components

Unlimited forms & sites

Lifetime access

Buillt for Framer

Admire the work?

Contribute to enhance the project progression

Buy me a coffee

You have a question?

Feel free to reach out and ask what you have in mind.

Contact form