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.

Outlines

00:00

📝 Introduction to Framer's Form Builder

This paragraph introduces the new Form Builder feature in Framer, which allows users to create interactive forms without any third-party components or integrations. The tutorial promises to demonstrate the ease of building, styling, and publishing a form to the web without coding. The process begins with adding a form to the canvas using the insert menu, and customizing it by examining its structure, which includes a frame for the entire form and label frames for each input. The paragraph emphasizes the flexibility of form design in Framer and the special properties of the input elements, such as browser native validation and auto-fill capabilities.

05:02

🎨 Customizing Form Elements and Styles

The second paragraph delves into the customization of form elements and their styles. It explains how to style input fields like text boxes and frames, focusing on text colors, placeholder text, and effects when the field is focused or unfocused. The paragraph also covers adding transitions for smooth visual feedback and the process of copying styles from one input to others for consistency. Additionally, it discusses the styling of the submit button, including hover, press, and error states, and the mapping of form states to these styles. The paragraph concludes with setting up form submission options, such as email notifications and spam protection, and the ability to redirect users post-submission.

10:16

🚀 Finalizing and Publishing the Form

The final paragraph summarizes the steps involved in setting up a custom form using Framer's Form Builder. It outlines the process of deleting unnecessary elements, adding required inputs, setting field properties, adjusting layout and style, and choosing the destination for submitted data. The paragraph encourages users to start creating functional forms for their sites and ends with a brief recap of the tutorial's key points, including the ease of use and the comprehensive features of the Form Builder.

Keywords

💡Form Builder

Form Builder is a tool that allows users to create interactive forms within the design software Framer. It is a key component in the video's theme as it enables the creation of forms without any coding. The script demonstrates how to use the Form Builder to add and customize forms, emphasizing its ease of use and integration within the Framer environment.

💡Interactive Forms

Interactive forms are web elements that allow users to input data, which can be sent to a server or processed in some way. In the context of the video, interactive forms are created natively in Framer, offering a user-friendly way to gather information from website visitors, as shown when the tutorial demonstrates adding and styling a form.

💡Third-Party Components

Third-party components refer to software elements created by entities other than the primary software vendor. The video mentions that the new Form Builder in Framer eliminates the need for these external components for form creation, streamlining the process and ensuring compatibility within the Framer ecosystem.

💡Customizing

Customizing in the video refers to the process of modifying the default settings and appearance of the form elements to fit specific design requirements. The script explains how to customize the form's layout, style, and behavior, such as changing the form's background, text color, and adding special effects when the form fields are focused.

💡Accessibility

Accessibility in the context of the video pertains to making web content usable for people with disabilities. The script highlights the importance of using 'label' tags for form inputs to improve accessibility and SEO, as well as ensuring that the form elements are easily navigable and understandable for all users.

💡Input Types

Input types define the kind of data that can be entered into a form field. The video explains different input types such as 'text', 'textarea', 'email', 'number', 'phone', 'URL', 'date', and 'time', which are used to validate and format the input data accordingly, ensuring that the form collects the correct information in the desired format.

💡Placeholder Text

Placeholder text is a hint within a form field that describes the expected value of the input. In the script, the tutorial shows how to edit the placeholder text to guide users on what to type in the form fields, enhancing user experience by providing clear instructions.

💡Validation

Validation in the video refers to the process of checking that the input from users conforms to certain rules or formats. The script discusses browser native validation for form inputs, which ensures that the data entered is properly formatted, such as an email address or a phone number.

💡Styling

Styling in the context of the video is about applying visual designs to the form elements to match the website's aesthetic. The tutorial demonstrates how to style the form, including changing background colors, adding gradients, rounding corners, and adjusting text colors and effects for different states like focus and hover.

💡Submit Button

The submit button is a crucial part of any form, used to send the entered data for processing. The video script describes how to style and configure the submit button, including setting up different states like hover, press, loading, and error, to provide feedback to the user during form submission.

💡Webhook

A webhook is a way for an app to provide other applications with real-time information. In the video, it is mentioned as one of the options for where the submitted form data can be sent, allowing for integration with third-party services and automating processes based on form submissions.

💡SEO

SEO stands for Search Engine Optimization, which is the process of improving the visibility of a website in search engine results. The script points out the use of 'label' tags in form inputs to aid with SEO, as they help search engines understand the content and context of the form fields.

💡Spam Protection

