Prefabs

Getting Started

Prefabs

Utilities

Feedback

Donate

Prefabs

Getting Started

Utilities

Feedback

Github

Donate

Getting Started

Prefabs

Utilities

Form Example

This form example does nothing, but demonstrates how framer prefabs can let you design your components how you want

*

Form Example

This form example does nothing, but demonstrates how framer prefabs can let you design your components how you want

*

v1.0

Form

Form prefab is native html form tag that connects all prefabs together into a form.

Github

Github

Why use this prefab?

Framer lacks native support for creating form elements directly. However, this prefab enables the ability to associated controls and input elements to a form using HTML form attribute. It manages form actions like submit and reset, and communicates events to components for styling updates and validation.

Why use this prefab?

Framer lacks native support for creating form elements directly. However, this prefab enables the ability to associated controls and input elements to a form using HTML form attribute. It manages form actions like submit and reset, and communicates events to components for styling updates and validation.

Why use this prefab?

Framer lacks native support for creating form elements directly. However, this prefab enables the ability to associated controls and input elements to a form using HTML form attribute. It manages form actions like submit and reset, and communicates events to components for styling updates and validation.

Features

Features

Features

Create and connect your own custom prefab inputs into a single form.

Sends a custom event on submission allowing for other use cases.

Can send to FormSpark, FormSpree or a custom Endpoint.

Endpoints

Currently this form prefab only works for api end points (URL) that do not require any authentication or custom javascript. Mailchimp, Hubspot and others may need additional adjustments. Please reach out if you are interested in having that work for your use case.

Endpoints

Currently this form prefab only works for api end points (URL) that do not require any authentication or custom javascript. Mailchimp, Hubspot and others may need additional adjustments. Please reach out if you are interested in having that work for your use case.

Endpoints

Currently this form prefab only works for api end points (URL) that do not require any authentication or custom javascript. Mailchimp, Hubspot and others may need additional adjustments. Please reach out if you are interested in having that work for your use case.

How to use

How to use

How to use

Create a framer component: Using framer create a component that will use this prefab.

Add prefab: Add the prefab to the component and connect the transitions to the matching variants states.

Nest prefab: Nest the prefab to the parent frame.

Add any prefab controls: You can now build your form by adding and associating prefabs you have made by matching the form id set in the form prefab.

Test: Test the component in preview and ensure that your transitions are working and if your end point successfully sends the information.

Done: That is it! You are all set to use this prefab.

Accessbility considerations

Accessbility considerations

Accessbility considerations

When creating the component that will be used with this prefab consider the following:

When creating a form consider clear and concise feedback. If you have any validation consider adding a text or label to help the user verify on how to correct.

All inputs within a form should have a pairing label. Avoid using vague inputs.

If you are making a form component be sure to set the tabIndex=-1 as framer auto sets all components to 0 creating unnecessary focus when navigating via keyboard.

Properties

Properties

Properties

Property

Default

Description

ID

String

The value that will populate the html id attribute.

Service

Enum

Send to any FormSpark, FormSpree, Custom end point.

Action

String

Url endpoint to send the POST request.

Rest After

Boolean

The form will reset automatically to the default variant after a submission is made.

Timeout

Number

Resets the form after X amount of seconds.

Events

Interactions

Supported events: Default, Sending, Success, Error