Creating your first form with Framer

Summary

This tutorial showcases the ease of creating interactive forms in Framer without third-party components. It demonstrates how to add, customize, and style a form, including setting up input types and properties for validation. The guide covers styling techniques for form elements and the submit button, as well as configuring form states and redirection upon submission. Finally, it explains how to send form data via email and includes built-in spam protection, making it a comprehensive guide to form creation in Framer.

Takeaways

• 📝 The new Form Builder in Framer allows for the creation of fully functional interactive forms without the need for third-party components or integrations.
• 🔍 Forms in Framer are not rigid code components but are completely customizable, offering freedom in layout and styling.
• 📑 The top-level frame for the form includes special settings for form submission actions, but is otherwise a regular stack that can be styled and positioned.
• 🏷 Each input within the form is grouped with a label, which has an accessibility tag applied, improving accessibility and SEO.
• 📝 The text box within each label is a regular text box, but it's recommended to keep it in place for accessibility and SEO purposes.
• 🌐 The input layer is special as it includes browser native validation to ensure properly formatted text and can be customized with different types like text, email, number, etc.
• 📝 The input name determines how submitted data is labeled and helps the browser with autofill information if enabled.
• 📚 Forms can include various types of inputs like text, select, checkbox, and radio, each with its own customizable properties.
• 🎨 Styling the form elements is similar to styling any other element in Framer, with nuances like text color for typed text and placeholder text.
• 🔄 Copying and pasting styles from one input to another simplifies the styling process for multiple form elements.
• 🔄 The submit button is a component with built-in hover and press states, and can be styled to reflect the status of the form.
• 📧 Once a form is submitted, the data can be sent via email, webhook, or directly to a Google sheet, with options for redirecting to a thank you page.

Q & A

What is the new form Builder feature in Framer?

The new form Builder is a feature that allows users to create fully functional interactive forms natively in Framer without the need for any third-party components or integrations.

How can you add a form to your Framer project?

To add a form, you can go to the insert menu, scroll down to forms, select the new form Builder, and drag it onto the canvas.

What is the default layout for the form frame in Framer?

The default layout for the form frame in Framer is a vertical stack layout.

What special settings are available for the form frame when a user submits the form?

The form frame has special settings for what happens when a user submits the form, which include actions like sending an email, triggering a webhook, or redirecting to a thank you page, but these are discussed later in the tutorial.

How are the form labels in Framer different from regular frames?

The form labels in Framer are different because they have an accessibility tag called 'label' applied to them, which helps with accessibility, SEO, and makes the text layer within it clickable to focus the matching input element.

What are the four different categories of input elements available in Framer's form Builder?

The four different categories of input elements are text input, select (drop-down menu), checkbox (to toggle options on or off), and radio (to choose a single item from a group).

What is the purpose of browser native validation in the input elements?

Browser native validation ensures that visitors add properly formatted text to the input fields, such as validating the format of an email address or ensuring the text is a number.

How can you customize the input field properties in Framer's form Builder?

You can customize the input field properties by choosing an appropriate type for each input, setting the name of the input, editing the placeholder text, deciding if the field is required, and adding other properties from the plus button.

What is the process of styling the input fields in Framer's form Builder?

Styling the input fields involves adjusting the fill, border, corners, text color, and placeholder text color. It also includes setting effects for when the field is clicked and focused, like adding a fill, border color, and shadow for a glow effect, and adding a transition for smooth focus and defocus states.

How can you apply the same style to multiple input fields in Framer's form Builder?

You can right-click the finished input field, hover over 'Copy', choose 'Copy Style', then Shift-click the other inputs, right-click, hover over 'Paste', and choose 'Paste Style'.

What options are available for handling the submitted data from the form?

The options for handling submitted data include sending it via email, using a webhook to connect with third-party services, or populating data directly to a Google sheet.

What is the purpose of the submit button in Framer's form Builder?

The submit button in Framer's form Builder is used to submit the form data. It comes with built-in hover and press states, as well as variants to reflect the status of the form, such as loading, success, error, and disabled states.

How can you redirect visitors to a specific page after a successful form submission?

You can redirect visitors by selecting the top-level frame for the form, going to the 'Redirect' section in the properties panel, and setting the URL to the desired page, such as a thank you page.

What spam protection measures are included with Framer's form Builder?

Framer's form Builder includes state-of-the-art spam protection that works quietly in the background to prevent unwanted messages from bots and crawlers.