On this Webflow lesson we take a look at our sign up form. How to setup a simple sign up form in Webflow and how to customize the different Webflow form states.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
all right great we made it to the final
section of
our landing page the sign up
we wanted to create a one single click
sign up form to have users log in
and access their account but with
webflow's limitation we can't really do
that
so what i want to do is i'm going to
transform the sign up
using the same style indesign but
instead i'm just going to use it for our
newsletter sign
up so you sign up you have full name and
your email address and then you can just
create
and sign up in the next course i'll be
able to teach you how to create
a sign up with a single click all right
so let's jump in the first thing i want
to do is have this container
so i want to export this as a background
image because
it is using the nice patterns that we
have created
i see here we have some logos that we
have already used in the front
so over in the top we have used that
those same logos we can just copy
those over we also have created styles
for these 3d elements we can bring those
back again
and simply just create a combo class and
just reposition them so that they
actually are on top of this container
and i can see here we have a nice title
with a leading title
and let's jump in and start adding those
content elements
so on the sign up page the first thing i
want to do is create our container
we have a container and we want to
center the sign up inside this container
worry about this section first like the
actual
box here we have this form fields about
400 pixels
so i think the max width of that
container will probably be
about 400 pixels so if we were to create
a utility we have already created one
for 500
we can create a utility for for 400 so
400
max width and we can just set it up here
400
pixels we're gonna create this paragraph
and we're gonna just swap out the naming
so this one we have
all right and then the next thing is
we're gonna add a form because
unfortunately we are not able to add
form fields input fields without
creating a form tag
first and this is the form block that is
required
in order for us to start using some of
these form elements that
webflow provides so let's just add in
that form block and right away it gives
us kind of a template
um i generally like to keep this simple
i don't need these labels
outside these labels can be actually
placed inside the text field so let's
do that if i select the settings of that
text field there's a
uh a field called placeholder to
describe what it is that this field
represents so i'm going to just put in
here full name
it also gives us that submit button and
let's not worry about this just yet
let's just worry about the structure
so let's say these text fields i want to
start styling them
i'm going to add a class called input
field
this input field is going to stretch out
it's going to be about 100 percent
and i want it to be at 400 pixels
so that's the max of our actual
container so that
the max container we just created all
right so some of the classes that we can
see here
from the design is that they have a
rounded 15 pixel
border radius and some shadows and we
have the nice
create account button so this one
actually we already
have a class 4 which is primary
and then this one's is input field
all right and we might want to give some
spacing between this paragraph
and the form that we created so we can
use our utility
of 32 that looks about right
so these logos let's bring those logos
down to the very bottom
we just select section and drop that in
the problem is that they're going to be
aligning two relative
to the cinema in that case we need to
make this section
to be relative also so right now it's
not relative
in fact all of our sections are not
using the relative
so what i'd like to do because a lot of
these sections do require some of the
floating elements let's just turn that
into a relative and
hopefully nothing breaks all right this
is looking good now let's
go ahead and create that box or
container
that we see on the design this i've
already exported
it's about 940 so that matches the size
and 525
so what we could do is just create a
simple div block
and i'm gonna call this the sign up box
i'm gonna make it a hundred percent so
that it's responsive
but the max width is going to be 940
pixels
and the minimum height in this case is
going to be 525
so we can see this box starting to look
starting to push things down
we're going to move the max inside the
sign up box
like that and we're gonna make the sign
up box have a background image
and we can actually make this sign
up utilize the flex layout so we can
center this container
vertically
great this looks good so let's check
this out
all right sign up enjoy everything we
have the full name the email address and
a button
we can have these 3di elements floating
on the sides
and there we go so we have now created
all of our sections in webflow and
these form fields i want to have some
drop shadows
so let's add those box shadows in here
in the effects panel
let's actually change this to subscribe
because then now we're not using the
sign up we're using the subscription
where you you sign up to the form great
so
webflow gives us this beautiful way to
start stylizing some of the
different states of what happens when
you submit
a form right so if you click on the form
block using the breadcrumbs you can
access the property panel and
see some additional settings so we would
have here the form name
this is just the name that we are
identifying this form
when we go to our settings project
settings so that we can
see how many people have subscribed to
this particular form
we can have a redirection if somebody
clicks and subscribe where do we want to
take them
maybe to a page called thank you or
success
and then also there's the action this
action is by default empty but this is
because
this the form is being handled by the
javascript that webflow creates this i'm
going to give you a quick tip
so the tip goes like this i want to move
these two elements inside this form
field
or this form wrap but in order for me to
do that quickly i would have to do that
one by one
i like to have these inside a diff block
because they are kind of like
just on their own they're kind of
describing the heading
of any section so i like to have them
inside a diff block
called a header or you can change that
that into something like this using
header as the tag
this is for semantics html so this is
gonna always
help when you're creating a header style
in our html so it's it's it's nice and
clean
anyway i like to grab these and just
having them together move them over
under form
so now when i click on the form and i
say
click the different states i have those
actual headers are gone and i can
utilize a different style
for this particular response so
let's go ahead and do that i'm going to
just leave this
your submission has been received as a
as a text block but i want to add a
heading
in this case i'm going to make this
heading a an h2
and i'm going to put it right above and
i'm just going to say thank you
like that all right and let's add some
margin into that heading
so margin 16. that looks good
and just like that i've created that
nice thank you by hiding the original
title that we had so let's go back to
the states
we have the sign up form on the normal
state and then we have the success state
pretty cool we can stylize the error
page also
email form error there we go
we have our thank you and we have our
normal you can get pretty creative
with this you can add some emojis you
can
add a gif animation we can we can bring
some lottie animations but we'll look
into that in another lesson
so let's give that a test
subscribe and of course the form is only
going to work
when we publish the site so right now we
haven't published our site
that's the final thing that i'd like to
do is go ahead and click
publish and click on the domain that
they have given us
so published two selected domains
and now that is pretty much done we've
published it and we are able to scroll
down the site
we can access our horizontal slideshow
we have our nice tab system happening
and we have our nice parallax almost
there we still need to add some
animation to this
but we're almost going to get there and
finalizing with the sign up form
which we wanted to test out so let's go
ahead and give that a try
and subscribe and boom there you go
all right guys this is exciting on the
next lessons we're going to take a look
at creating all this for different
breakpoints
and so let's jump in
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
UNLIMITED ACCCESS