Spam protection in the video refers to the built-in mechanisms to prevent unwanted form submissions from bots and crawlers. The script mentions that the form comes with state-of-the-art spam protection to ensure that only legitimate form submissions are received.

Highlights

Introduction of the new form Builder in Framer, allowing for fully functional interactive forms without third-party components.

Demonstration of building a form, styling it, and publishing it to the web without coding.

Explanation of the form's anatomy and customization capabilities in Framer.

The form's layout flexibility and styling options, including padding, borders, and shadows.

Use of label frames for accessibility and SEO, and their special clickable text layer feature.

Description of the input layer's properties and browser native validation for proper text formatting.

Different input types available, such as text, select, checkbox, and radio, each with customizable properties.

How to set input names for data labeling and autofill functionality.

Adding and customizing additional text inputs and textareas for form messages.

Inclusion of a checkbox input for newsletter opt-ins and deletion of unnecessary form fields.

Styling the form frame with gradient fills and corner rounding for aesthetic appeal.

Customizing input field styles, including text color, placeholder color, and background effects.

Adding interactive effects like glow and transition for focused input fields.

Copying and pasting styles to streamline the styling process for multiple form elements.

Customization of the submit button with hover, press, and loading states.

Mapping form states to button variants for a cohesive user experience.

Redirection options post form submission, such as to a thank you page.

Setting up data submission destinations, including email, webhook, or Google Sheets.

Implementation of spam protection to prevent unwanted form submissions.

Final steps for publishing the form and testing its functionality.

Transcripts

the new form Builder brings fully

functional interactive forms natively to

framer without the need for any

third-party components or Integrations

in this tutorial I'll show you just how

easy it is to build a form style it and

publish it to the web without writing a

single line of

code to add a form we can head to the

insert menu go down to forms grab the

new form Builder and drag it onto the

canvas

boom we've got a default form to start

customizing let's take a look at the

anatomy of this thing one of the coolest

things about forms and framer is that

they aren't some rigid code component

they're completely free form no pun

intended which means you can lay them

out and style them with complete Freedom

at the top level we get a frame for the

entire form which comes with a vertical

stack layout applied by default which

makes a lot of sense this Frame also has

a few special settings for what happens

when a vis submits the form which we'll

talk about later on but besides that

this is a regular stack that we can

resize or reposition change the Gap

padding or even add fills borders and

shadows but we'll style this a little

bit later on within the parent frame for

the form we have a set of frames each

called label that group each input with

a text box again these labels are just

regular frames but you can probably tell

by the icon on the layer list that these

are a little bit special

the icon comes from the fact that in the

accessibility section of the properties

panel this frame has a tag called label

applied to it in addition to helping

with accessibility and SEO this label

element is also what makes the text

layer within it clickable to focus the

matching input element on that note

within each label frame we have a text

box and the input itself want to know

what's special about this text box

nothing it's just a text box do what you

want with it but I do recommend keeping

it where it is for the sake of

accessibility and SEO just know it's a

regular text box the input layer is

where the magic happens it also works a

lot like a regular frame but this is the

most special element we've looked at so

far before we dig into its properties

the first thing to know is that this is

one of four different categories of

input this happens to be a text input

but there's also select which is a drop-

down menu of options we set checkbox to

toggle one or multiple options on or off

and radio to choose a single item from a

group of options each category of input

has its own properties you can customize

but let's get back to this text input

because there's more to it than meets

the eye these inputs actually have

browser native validation to make sure

visitors add properly formatted text we

can tell the browser what to expect by

choosing an appropriate type for each

input we can choose between text for a

single line of text like a name text

area for multiple lines or even

paragraphs of text email which will

validate the format of an email address

and prompt mobile browsers to adjust the

keyboard number which validates that the

text is a number and prompts mobile

browsers to switch to a keyboard with

number Keys phone which will switch

mobile browsers to a phone keypad much

easier to type on URL which also prompts

mobile browsers to adjust the keyboard

date which will provide the browser's

native date picker and time which will

provide the browser's native time picker

I'll keep this first option set to text

for visitors to type their own name next

we have the name of the input which

determines how the submitted data should

be labeled when we receive it but before

you start making up crazy words because

you think you're the only one that will

see it the name of the input also helps

the browser figure out what info should

autofill if it's enabled we can also

edit the placeholder text that appears

before a visitors typed anything decide

if this field is required and add quite

