okay microphone sorry about that i had some weird issues
i don't know it was uh it was funky um as usual some technical difficulties today let me
close this window that i fixed my lights
okay there we go that looks better you know i tried to reboot my mac like i
don't 20 minutes ago decided it wanted to take like 15 minutes to reboot i was like what the heck
right um so sorry about that and then like everything booted up and
then my lights didn't want to turn on it was man oh well fun times
um so yeah how's everyone doing today frederick thank you for coming on from
good old france bill francis good to see you the goat prince always horrible to see you as well thank
you mr goat prince um rihann thanks for coming chris and
daniel levine or levin levine levin
oh it's mark levin right is that is that it's the commentator okay um same issue
as me big sir no comment yep yeah weird not sure what's going on uh you know
completely side note i i did notice you know uh apple at wwdc this week all kinds of new fun gadgets and all
that jazz right new um or not new gadgets but new goodies in the os and um apparently
for us that own intel max some of those really cool new features we don't get to get those so apparently
some of those are only going to be for m1 max so
oh well kind of sucks right i'm not sure if there's legitimacy there
for having those or not or i don't know man i have to say this one gray hair right here is getting pretty big
look at that guys oh watch out watch out there gone i got it
sorry i was just looking like oh whatever danny grizzle
listening from texas thanks danny okay um so today we're gonna be going over
some foundation form stuff um a lot of this if you were on the hangouts i don't know it was like a
month or two ago to be honest um i did some really um some really cool
stuff and um i i made it better by shipping some some updates and i've been wanting to do it on a live
stream and to talk about um some multi uh multi-page forms
multi-step forms two different things okay um and then also we'll go over um
we'll start off with something a little bit easier um i thought it'd be fun to um
to show you something i helped someone out with um not too long ago um has to do with forms so it is
relevant to today so um anyway cool
uh jason thanks for coming on today bud franco thanks for coming on good to see you guys um without further
ado let's go ahead and uh let's share my screen oh i did not change my screen resolution today
oh i got all frantic because um do i want to try to change it on the
fly let's let's see i don't know i haven't had good good luck doing that in the past but let's see
um let's see let's see
scaled this is going to completely bonk the live stream
hold on okay i know you guys are seeing something a little funky but let me go ahead and do
this voila and then we go live
there we go hopefully that's going to work i don't know hopefully all right let's
see let's open up a wrap of your window um see how big it gets
um
yes exactly today's live stream is all about how to handle it's all about let's not panic let's not
swear right let's keep a child friendly
[Music] okay um actually this this has nothing
to do with forms but i built this this morning as well for um i posted the url to this on the community
someone wanted in foundation six to create a little um two-column layout where this side was a
slider um and then the the size of the image here was basically based on the text
over here right so um yeah there we go so it doesn't matter what it is and on
you know yeah kind of cool i like it so that it's always two columns and on mobile it goes
small and um we have a slider and uh yeah pretty slick
um i put the uh here let me see if i can still get the uh to to copy the link i'll put this in
the chat if you guys want this project file um but yeah it's a i'm not going to go over
everything essentially what it does is um it uses a slider um the foundation 6
slider and then basically the slides the image is actually a background image
okay so um they're all background images and the reason i'm using a background image images so that it it just properly
scales and yes the parts of the image get cropped off
but it as you see it doesn't really matter the size it always stretches you always see some
of the image you always see all of the text right and they're all matched up in this nice
little container box right so pretty cool there um so yeah and it's a slider so there we
go um so yeah uh there's the project file um there there is some tricky um this this is the magic
um this swatch here the height swatch because essentially what we need to do is we need to um set the height of the slider and all
of its slides to be 100 um so that this is the magic bullet right
here this is the one and then these ones just generic background slides or background swatches that we apply to each slide so
there you go the magic is this height swatch though there we go i'll probably turn this into
a template maybe in the next one the next um thing actually you know what before i forget let's just go ahead and
i'll create a template out of this now so i don't forget and we'll just do two column
plus slider something like that
there we go i'll just call it two call plus slider that way i remember what it was and it's a template that i can easily
add to the future uh future thing there we go um
cool all right that wasn't purpose that was just i just happened to open up that project file to get rapidly going so let's just close
that uh don't save it okay and um actually i want to see if i can open up
this sandbox project because i think i have if you know it i shouldn't start for my sandbox project
because i just want to start this from from normal i actually know but it has like all my publishing stuff
so we'll start from scratch let's start
from a brand spanking new project file crappy uber seems to be behaving now um i don't think it was rap reviewer's
fault what we were having earlier in the live stream my mac was funky um so okay
forms oh but my i do have some swatches in this sandbox project that i wanted to
show off a little bit so let's open that up
it's in here yes one two three
four right
yes all right
all right let's go ahead and i'm just going to copy the site styles and we'll paste it in here
didn't need this one okay um so there was user um actually i think it
was uh gary wong and he wanted to display
[Music] change basically the button
of the foundation button in a form based on whether or not a
form was successfully submitted or if there was an error or things of that nature okay so um
let's go ahead and let me just build out a quick little form here
i'm just gonna do this and we'll delete the text let's just go ahead and add we're going
to start from the contact form template
contact form start here okay and let's just go ahead and extract that
extract okay there we go sweet um
we're not going to be playing with email um at all today actually so i'm just going to delete the email action
so forms when there is an error on a form let's
say we want to change this particular button okay we want to change this to be error or things of that nature and
what this is going to be using is it's going to be using something called pseudo content
okay and uh this is a this is a swatch that's from the swatch pack okay and um what it allows us to do is
it allows us to use css to modify the content of something
okay so um if we go ahead if we notice here we have um state button before so essentially what
we want to do is we're going to play around with this button and i'm going to add a class called state button state dash
button okay um and let's just go ahead and preview that really quick
what we'll notice here is um we have the preview says submit submit
right well that's because um here we have sudo content before and let's just do um
hello live stream okay so in the pseudo in the actual content now the important part here is
you have to have the quotes okay keep those in there
we'll notice that we have hello live stream submit okay this is just adding pseudo content
to the state button there's nothing else there's no other fancy stuff in here um this just kind of gives you an idea
of what pseudo content can be now um what if you notice here we have this pseudo element is called
before and the button itself has the word submit on it right that's the label on the button and
so the pseudo content before adds content before um the content so this works on
buttons it works in headers it works in all kinds of places okay um
and just to show you if we did this instead of before we set this to use the after okay this does submit hello live stream
okay but um we don't want that right um so we just
want whatever the pseudo content is oops um
let me save this project file step forms okay
um so here what i want to do is let's let's change this content back to submit
okay and i wanna i'm gonna use it before um and then what we're gonna do is here in this button i'm just gonna delete the
label okay now for accessibility purposes this button is blank
and that doesn't help people with accessibility right so what we need to do is we need to um
choose accessibility labels and we need to add this add an accessibility label since we
removed the label of the button okay i'll just call this submit form now
this accessibility label doesn't display anything it just tells accessible readers what
this button does okay by default it uses the label but since we deleted the label we want
to make sure we have an accessibility label okay let's preview this
if we notice the button even though we deleted labels says submit that's because we're injecting that with
css with a swatch okay so we're injecting the submit okay
now these other cool um cool stacks here let me go ahead
and okay um so we have this these other cool stacks uh pseudo content stacks and you'll
notice that um what it does differently is it has a parent class set so it we're styling the state button and
remember we added the state button class to the actual button in the in our in our form okay
now if you ever forget this if you hover over the parent class there's the tool tip that has a bunch of some kind of special
parent classes that you can use okay and if we look here under forms only oops i can't move my mouse but if
we if we look under forms only you'll see that there are three classes
um that you can um put inside this parent class if you want to affect some cool things
with form okay um so in this case what i can do is i'm going to say when the form is processing
so we have the processing class that gets added to the form when the form is actually in the process
of submitting okay um and then this particular one
we're using the parent class of success and guess what that class is added to the form when the form
has been successfully submitted and then lastly if there is an error so
the form will get an error class if the form has an error submitting
okay so um just to kind of and if if you look here when we are
processing i'm going to change the content of the button to say submitting and then here when it's
successful i'm going to change the button to say thank you right because this we're using swatches
to override the content so the default again here is submit but then when when we have processing
when the form is processing it's going to say submitting when the form is successful
it'll say thank you and if there's any errors it'll say oh no okay
now just to save us time i'm not going to try to replicate these states by you know actively sending an email or
whatnot so what i'm going to do here is i'm just going to add these these classes manually into the form
just to test here for the live stream okay um so let's go ahead and preview that
um actually let's go ahead what i can do is i'm actually going to open up the simulator um just so it's easy for us to see and
check out here and let's just hide that and we don't need that for right now
let's just whoops resize my window oh yeah boom okay
so now we have uh we'll have some live preview over here so in my form what i can do is i'm going to add the processing
class to the form processing again this is not anything that you're
going to um need to do this is just me
i'm manually adding in the class that will happen automatically via javascript when you submit the form so we see here
the form is in its processing state it's actually not processing right now but we're just
injecting the processing styles by adding that class so as you see actually this one even
shows um the little processing indicator and then we see our button that says submitting
pretty cool right okay so um that's how we can test our processing state um the next is uh success so if we just
put in success in our form we'll see voila this is what our form looks like when
it's success right it's kind of cool we can kind of test what our forms will look like when um
you know they're successful or error processing and stuff like that right so pretty slick um
so here we go the button says thank you and then we have a nice little you know success message um which is
using the success stack okay and lastly let's go ahead and um delete the success class from there and
let's put in error on our form and you see when we have error on our form
the button says oh no and then we can actually see our error so this is a kind of a
cool way we kind of learned two things here right it's it's kind of a cool way to test out states and forms
and you know um i'm also teaching you about the pseudo content thing where we can actually adjust the content within a button now
you can do all kinds of other things right if you want to add you know um change the styles of the
form fields or whatever when a success or if you want to change it when it's processing you can do all that with swatches too
right um just use this parent class to be processing success or error
and again if you hover over the parent class you'll see all kinds of you know optional you know classes that you can
use that are kind of automatically added by foundation in various cases okay and the forms ones are our process
seem success and error cool
okay um so that's pretty much all with that i thought that was kind of fun um it was cool and i hope you enjoyed
that uh that was that was that was a fun one with forms i didn't see any great ques any questions so hope
you guys enjoyed that okay next up um
i guess we'll leave leave this little live preview up why not let's continue using that um i'm going to go ahead and
i'm going to delete this form okay and um let's go ahead and add
a multi-step form okay so what is a multi-step form okay
you know a lot of times we'll have a really large complex forms and you've probably seen
this in um many websites where you know you fill out a couple things then
and then you click next and then you fill out some more fields and then you click next and then you fill out whatever and
then the last one is submit right so that's pretty cool right um this works works really well
um and hold on one second i don't have any form actions here cool
so how do we do this right now this particular one
if you've looked at this template you know how it does it okay all it does is use tabs okay
and so i create a tab container this is um you know in tabs now what i did here is
i'm actually hiding the tabs so i'm gonna go ahead and unhide the tabs for right now
and voila so here we have step one step two step three so i have my form and in forms you can
use whatever stacks you want so in this case i'm actually i have tabs in my form
and then i'm just organizing my fields inside different tabs okay now i didn't want to display the
actual tab bar at the top to have step one step two step three because i don't want my users
to necessarily know that it's tabs i just want to use that style of interface does that make
sense so hopefully that makes sense and um
so just to show you here um that's what tabs do okay but i don't want to display those
and in order for to use tabs we actually have to have a tab container as well as we have to have the
tab stack and the tabs content stack so you have to have both in order for tabs to work
but i don't want to display the actual tabs so all i do here is i'm going to add the hide class hide h-i-d-e
and that is a utility class just to permanently hide something i don't want to see it hide it's on the
page but we're never going to see it okay um so yeah so that's
how we can hide our tabs and then um i'm not going to go through
the whole tab setup um there's there is actually a really good video on tabs that shows you how to set
all that up you essentially just add your tabs and then you have to link like this is step one and then in tabs
content that's named step one as well and so on and so forth okay
now what i've done here is you'll notice here that um i have a progress bar indicator okay and we click next and then i have
the progress bar goes to from 33 to 66 how did i do that how does it know um
and then there it's it's done it's a hundred percent well it i mean to the average user it might
think that that's some sort of really smart cool thing that's all dynamic
but if we look here i just added here's my content for tab one okay and then um i have my a header and
then our two text fields then i have a progress bar indicator that's set to 33
there's no logic it's just i know when you're on tab one since there's only three tabs
we're 33 there right um and guess what when we go to tab two i know we're two
out of three so i know that we're 66 percent there so guess what i just have another progress bar indicator that's set to 66 there's no
fancy calculation that says i'm magically a tab two i'm going to dynamically calculate things and
you know no it's just i know you're i know i created a three-step tab i know tab
two is 66 so i just added a 66 status bar in there or progress bar in
there right smoking mirrors right a lot of the web is smoking mirrors guys
okay it's all you know uh you know illusions to make people think that something really really smart and clever
is happening like like this progress bar is dynamically moving it's not it's just just going it's just two different
completely two different status bars for progress bars keeps on the status bar okay um and then guess what down on the
last one the progress bar just it's static and it's set to say thank you and it's set to 100
there we go okay um next up is the buttons
so i have uh next and previous buttons okay and the last the on the last slide
um or on the last tab um i don't have a next button because there is no next so i in in the place of the next button
there's a submit button but i still have a previous button so people can go back
okay now on slide one if you if you're wondering here it is there is no how can i put in a previous
button here okay if there really is no option to go um you know previous so i i set it to
previous and then i i set it to be disabled okay um and i did that for aesthetic reasons so that
when you click next it looked good right because um here let's just go ahead and i'm
going to go ahead and uh do [Music]
the heck there we go um let's turn off the uh actually no i'm
gonna hide i'm gonna just add the hide class in that
and if we go here okay so here i've hidden that previous button on slide one
right on step one and if i click next it goes from one button to two buttons
and that just it doesn't it doesn't feel fluid right so um so yeah i decided to add a
disabled button in there so that it looks uniform right so when you go from step one to
step two um we still have two buttons and then when we go to step three we still have two buttons right
um so it just feels more fluid right the the user interface there feels
better um so next how do we control this like
how do i how do i create previous and next buttons okay well it's super super easy they're
just anchor buttons okay um so anchor buttons and all you do is you set the
anchor id to be the same as um well i need to
put in my little uh what's that draw app um screen
screen brush there we go there we go let's do and i think do i still have oh okay i
still have my little magnifying glass thing man forgot about that trick okay so let's go back to this anchor button
so if you look here inside here i have the anchor id set to step two okay
so the anchor id is set to step two so we're linking that to the tab step two
so if we look at at the tab content this is has a tab content id of step two
so that's it okay we're we're permanently linking it's not some sort of smart thing that
says go to the next slide it's linking directly to step two okay so
um i know on slide one or on step one the next button needs to link to step
two and guess what when i go to um step two i have two more buttons
previous and next previous is linked to step one and the anchor button for next
is linked to step three okay and then um at the at the last
slide on step three the previous is linked to step two
and then we have instead of a next button i have a submit button here okay so that will
then submit the form
okay so yeah pretty cool i'm and this is again this is just one form um and uh we're tabbing through these
fields and kind of tricking the user um to you know fill out more fields so that they're not
overwhelmed with tons of them now granted this particular example isn't a lot of fields right but
it works okay man should i got a glass of water
um just think outside the box here um tabs is
one container that you can use right there's all kinds of ways you can build multi-step forms
using things right maybe an accordion okay if you want that style of inner you
can do a similar thing here with accordion you can even do next and previous and then it'll open up the accordions
exactly the same way as tabs okay actually here let's let's do this um
can i do
oh accordion at medium
oh that's interesting here let's so if i did accordion at medium
there we go here's an example of accordion right so here i have now with accordion you
can't hide the titles because that's you know you can't do that accordion has to have um
and remember tabs here can morph between accordions and tabs i'm not going to
dive into that but essentially i just morphed these tabs this tab interface into
um an accordion okay so maybe on mobile this is
something you'd want right but you know here you can go directly either by clicking on these to go to the various things or you can click next
right so same exact thing okay so accordions
another idea is to use a slider
you know you can have um you know content fields on one slide or form fields in one slide
click next go to the it'll animate in go to the next slide right and then click next and
go guess what go to the next slide it has all the fields and then in your very last slide in your slider
have a submit button and that's another idea right so um yeah tons of really cool
interesting layout ideas for um for this maybe you can use off cam i don't know how off-cameras would
work maybe off-campus could work that seems maybe a little out there but i'm sure someone could come up with a
cool example of forms inside multiple off-campus panels it's kind of crazy but anyway
yeah hopefully this opened your eyes maybe made you think outside the box with forms um there's nothing special here with the
form itself right it's just how we're laying out the form fields
okay there's nothing special you need to do with a form in order to get this to work
um it's just using tabs inside of a form or an accordion inside of a form right slider inside of
a form all those should work really really well let's just look to see uh
what what else where the containers are in here that could be interesting um i guess you could use light boxes
i don't know man clicking next it would open up a different light box i don't know that seems funky i would i
wouldn't necessarily recommend that um same thing with drop downs
i can't see having multiple drop downs working um but anyway um
yeah those i think tabs accordion and slider are probably going to be your best bet for uh
um the most user-friendly interface for a um and even to be honest recording i
don't know it's interesting having it stacked sections um you know it is interesting
but okay so now we're gonna be diving into i'm gonna be going into some advanced stuff so um if you consider yourself a beginner
um hold on to your pants um because uh we're gonna be doing some
really cool stuff and i noticed that it's already 12 15 my computer just told me and um there's no way i can do this in
15 minutes so we're going a little long in this hangout or live stream but i did waste like 15 minutes
you know fixing stuff so sorry about that okay so let's let's actually use this
um this form um let me just go ahead and break out this form a little bit um just so i
i want to make it as clean as possible i don't want this tab interface but we'll we'll keep the same general
concept okay i'm going to have this form
we're gonna we're gonna create a um h1
duplicate duplicate so we've talked about multi-step forms
and now i'm going to talk about multi-page forms okay um and those are
it's very different okay so let's do step one
step two step three okay
oops all right
all right and i need a smith button all right so remember in this particular form that we had a multi-step form step one
had name and email address okay uh let's go ahead and i need a
submit button though and instead of going through multiple steps on the same page we're going to go to
multiple steps on different pages okay um so let's go ahead and i'm going
to add a submit button there okay and we just say submit
actually here we go we can say next right because uh we'll say next
okay um i'm gonna build out all the forms on different pages first okay so
um let's go ahead i don't need this project anymore
um and then in step two we're gonna go ahead and pardon i'm just gonna have this here
just so i can use the same exact form stuff here so i'm going to drag this up
and then we're going to delete all of this except i need that submit button
submit and this one's going to say next as well okay
and then let's go to our last step one two three delete those
let's see just uh there it is delete that and here uh one two and we already have
our submit button okay let's do that boom
and we'll take out okay okay so here we have the same thing that
we had in that tabbed interface but instead we're using three different pages
okay um so page one collects our name email and then we click next
and i'll we'll tie all these together in a minute but i just wanna um show you kind of what i did here then
in step two uh we're pulling in uh i don't remember what this is um what is this called months
and then favorite day okay so we're picking out months of the year and favorite day
okay and then we click next and that will submit the form and then we're going to go to step three
which you can provide some comments all right and then and then this ultimately submits the
form and at this point we would add our email action or something like that right so here you do an email action
okay and for fun i'm going to go ahead and let me just configure this really quick
oops
okay there we go joe workman oh yeah that's fine
i'll just get the default template okay good
okay so now how do we tie these steps okay together um i can actually go ahead
and let's publish this and let's get it to a decent url here so
um i'm gonna go ahead and do that that'll be the home page and this
one will be step two step two and then step three will be
slash step three just so i i know the urls of everything okay uh i'm gonna go ahead and publish
this to my so we can actually test it do configure manually add from bookmarks
uh this bad boy remove
um and publish oh oh i need my website settings
let me just get i'm going to publish it to my sandbox site
there we go click publish
oh 374 files
all right sweet hold on oh i have multiple index files shoot
oh it's because all these are index.html i normally use index.php that's fine let's index.html will win anyway which
is what we want oh i changed my server to defaulted php
all right hold on once i let's just go ahead and change my index files to be php
uh change file name here i'll change all of these just in case
normally i go ahead and change the default since this was a new project file normally i change the default extension
on all my pages to be php so normally i go into the general settings actually no advanced settings
any change default extension to be php so that way any new page that you add will be php let's go ahead and publish this
again i don't create create many new project files and then publish them so
there we go okay so now um my server goes ahead and uh we have our
form okay now if i submit this form right let's just use autofill boom click next
um well i don't have any i don't have any actions right so how do we um how do we configure this
how do we go to how do we link this form to step two okay so uh we're gonna use something
called a get url action okay it's a pretty cool thing
and uh what get url action does is we give it a url
so we want we need to give it the url of where we want this to go to oh my son's bringing me
some water
ah there we go mouth is getting all dry so we are going to give it to the url of
the webpage we want it to go to okay it has to be a url so uh remember i named that step
two there we go here's our step two so my news i'm gonna copy this url and
i'm gonna paste it in there so now when i submit this form
it's going to navigate to step two and then it's actually gonna send us all the data as well okay
um so let's go ahead and um i'm gonna copy that let's go to step two
let's paste that in there
ah get url action i'll just delete that then
go in here and paste paste my url and this one's going to be
step three okay so on step two on on the form that's on step two i'm gonna go ahead
and get the put in the get url action and then i i put in the url to step three
okay and then in step three this one actually sends an email action
okay let's go ahead and publish that
that's fine okay so let's go back to our homepage
okay so i'm gonna go ahead and let's fill out this form again and now this time when i click next uh
hopefully safari didn't cache everything like it normally does let's go ahead and click next and of course it cached it hold on let's
go ahead and close that open up a new safari window actually i don't need don't need that anymore
okay go auto fill click next come on
there it goes i declare my cache a lot of times so here's a a little tip
okay i know a lot of us get frustrated especially with safari seems to be so aggressive with caching okay if you
open up the dev inspector while the page is loaded okay um and then if you go to the
network tab okay so network tab and then you'll notice this little doohickey
right here okay that essentially disables caching
okay so um if you click on that um that should and i say should
i there are sometimes some things still get cached but most of the time um you know 95 percent
of the time um you know just by refreshing the page with the dev inspector open and this
little do in this little button clicked um everything will be downloaded and nothing will be loaded from cache
so there you go there's a little tip and trick for you i know we all deal with caching um that is the the next level caching
thing with safari okay um we are now on step two when i clicked remember uh we i
here let's go back just to show you that again i was on the fee i was on this field filled out my form
click next and it took me to step two okay now what's important is i'm going
to go ahead and make this window bigger because we're going to look at the url okay and let's let's look at this url
bar you'll see that it went to step two and then what if you notice here it passed information
to the url so it has name equals joe workman and then my email address
pretty cool now if you also notice um what it did is the name equals that has to do with the
form field name okay so if we go back into rapidweaver
okay uh let's go back to step one we'll see that this particular form it has a
field the first field name is called name so hence that's why in the url it said name
equals and then whatever i typed into that value okay and then if we go to the email form
guess what that says email okay so it takes um this data from the form
and passes that data to step two okay and at that point we can go ahead
and select our um you know march 24th
okay my wedding anniversary and then we click next again
now let's go ahead and look at this url if we look here we have months labels
march months equals 03 and number name equals 24.
wait but what happened to name and email address hmm interesting
interesting darling okay so uh but let's let's continue on let's just continue on we we got to our
step three um i'm going to go ahead and um uh live
stream hello we're gonna click submit okay and now i should have gotten an
email let's go ahead and open up my mail.app
somewhere over there okay
and here's my email now if we see the email only contains
comments like where's all that uh where's step one and step two where is that data
okay now i knew this was gonna happen and i kind of did this on purpose to teach you um you know how the things happen
okay so
when i go back let's go back to step one when i was in step one okay
and i filled in my my data and i clicked next okay
um the url passes the data to the web page okay but currently our form here in step
two doesn't take that into effect at all okay it doesn't
capture that data from the other from step one so how do we capture that data from step one
okay super super easy okay so remember in step one we had uh inputs
for name and email okay
so uh what we're gonna do is um we're gonna we're gonna add name and email to this
form as well actually let me back up a little bit
more um foundation has a foundation forms
have a feature that allow you to um pre-populate form data
via just by passing data to the urls okay for example here on this form
uh we have the name and email form fields okay if i go ahead and pass a question
mark name equals um joe workman enter
what we'll see is i passed data via the url and i told it to i i
said name equals joe workman foundation forms look at urls and say hey he passed a name
parameter to the url i i as a form also have a form field
called name well guess what i'm going to take that data from the from the url and i'm going to inject it in my form
field name or in my form field so here we have boom we have our name is
now set to joe workman pretty cool okay and if we wanted to do email as
well i can do and ampersand and then email equals with an email address
okay so there we go so now i have now i pre-populated this
form with data just by passing data to the url okay
so now let's take that concept that feature and let's use it in this multi-page
multi-step form okay because when i click next
guess what that's exactly what this does it takes the name and the email and it passes it to
this form so how can i integrate i don't want to display those form fields but i
want to capture that data i want to capture the name and email address that i s that i
have in this form but since i don't want to display it what can we do
well essentially forms also has hidden data so what i can do here is i'm
going to go ahead and add hidden data to my form and guess what i'm going to name hidden i'm going to
name this hidden data name and the value could be we'll just set the default value to be blank
and then i'm going to create another one and i'm going to name that field email so
i have these hidden data fields
that are called name and email now when foundation form sees that i
pass those parameters via the url it's going to inject that data into those hidden fields even though the
user doesn't see it it is there
okay so let's go ahead and um let's do the same thing for step three
now in step three oh actually let's go ahead and publish this now let's publish that
yeah i know i have multiple files it's fine refresh
all right uh or well just for
all right so now we're on oops step i want step one
and we're gonna auto fill this we're going to click next okay now it passed all those parameters
via the url i don't see the data there
okay um but it is there okay let's go ahead and select march
24th and then we click next again now when we click next here we'll notice
if we look at the url now you'll see that in step three the url has look it has
man hit the wrong keyboard combination here oh there it is um so there we have name
equals joe workman email equals my email address months equals march um
month equal 03 and number name equals 24. pretty cool right okay
so what can we do i so now i need to capture this data inside step three okay
and we're gonna do the same exact thing actually i'm gonna um you know this this particular select box just to make
things a little less complex here i am going to change this from a multi-select
to a select box just for kicks
boom and um we're going to call it we're going to
call it month month all right
all right because i just want to select one month and a day okay
and then um okay so now in step three um we need to collect all the data from
step one and step two so um here i'm gonna go ahead and get this hidden data i'm gonna copy that
and then we are going to uh paste it so here i have name and email okay but i need to go here and
i need to capture this um so let's just instead of number name let's do this day
so now we have uh month and day fields okay so let's go ahead and step
three i'm going to uh hidden data we're going to change this to be month and then
we're going to change this one to be day again we're passing all this data to
this form the form is going to if it exists in the url it will populate these hidden data
fields with that data let's publish that
let's start all over
okay so now we're going to start all over i'm going to go ahead and autofill click next
now i have my uh my month here i'm going to click march and i'm going to click i'm going to
click next okay and just to verify let's go ahead and look at this url i've
my name is joe workman email is there right uh let's keep going
um the month is march the month i id is oops ah sometimes my gestures
get me uh month is 03 day is 24. okay so all the data is
passed via the url it should be there in the hidden data um and let's just let's test it
please work and then we say submit
the form is now submitted and if we look
voila i have all of the data from all the steps so i have my name my email my month my
day and the comments
pretty cool right so this allows us to take a form integrated across multiple
pages um and then you know do some pretty slick stuff
now because i mean there now if you're an advanced user and you already know that there are other tools out there
that that give us the ability to process um url fields right so for example agent
if if you wanted to customize your form based on a user's response from a previous step you can maybe um
take agent analyze the shoot man the heck
that gesture app is a little annoying sometimes okay um you can like maybe if if the month is
you know january or february display something different on this page you know i don't know but
you can essentially analyze the urls with agent and then either customize the form fields you can
add different form fields you can do all kinds of crazy stuff right um you know with this so i'm just
thinking outside the box and on how you can take this even to the next level i'm not gonna do that right now but you
can definitely use agent man this uh does not like me today this gesture
um so anyway so yeah pretty cool stuff now there is a limitation with this
okay you are if you have a really really really
really big form there could be lots of data in your form
okay and you could run into issues
with the url actually being too long there is a limit i think the limit is like
2 000 characters or something right i'm in a url all right let's uh
hold on let's let's look
what is the maximum url in different browsers
32 kilo 32 kilobytes jesus christ interior explorers 2000 safari 80 000 oh
that's pretty big okay who use it i don't care about internet explorer anymore let's see firefox is 65 000 well it's a lot bigger
than i expected it to be okay and chroma's big that's 32 kilobyte carry that's a lot of characters um
okay so 65 000 characters wow so if you ever looks like that's the smallest one i
forget about internet explorer okay so that's actually pretty big so you you
can use this um technique for if there's up to 65
000 characters in your url okay um that's a lot right but
another thing is what if what if you wanted to maybe protect some of this data you didn't want some of this data to be displayed in the
url bar for some reason okay um it is possible and that that takes us to
the next level here so level three we're now at level three defcon three okay and to do that i need
to do some more edumacation so we've been using this thing called
get url action what is a get why why does it have the word get there
okay if you look here you'll notice that there is both a get url action and a post url
action what is that okay so
there are different types of let's back up the web all configures um
or all communicates over a protocol called http okay or https a lot of times right
the secure version and let's see do
yes okay and a lot of these requests majority of the web runs on on something
called a get request so over the http protocol there are
different types of requests the most popular of those is a get
in a post a get request is probably
99 of the web okay it essentially um sends a url
to with a server saying get me this data
okay it could be a in this case it's a this particular url right in uh in this web page case
it's this url plus all of these parameters and based on those parameters that are
passed to the url the web server can give you different information but it's
essentially just a request for data get me this data
okay it is a query now post is something different
post says give me data but then you can actually supply
information okay that is hidden from the that is
separate from the url so you can actually supply data outside of the url
and most of the time post requests are done for telling the server to generate some sort of action however
browsers can display post requests as well but the data that is associated with
that request is hidden from the url okay so let's see the difference let's
convert this form instead of using get requests we're gonna use post requests okay so i'm gonna go ahead i'm
gonna copy this url we are going to delete this get request and i'm going to add a post url action
i'm going to go ahead and and i'm going to go ahead and put in that url same exact thing it's
just a post instead of a get and then we're gonna do the same exact thing on step two
we're gonna do a post we're gonna paste in that url make it step three okay so now i have a
post url on step three and i have a post url on step two
now there's something we need to do because uh when um this hidden data
uh that whole remember how i told you if you pass data to foundation forms okay um
foundation will look at the url okay and then populate the form data based on
data in the url all right now in this case we're not passing data
view the via the url it's getting sent with this post request
so what we need to do is i added a feature in the in the hidden data fields where you can instead of defining a
custom value you can say define the value from a post request data
okay and um most of the time you're going to want it to be the same the name field okay
so on this one i'm going to say post request data and then the field name this one is going to be email
okay so here i have the field name of this hidden field is called email
and i want it to default its data from the post data and get the email value from that
okay and then we're gonna have to go to step three and do the same thing here so i'm gonna set this one to be post request data field name is name
this one is post request data field name is email
uh this one we're gonna be post request data field name is month and this one is post request
data and field name is day
okay now i'm going to publish this
all right and let's start from the beginning again
okay so here we go i am going to uh let's just use my autofill again
because it's convenient i'm going to go ahead and click next okay now if we look here this url
the url does not have any of that data it doesn't have my name it doesn't have my email
okay but let's go ahead and continue on i'm going to go ahead and select march
24th click next if we look at the url again
it doesn't have any of that data okay i'm on step 3 though um and um
i'm gonna say please post work i'm gonna hit submit
and waiting for my email voila
and there is my email with all of the data
okay so this is definitely next level stuff okay because um it's kind of invisible
right but we're still passing that data post requests um don't have a limit um well
your server has a limit but it's mostly like in megabytes in size okay um so you should be golden with any
sort of text okay uh input so this is pretty cool right i mean this is uh um definitely
next level form stuff how we can pass data around forms across different pages link these forms
together um it's pretty interesting and uh yeah i hope you guys enjoy that let me see if
there's any uh any questions here
uh okay i like being specific in my urls so i can use the whole 32 kilobytes to
describe what's on the page uh scott says glad i don't have to do
this by hand yep see scott if you started joining the hangouts again you would have known about this two months ago
uh and brett uh yes you can use all 32 kilobytes in in the url if you're using chrome
else is 65 000 characters in firefox so yeah you're limited to sixty five
thousand if you want cross browser capabilities sorry damn i know sixty five thousand
dollars um sweet guys um that's all i had for today pretty
cool exciting stuff um thanks for coming on hope you enjoyed this had a lot of fun
um yeah it was kind of a break i know i've been trying to do some you know beginner level stuff recently and this
is definitely far from that but hopefully i i try to give some explanations on
why and how and what all this stuff happens right i mean the configuration of of
what i did isn't hard right it's just a couple little check boxes and whatnot and you know doing post requests and
creating those hidden data fields it's i don't think the work itself is difficult
but knowing that you can do it um and you know i think it's important to
understand what's going on behind the scenes right and hopefully my explanations of
that were okay i know the the difference between a get and post request could be um definitely a little a little
different for first a non-programmer right but hopefully that that kind of um is
understood oh one other thing i i know i get this question a lot uh let me share my screen again really
quick is um inside the email action or inside
the the form actions um you'll notice that there is a a post url action
and a post url background ajax what is the difference there okay
so the post url action okay that will actually um
like refresh your it's kind of like get where it'll actually go to a url in the browser and it'll also send
the data okay the post url background ajax
that does not leave you stay on the same page and a post url action is happens in the
background okay a lot of that is going to be used if you're um using your own sort of like if you're
communicating with some sort of api or zapier or something like that nature
right the user you're going to stay on the current web page you're on um the form will be submitted that post
url actually will happen in the background and then if it's successful or not that'll that'll you know
reflect that in the form okay but um yeah so that's the difference between post url and post url background
the background just happens in the background the the url in the browser doesn't change at all okay so that's the main
difference on that the background one is going to be used if you're using your own custom like api um because
most apis are all happen via um at least for forms or all happening via
post requests there's other things there's put requests and and delete requests and other stuff but
uh yeah where post is most of the time what's going to happen um on those so you can't do the others
with the foundation form um sorry um so yeah that's a big one so i'm glad i remember
that because i know i get that question a lot when i start talking about post url actions so cool guys this is a lot of fun
um i thought this was cool i hope you enjoyed it hope you learned a little bit and um i will not be on the front on the
hangout this friday um but i know a lot of you guys are going to be there um so
you know join everyone and i'm going to be on vacation for um the next 12 days starting tomorrow
afternoon i'll be around a little bit tomorrow but not much um and then yeah i'll be gone for 12 days
so um hope you guys uh are okay with that uh while i'm gone i'm sure you post in
the community everyone will be there happy join the hangouts um i definitely won't be on next week's hangout
um but uh like i said hangouts happen with or without me there's still a lot
of fun and actually you know sometimes i hear the reports of what happens during those hangouts when i'm not there and i'm like oh damn that
sounds cool i wish i was there right so um lots of stuff in these stuff happens and um so
um yep and if you so if you're wondering where i am for the next two weeks and i don't respond to any
emails or posts on the community i'm i'm not around so i'm gonna be lounging on the beach
um and uh i look forward to that so thank you very much guys i appreciate you um and hopefully uh you guys enjoyed
today take care take care talk to you later bye