Creating your first form with Framer

Adding a Form in Framer

To add a form, we head to the insert menu, go down to forms, grab the new form builder, and drag it onto the canvas. We've got a default form to start customizing.

Understanding the Form's Structure

At the top level, we get a frame for the entire form, which comes with a vertical stack layout by default. This frame has special settings for what happens when a visitor submits the form. We can resize or reposition the stack, change the gap, padding, or even add fills, borders, and shadows.

Customizing Labels and Inputs

Within the parent frame for the form, we have a set of frames called labels that group each input with a text box. These labels are regular frames with a special tag called label applied in the accessibility section of the properties panel. This helps with accessibility and SEO and makes the text layer within it clickable to focus the matching input element.

Exploring Input Elements

Each label frame contains a text box and the input itself. The input layer is where the magic happens, working a lot like a regular frame but with more specific properties. There are four categories of input: text input, select (dropdown menu), checkbox, and radio button. Each category has its own customizable properties.

Setting Input Types

We can choose different input types for text inputs, such as text for a single line, text area for multiple lines, email for email addresses, number for numerical input, phone for phone numbers, URL for web addresses, date for date pickers, and time for time pickers. For instance, we'll set the first input to text for visitors to type their name.

Customizing Additional Input Properties

The name of the input helps with autofill if enabled. We can edit placeholder text, decide if a field is required, and add other properties using the plus button. For example, we'll add another text input for the message body, change the text box to say message, set the input type to text area, and update the name and placeholder text accordingly.

Adding and Removing Inputs

To add more inputs, select the frame for the entire form and click the blue plus button. We can add a checkbox for newsletter sign-ups and remove unnecessary inputs like a location field by deleting the respective label frame.

Styling the Form

We can start by styling the frame for the entire form, adding a fill with a subtle gradient, and rounding the corners to a radius of about 20. For input fields, we can style them as we would any other element, adjusting text colors, border styles, and fills.

Customizing Focus States

We can also change how input fields look when focused. For instance, adding a dark blue fill, tweaking the border color, and adding a subtle glow effect using shadows. Adding a transition ensures smooth focus and defocus effects.

Copying Styles

To avoid redoing styles for each input, we can copy the style from a finished input and paste it onto other inputs. This ensures consistency across all input fields.

Editing the Submit Button

The submit button is a component with hover and press states as well as variants to reflect the form's status. We can style these states, such as making the primary variant blue, hover darker blue, and press the darkest blue. The loading state can have an animated spinner, and the error state can be styled with a red fill and contrasting text.

Setting Form Actions

In the properties for the submit button, we can map each form state to a corresponding variant. For a successfully submitted form, we can redirect visitors to a specific page like a thank you page by setting the redirect option in the form's properties panel.

Choosing Data Destination

We can choose where the submitted data goes: email, webhook, or Google Sheet. For simplicity, we'll choose email, set the sender name, subject line, and body copy. Forms also include built-in spam protection.

Publishing the Form

Once all settings and styles are in place, we can publish the form and test it in the browser. This ensures everything works correctly and the form is ready for use.