a few other properties from the plus

button for our purposes we're going to

want a couple more inputs so I'll select

the frame for the entire form and click

the blue plus button at the bottom I'll

choose to add another text input this

one will be to write the body of the

message so let's change the text in this

little text box to say

message then we got to change the input

type to text

area change the name to

message and for the placeholder text

I'll just put hey

great another form field ready to go

let's go ahead and add one last input a

checkbox to allow folks to opt into

receiving our newsletter and what do you

know the default text is exactly what we

needed what are the odds of that while

we're at it we don't need this location

input so I'll grab that whole label

frame and press delete looking good now

we're ready to start playing around with

the style of things let's start with the

frame for the entire form I'm going to

give it a fill and create a super subtle

gradient from 8% gray to 6% gray next

I'll round these Corners to a radius of

about 20 cool now on to the input Fields

themselves the key takeaway here is that

you style these just like you'd style

anything else it's really just a hybrid

of a text box and a frame with a couple

small nuances one of which is that we

have two different text colors the first

is for the text that a visitor actually

types which I'll change to White so it

stands out and the second is the color

of the placeholder text which I'll keep

diminished slightly with a 60% gray I'll

also remove the

border and set the fill to white at a

super low

opacity that's pretty much what I'm

going for for when this field is

unfocused but we can also change the

effect of how the field looks when it's

clicked on and focused I'll click effect

and start by adding a fill that's super

dark blue

then tweak the Border color slightly to

match that same Hue of

blue then get a little crazy by adding a

shadow to create a little glow around

the

field I'll choose My Brightest

blue set the X and Y to zero to keep the

glow centered crank the blur way up to

30 and knock the spread down to -10

there we go nice soft subtle glow the

last thing is adding a transition so

this glow can come in smoothly the

defaults are fine let's preview

it awesome we get the border and the

Beautiful glow fading in on focus and

fading away when we click away you can

get even more crazy with focus and

defocus states and interactions by

turning inputs into components but we'll

save all that for a different tutorial

so we've got the style of our first

input dialed in do we really want to do

it over again for these other two I

don't think so we you can right click

the finished one hover over copy and

choose copy style then shift click the

other

inputs right click hover over paste and

choose paste style done deal let's give

it a

preview

beautiful the last piece of the form is

the submit button which is already a

component right out of the box which we

can press enter to go in and edit within

the component you'll find Hover and

press States as well as VAR variants to

reflect the status of the form you can

Le these Styles as they are or style

them however you'd like I'll give the

primary variant a blue fill which

Cascades down to the other variants

except the hover and press States since

those already have a color override I'll

make hover a darker

blue and the Press State the darkest

blue cool the loading State already has

this sweet little animated spinner I'm

going to leave these alone and head down

to the error state

I'll change the fill to a nice solid

red and fix this text contrast by

changing it to a super light

pink there we go I'm happy with how each

of these looks let's head back to the

homepage if we scroll down the

properties for the submit button

component you'll see it has a special

section where we can map each state of

the form to one of the variants we were

just looking at by default loading and

success are already here and already

mapped and from the plus button you can

choose to add error and disabled States

and map them to the appropriate variant

on the topic of a successfully submitted

form we also have the option to redirect

the visitor to a specific page like a

thank you page let's select the top

level frame for this form head down to

redirect in the properties panel and in

my case I do have a little thank you

page to let visitors know that we'll get

back to them within 48 hours but we're

missing one crucial step deciding where

the submitted data actually goes with

the form frame still selected we get

three choices for where the submitted

data can be sent we can either pick one

or combine several we can choose email

which will send each submission directly

to our inbox web hook to connect with

third party services or populate data

directly to a Google sheet for my

purposes I'll keep it simple and choose

email then choose a name to display for

the sender

set the subject line for these

submissions and even add some body copy

with additional context simple as that

now each time the form gets submitted

we'll receive an email with all the info

forms also come with state-of-the-art

Spam protection that works its magic

quietly in the background behind the

scenes preventing unwanted messages from

Bots and crawlers let's publish and test

it out

publishing done open in the

browser Joseph

Josephs framer

docomo let's recap what goes into

setting up a custom form drop in the

form Builder delete what you don't need

add the inputs you do need set your

Field properties on the inspector adjust

the layout and style in to your liking

and choose where to send the data that's

it now head to framer and start creating

beautiful functional forms for your site

[Music]