Creating your first form with Framer
Summary
TLDRThis 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
📝 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.
🎨 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.
🚀 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.
Mindmap
Keywords
💡Form Builder
💡Interactive Forms
💡Third-Party Components
💡Customizing
💡Accessibility
💡Input Types
💡Placeholder Text
💡Validation
💡Styling
💡Submit Button
💡Webhook
💡SEO
💡Spam Protection
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]
関連動画をさらに表示
How to Create A simple Login Form in HTML - Easy Tutorial
Handling forms | Mastering React: An In-Depth Zero to Hero Video Series
Form Submission + Update An Entry gravity flow form connector
HTML Forms and Inputs | HTML5 Tutorial for Beginners
Learn HTML Forms In 25 Minutes
Email Marketing Automation with FluentCRM
5.0 / 5 (0 votes)