< Back

Forms

figma.to.website will automatically detect your forms created in Figma when the frames are laid-out with the specific input field names described below. You can style the forms completely to your liking.

Embedded forms

If you don’t need full control over your form design, and you just want to embed pre-built forms into your page, you can use figma.to.website’s HTML embedding capability.

This gives you the ability to embed forms designed on TypeForm, Tally, Mailchimp, Brevo and other form builders.

Input fields

Create a frame and name it as an HTML <input>:

`id` = Identification of the input (useful for <label>, see below).
`name` = Name of the field. Will be used when sending data to the server.
`type` = Type of input field. Can be any type of input as defined in HTML.

`type` can be one of the following values:

"text"
"color"
"checkbox"
"date"
"datetime-local
"email"
"file"
"month"
"number"
"password"
"radio"
"range"
"tel"
"time"
"url"
"week"

There are more attributes that you can use like `disabled`, `pattern`, `min`, `max`, etc... Please check the full HTML <input> element documentation for an exhaustive list of possibilities.

Labels

Labels help to describe the input field for both accessibility and better UX. Labels are optional but highly recommended.

Take a text node in Figma and name it as an HTML <label>:

`for` = Id of the input that label describes.

See the HTML <label> element documentation for more details.

Submit button

The submit button is what triggers the validation of the form and sends the data to the backend form service.

Take a frame in Figma and name it as an HTML <button>:

See the HTML <button> element documentation for more details.

Top frame for the form

All inputs, labels and submit buttons must be grouped into a top frame named as an HTML <form>:

<form>

Example

Demo Inspect in Figma and on the web

Let’s work together

This is how this demo is structured in Figma layers:

<label> and <input> are framed together for convenience only.

Collect submissions

When a visitor clicks the <button> with type=”submit”, all data input in the fields is collected and sent to figma.to.website as a submission.

You can see all submissions in your website’s dashboard: https://to.website/dashboard

FREE and LEVEL 1 websites can collect up to 30 submissions per month.
LEVEL 2 websites can collect up to 300 submissions per month.
LEVEL 3 websites can collect up to 3000 submissions per month.

If you need more than 3000 submissions per month, please contact us.

We always collect submissions even if they exceed your monthly limits. You can upgrade your website to the next level to get access to the full list of submissions.