Build a Signup Form in Webflow

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

‍