someone could come on cuz it's uh it is all you sounds good I
uhet oh we are we are live now by the way
so excellent I normally I thought it would like prompt me you ready to go live after you configure but no it just
does it sweet all right hey everybody in the chat what's happening what's cooking
hope everyone's doing well today let's see anyone in the chat
wonder if it's because we started oh I gotta go this one excellent David's here Mr Francis Dr
Bob all The Usual Suspects Adrien Gunter thanks for coming on Ryan good old
Ryan's here hey Ryan good job on uh winning uh winning the raffle I don't hopefully you saw my message you won uh
you won something hopefully Mike's going to get back to you on what you won
Lewis is here gastone is here sweet it's a
party so uh good everyone you you know you know this mfer I almost I almost was
a bad boy and said bad stuff I can't hear you all of a sudden
dude sorry I just muted myself for a second sorry wait so yeah you you all you guys know that you all know this guy
this wonderful individual he uh yeah I I thought I'd bring him on today so you
know there's been a lot of um you know a few over the past few weeks uh some
interesting talks and desires for some multi-step forms and I know I've done a
pretty extensive live stream on multi-step and multi-page forms before so I'm not going to go over the all the
like the how to set it up and the the intricacies of it um in terms of the foundation multi-step forms um I'm just
going to go over some other cool ideas that I've seen come up um and kind of build on top of that and another thing
is I don't think we've talked about F6 brancher on the live stream before so um I brought Josh on he's used it I think I
think you've built like Scott said like this immense huge brancher um form right so so yeah I I
knew that so I was like hey Josh you available and uh yeah he squeezed Us in also why I had to start 30 minutes early
today but it's all good um yeah so yeah I thought we'd kick it off with
Josh showing F6 brancher um and actually if if you want he's also working on some uh some other
label stuff we we can help you debug that stuff live too if you want dude um with the data
set yeah that you want you want to jump into F6 Branch or you want you want to you want to look data sets uh we can do
the data sets in a little bit well first qu this just in case I get pressed for time here sweet all righty so I'm just
going to give a show kind of a demo form here now when you're doing something
when you're like brancher and you're doing a multi-step form I always find it's easier to lay it out see what are
you going to do um have all your options have all your steps um in this case
you'll see here that I've kind of just said you know I want a form that says what is your name and then what version of total cms3 are you buying and then it
kind of gives you the option for light standard or Pro and then this will push you to step two three or four so I
figured this simple little demo will give you that basic understanding of how do we do this uh all right so let's just
jump right on in to Stacks all right so I'm just going to throw up a site Styles now because I am
running PHP 8 I am just going to throw in a jQuery Legacy
support all right and throw in here a
container adding on that and then we'll jump in with a
form perfect and now I like to organize my steps uh with pen just so it's easy
to collapse so I'm just going to set that up
here I'm just going to call that Step Zero Perfect all right so let's grab the
branch or stack and throw it up on the screen so there's some settings in here
um that you kind of have to go through and set up that you do per step and uh what you would be looking at
here is what is this step called so this will be called Step oh sorry my auto save is going to
kick in a whole bunch of times here um let me just kick this to save
something there you go all right so we'll call this Step
Zero and then it's going to ask you what is this step targeting so right now we don't have a field in here so let's get
ourselves a field in
here we're just going to put a text
input and we're going to call this name and put a placeholder of name and
then I'm just going to put a text field in there that says hey what is your
name now there is a really cool thing I'm just going to sideline here that comes with uh that comes with brancher
and it is called a brancher macro I'm just going to throw that underneath there and in brancher macro we're going
to Target the name field and we're just going to name this name Mr for name
macro and say class is uh I'm just going to
put uh yeah I'll just put my name in here class Joshua so what this macro uh
stack that comes with brancher does is it will collect the name input and allows you to use that later on in your
steps so if you want to personalize your forms um by pulling data from one step
and using them in the next step this macro is a little a little uh a little stack that it's included with brancher
that allows you to do that all right so now if we go back into the
step we're going to say we want to Target the name field and then for logic um we don't
want it to be empty um so what you can actually do is a less than zero because
anything you put into the field will be less than um will trigger that it won't let you
change the step if it's empty but if you put something in then it's not less than zero and then we want to go to step two
or sorry step one because we're on Step Zero and then the default goto steps so
if nothing happens what is the default thing that happens so if you wanted it to go to another step if you didn't put
anything in you could do that but in this case I want to keep them on this step and not go anywhere so right now
we've decided that hey this is Step Zero we're looking for the name field we have a logic that if it's less than zero you
can't move otherwise you can go to Step One otherwise you stay on Step Zero and then
you just need to add in a button and let's just grab a button
here don't have enough buttons uh now on this button we're just going
to say next and then we've got to add a custom
attribute and in here we just say ID
and then we have to say that this step is complete so we say Step
Zero complete awesome so now we have set up
our first step we can see it probably look a little not so pretty but we're good to go so now we get up a another
step so I'm just going to quickly duplicate this out call this step
one rename this step step one we're going to remove the name and we'll deal
with the rest of the setup in a moment once we put some more stuff in here so what I'm going to do here is I'm
going to replace this header with the hello and then the macro that we pulled
off here from the uh the F6 brancher macro we're going to say hello name Mr
what version of total CMS are you buying and then we're just going to put
in some radios [Music]
so we're going to put three radios in and we want all three of these radios to be just field name of
TCMS version and then the first one we're
just going to say is light
second we say
standard and then the last one we'll do pro well auto save and
partial all right so we've got three options
here um and we know that we now we're calling this field name total CMS version so now we're going to go back to
the step settings and we're going to say okay we're targeting the field name of
TCMS version and instead of logic there's a Case Logic and this allows you
to put in essentially a yaml um field set of options so we're going to say
here that if it is light we want to go to
step two then comma if it is
standard we go to step three and then if it's
Pro step four perfect and then our default uh
goto is step one because that's what we're on right now all righty and next we'll have this
as step one complete all right so let's just test this out so far so we have a
step zero and a step one see how we do so I'm going to say
your name I'm going to put Joshua perfect and then we says hello
Joshua what version of total CMS are you buying and then you can choose your version but we don't have the next steps done yet
so let's get those next steps
done so I'll do this one probably a little quicker so we'll just go step
two hey Josh after this can you send me this project file and B I'll combine the project files that we make today and
give it out cool now what we're going to do here is um we're going to do for the button
instead of it going next we're we're just going to do a back button instead so we're going to say
back and to go back a step whatever step you're on so this is going to be step two we're going to go step two
back so now let's rename this um I'm not going to put anything for logic other
than just telling this this is step two and then I'm just going to
delete then I'm just going to to delete any of these options in here just leave them blank for a
sec perfect so in here I'm just going to put step two is the
title and say buying
light perfect so our step two should be done so we can press that we're just
going to put in a blank here and say if we set light we should get to step two and if we hit back we should get back
here perfect so we have that step working so now let's get standard and progue
working so I'm just going to duplicate these twice more this is my step
three we're going to rename this step three and the back button step step
three then rename the
title perfect and then let's do step
four this step is now step four rename the
title and go buying Pro and then for the button we do the same thing and we do
step four back perfect so let's do a little test here so my name is Joshua and let's see
go next actually now before I do that let's go back for a sec you see here now if I leave this blank and I click
nothing happens that's what that less than zero logic was doing so it's preventing the next step unless you
actually put something in so here I can put Joshua now we're on to this next step
here now I could have put the button in a container so it wouldn't sit up there but let's see light should go to step
two perfect let's go back standard should go to step
three and pro should go to step four nice very cool love it yeah so that's a
very simple look at at at doing this and it's I always say like the form that I had kind of put out there um I can kind
of give an example I think I have just a quick preview of that um now
this is where you can take the these forms to a whole another level um if we looked at at these settings here with
the radio I've actually replaced the radio with SVG images MH and with the
radios here I've actually converted them into select boxes so what you can do this is again just using swatches
brancher and F6 form you could end up with something like this like what kind of vehicle do you want and you can
select and your actual SVG will change color just to let you know everyone I do have a temp a template that does that
for you that shows you how to do that so there's there's a template in the free template pack that will show you how to change the svgs for radios and just so
you know that is the template I [Laughter] used yeah and so then here you know what
is your budget so these are all radios that have been styled with swatches to give you this look sexy I like that and
so I think it's it really makes a form look completely different yeah um with
that and then you know your back works so it's it's pretty cool um
brancher is awesome stack um and I think that it's super customizable to what you need um highly recommend
it sweet that was cool dude you I'll I'll be honest I I I love that simple
Simplicity of the brancher I think uh you know you it can get pretty large
right because then you can you know have steps you know if step four is then something then you can go off onto all
you know yeah some you know I think I think if you're going to build a complex form something that is going to be
important is to create like maybe like some sort of Mind map or something that is like an outline of your form and its
steps you know what I mean um yeah no the the Mind map that I I made for the
the car one that I was doing um yeah is is quite extensive it is I mean it's got
I think about 35 steps and it branches up to four different ways um and then it
comes back it's really cool is you can bring them all back in at the end with some final questions that are all the
same no matter how you branched off you can you can Branch out and Branch them back in which is really cool nice very
cool very cool I like that uh uh it's been great trying to okay
people are just saying thanks they'd love to have the project file so yeah send me that that total CS that simpler one that you did and and I'll I'll merge
it in everyone says Josh you make something
very complicated look so easy to do yeah sorry I just I know I kind of went
through pry time I know I went through that a little quick but it's it's it is
a little bit of playing around um uh to kind of figure it out but it is it is
pretty it's it's pretty awesome like it's it's powerful sweet I love it why don't we uh
because I I know you're press you're limited on time why don't we uh address some that data set thing for right now
we can we can chat on that before I diverge off into I have no idea where I'm going so sure
um let me open that project then we can work within that so I'm actually doing something
pretty crazy with uh with feeds um
um let me just reshare my screen here if Raphael's in the chat hello
[Laughter] Raphael so this is actually very interesting so
we have a total um we have a foundation 6 form input that I am supplying a data
set so I need to supply data to the data set so it is a text entering
field but instead of listing the data set I'm actually using feeds to supply the data set um and then what that's
doing is it's pulling from uh mySQL database so the whole thought process
would be that where you enter the client name then You' be able to
search a client name selected but because it's a text
input the ID needs to be in there in order for that to submit into the form but I would like to display the the
selected option name but still have the ID submit into the
form okay so by default the select option only does a value yes so I did a
little HTML hack here where I added in um I did HTML so the value was in the
was ID and then I was able to put a name in there which allows um the name to actually show up and which it actually
works in the data set it actually works oh it shows a little oh that's ID and
the name so it does both and it's searchable you can actually search the name but when I select the option it
puts the ID in okay yeah so now I find in this particular
use case you want someone to be able to type something in as well yeah well in
this case there's a possibility there's going to be 500 people in this list so I
need to be able toil by that instead of a select box well the select box isn't
searchable that's the problem all right but with this solution um someone can
type and type in yeah so and and actually cool is that we're searching
the actual name like when I type in the name it's actually pulling that name and using the value so it works I can use
this interesting here try this really quick go back flip back to edit mode um
okay add a select um a select uh form
stack to the page just for now select um like a select box yeah select
box okay just add in wait um add in an option in
there just select option yeah all uh drag that select option and replace your
HTML I think that will
Hur obviously to put in your your Macros yeah
yeah capital N
yeah oh I spelled my macro wrong hold on iy print
boom there you go but it's the same thing when you select it the value goes in I just want
to see if that would work cool um that's interesting I can actually I'll actually
add that as an option to data set maybe um okay next up is on that
input uh on the where's the input not the data set
but not the data list but the input the text input you can delete that select box too
don't need that anymore get that out of the way um you don't need the HTML but
it doesn't matter on that text input try to set it to
disabled or read only let's try try one one or the other oh for read
only can you can you select I can select but I can't type
yes at that point it's a select box oh but then you can't type because you want
to be able to search yeah correct so I want to be able to search the data in that data set yeah I was just trying to
think of a of a kind of a hack to allow someone to search but not type in but if you yeah if you disable typing then
defeats a purpose shoot
yeah I don't know so so what are you going to do with your form how are you going to stop someone from typing in
something and submitting incorrect data well the form
is being used by an admin so this is this is behind a password so it's it's the actual user trusted User it's a
trusted user so that's not a problem it's just trying to make it that after they selected the the name instead of it
showing an ID it would just show their name um I mean that's so minimal I mean I think I can get around it with a
little bit of uh JavaScript wizardy um and a hidden field where I
could display in that field what was selected and then hide the value in a separate field and then submit that
separate field into the form but um trying to make it as as as simple as
possible you know I mean if you you can type in with a select field I it doesn't
have a text field that you type but you do know if you have a select field you can type and it will automatically filter that it'll take you to that
particular area um H interesting um in terms of getting the
the values and labels I wonder if Pi could could help out here I don't know
okay interesting idea yeah I thought that was pretty cool being able to pull in a whole list of users off of you know
mySQL database with feeds I thought that was pretty cool oh yeah totally yeah very interesting and I like that how we
can add that I didn't know that a datalist supported op labels and values
which is cool so I'll probably add that as an option to the datalist stack so
you can add that same just it'll just add in the placeholder from select yeah same exact HTML soet ex like that yeah I
thought that was a really cool shout on that I like that um
okay my turn Let's uh this could actually be fun having someone else on
here to kind of oh before you before you go into that do you want me to show the feed select option I know mine's a
little hacked but that's an ID thing that you can do to using um total CMS to modify a
form sure yeah I have a quick little uh let me just pull that pull that up
up it's just that one thing that you need to do for me with the radio fields and the checkboxes but in theory this
will work if I can find my sandbox there you
go so someone as part of this multi-step Forum someone also had asked about the possibility of being able
to um use total CMS to change the options on a form um and this is
actually something I had built um a while ago and but it's requires just a slight
modification of the checkbox and radio fields in total or in
Foundation 6 forms so here's a quick example this is
a foundation 6 form with uh checkboxes and it's saying what services
do you require Quire so if we actually go into this admin area we'll see here that I have a
total CMS blog and I want to remove um remove stamps as an option um
and maybe let's remove web store but let's add uh e-commerce so this one
we're going to call this uh
Ecommerce
value is yes off value is no and go
save so we go back to the form we'll see here now we have got a Blog calendar
e-commerce and total cms3 license so very simple way of of modifying now this
is going to modify a single question on the form so if you had like a whole
bunch of questions you're going to create multiple blog or other blog lists or you're going to create some
categories inside of a single blog so that you can filter out which question that you would want those options for so
it's a little and if it's not the same type of checkbox then you would need a different form so in this case you
almost need a Blog per question to be able to modify those options in a way
that you would want to and how this uh how this well wonder if so what if you were to like I mean I think the cleanest
ways to have separate blogs but you could like tag them or categorize them if you wanted to but if the values that
you need to fill in are different yes then you have to have a different form corre okay yeah yeah that's your
only problem is if it's not if it's not all checkboxes then you need a different for like a different option like if you
had different um if you needed radios or something then that would be yeah you would need to set up your form different
so as long as it's the same type of data you're filling in sure I can see that
now for this but it is just a key value pair right it's just a label and a value
label value and I'm actually setting the name of the fields oh I missed that oh I missed that part yeah so in the actual
form what I'm actually doing is I'm setting the field name the label value
on got forx got it so how this is working uh now this is just a modified
checkbox just because um we have to get around an ID issue with uh Foundation 6
forms um so what I've done in the form here is I've added a feeds and it's a total CMS feed and then I have a
checkbox where I'm filling in um I put in the macros that actually comes in
from Total CMS so the field name is the title label is Media uh value is genre
off value is author Dynamic ID and this is the peral link so that Dynamic ID is
the thing that I need added into a checkbox as maybe an option and if the
radio as an option if this was an option that added Dynamic ID you could leave the existing one the way it is and add a
dynamic ID which is allows me to throw in a macro in there that would solve the problem with the current ones so this is
a this is just a modified one that I made and that's it um it's just a checkbox with these options tied to
Total CMS and that allows me to now have a form that is dynamically
changed straight from uh total CMS
nice nice I like it so you want to add a new Option boom done score no need to
open up the rav project I like it very cool right
um all right so uh problem I'm trying to solve or or the
problem I'm going to I haven't done this by the way um so uh let's uh I'm going
show you the the problem that we're going to attempt to play with um let's
see it was Phillip had a should have had this post pre-loaded
let me find it really quick oh it's not new it's let me go to
sort updated all right here I think you responded to
my there it is all right so um Philip
here has a multi-step form okay and uh we we recommended brancher I think
brancher is fantastic okay um and then he actually had an idea of you know
using agent if now I took his idea and kind of ran with it I don't think he really understood what he was saying
here potentially Philip no offense but um and uh but that got that gave me a clever idea of how we could potentially
use agent with multi-page forms i' say
this is going to be for multi-page not necessarily multi-step okay um so
there'll be multi-page forms and then at the end another thing that I want to do I'm not g even going to try this find
this post because I think it was like a month ago um Mr Jones Steve Jones um had
an idea on on like having a final step in a form and displaying that information using P um to kind of like
verify the information right so I thought that would have been cool so um yeah let's go ahead and uh and see if we
can get all this done let's play with it all right so I I started this off while
Josh was talking right now um just so we had something here okay and um uh
actually I should have done this work in preview I think it'll work in preview okay so we can go to step two
oh oh oh hold on okay uh first off we're going to we're going to go to URL step
two all right so um I just have a basic form here on form step one it's just
name email a Smit button that says go to step two and then the action here is a
get URL action okay and it's going to go to slash
two okay actually you should go to SL2 slash okay um I could put the full URL
but it that this should work as well okay um so let's go ahead and preview
this I'm going to fill in um Joe right email we're going to go to
step two and this goes to step two um and if we look it has all the
information in the URL bar score okay so I haven't built step two yet right um so
here's step two um I guess I should have explained what's going on right
here um so I fill out this form this is step one right and then um I put in my email
address okay yeah okay um and then I say go to
step two now what a get um a get URL or
a get action is okay is it takes us to that page and what it does is it takes
all the those form parameters and passes them to the URL okay um Arc does UR L
paramet is a little bit different like you can't see them in the browser bar it shows you in this little window so um
this is the browser bar okay it's just the way Arc does it if you remember I'm testing out Arc The Arc browser but
basically what do it's going to step two and it's taking um those fields the name equals Joe and email equals and then the
email address that I added to it okay so hopefully that makes
sense okay um so again it it goes here it goes through each field this is the
form field name and the form field email and what this does is it takes the
data and it passes it to the URL of the page of the URL that I configured here
okay so now what we're going to do is we need to then continue this form okay now
um but what I want to do is I want to make sure I I store the information from step one
so what I'm going to do is I'm going to quickly add in some hidden Fields okay and I'm going to make this
field name okay and
uh and then hidden field we're going to be email okay the field value actually we're just going to make it blank the
default value is blank okay and what's going to happen is um Foundation if if
it sees you pass a parameter to um the URL it's going to automatically populate
these form fields as if these fields were also populated on the inside this
form okay so what we're going to do now is I'm just going to add in one more um
and we're just going to add in I don't know a comments or something like that
okay okay do
comments lock okay whatever all right so now I have a comments field and now we
need to um now what you could do is you could have a Smit button in here I'm actually going to go we're going to go
one more step for fun okay so we're going to go one more step we're going to get the button stacked we're going to
get the Smit button uh we're going to say um go to final step okay we're going
to do another get action and actually I'm going to add in one more page page
um actually we're going going to duplicate that just to save us a little bit of
time this and say final step okay and in the final
step um we're going to say
submit okay and then instead of that we're going to at this point your submit would probably be an email action or
something like that your your final action you're not going to do any more get you're going to email okay um so
instead of this our final one we're going to get in all data we're going to get in uh
comments right so the final step and then what we'll do is um after we kind
of get this working I I'm going to use pi to display like a summary of that
information and then we can submit it okay um okay so this one oh let's change this
page name to be um slst step three okay and so inside here uh this
get URL action um I want it to be um slash step three
okay save that preview it all right so now I am in I'm in Step One
one we're going to do uh Joe an email we're going to go go to
step two um hello there we're going to go to the
final step right now if you look let's look at the URL for this right we look at the URL in step three you'll notice
that it it continued name equals Joe email equals the email address and com
oops I forgot it should be comments not comment a comment equals and then whatever I typed okay so cool
everything's passing all all the way to step three okay um so we have that
working now I'm going to back up because if you remember Philips post we talked about agent okay and um what if our
multi-step form we wanted to do different um Things based on the data
from previous steps okay from previous form pages okay
now brancher makes that easy um if you're doing like inside brancher right
um it's definitely simpler um and it has a lot of really cool logic um but I
figured it this would kind of be interesting to look at so uh first off let me make this comments instead of
comment a perfect right so um what I do is let's
look at agent okay and actually uh you know another
tool that could do what I'm about to do right now is actually Josh's URL query
mixer right um so um we're going to look at two different agent Stacks um we're
going to look at agent URL okay and what you can do is because all those
parameters are passed to the URL okay you can query for them right so
if I look at a name is equal to Joe okay
so if the name equals Joe in step two to then I can I don't know put something else like you can either have completely
different form fields or there's all kinds of stuff you can do um like you know you can have different form fields
in here you can actually change the complete layout if you want you can do all kinds of stuff at this point um so
whatever you show inside this agent URL stack is only going to be displayed if
the the value of the name field from step one was Joe does that make
sense right um if you got any ideas please feel free to inject
Josh um so okay so let's just let's just put in a header stack in here right just
for fun again you could put in completely different form fields in here like if it's Joe I want to put in an
extra five Fields right or in Joshua's car example maybe if you choose an Su
SUV you get to choose Tire options right or something like that you know right so
so at that point you can completely change your form based on what you know what was chosen before okay um I'm just
going to say hello Joe here okay right so let's test this out just
for fun I'm go over here and um we're going to go um Joe and type in an email
and we're going to say go to step two now up here it says hello Joe because I
put in Joe in that field right right but just for fun let's go ahead and and change that we're going to put
Josh and an email okay and go Bop hello Joe isn't here
right so just to show you how you can now use that um you know this feature this multi-page feature uh in forms and
agent together okay again you can also use Josh URL query mixer okay um pretty
sweet I like this I think I think this is going to be a super really cool thing okay um again
I'm not going to go into a full-blown example I just proven that it definitely works right here and just for fun here
let's go ahead and um I'll add in a different text area Okay um let's just
call this one about Joe okay just for
fun just to show you okay so now let's go back to so when when the name is Joe
we're going to have an extra form field here called about Joe okay we're going to go in here we're going to
preview I'm going to type in Joe since we want to trigger that that logic in field two in step two okay uh we're
going to go to step two now I have an about Joe right so we can go um about
Joe here okay more comments right and I'm going to say go to final step now if
we look at the URL here okay we'll see that I have step three name equals
Joe um email okay and then I also have the about Joe field and that contents
okay in the URL okay here actually let's go ahead and uh let's look at
this here this is probably a little bit nicer to look at
right so if we look at this URL okay we have the name field okay we have the
email field we have the about Joe field and we have the comments field right so all the
fields from all the previous steps including this one that's about Joe that only gets added if name equals
Joe right so pretty interesting um I'm liking it I think I think this is a very
powerful thing uh that we could use for something in the future I think it's a powerful tool to have in our
toolbox um now another thing I mentioned is Agent if right so agent URL uh it it
does check URL parameters or post parameters you can also check whether or not the URL parameter is present or not
right so um you can say like if name exists or if name doesn't exist right so
um in this case if the name wasn't passed from step one maybe we can display something right so you have a
bunch of logic here um and another cool thing is po this will also process post parameters okay
um now what is that Joe okay um so um if we didn't want all of that data passed
to the URLs okay um then we do have more options actually
well before I do this okay a very cool feature of having form data passed via
URL okay let's um I'm going to I'm going to open up I
had this URL right all let me let me put
this all right so I have a URL that has all of this data okay um all right hold
on one one second let me go ahead and just for just for fun in this final step
okay what I'm going to do is I'm going to um I'm going to put in the actual
form Fields so we can actually see them Joe what is the limit on a URL for
the length it is a lot it's um it's like two megabytes or something like
it's it's a ton of text um I think Firefox has the has the smallest um
limitation um we we can look that up in a little bit it's a good question a very valid question um and something you
you'd want to make sure sure you didn't have too much data when you're using this get URL action okay but it is
pretty big um okay so in this final step um it's going to display all that data
instead of it being hidden okay and why why this feature is cool okay is you can
save states of your forms now I think I did this at some point during a live stream because I remember I helped David
day out where we saved the state of a form into a URL so that you can always
get EX directly back to that particular state of the form okay so how are we
going to do that now if we look this was the URL that I got from that right so let's say I want to go exactly back to
the state of this form I just copy this URL let's just um uh let's just preview
this okay so right now I'm not on blank form but what I'm going to do is I'm going to paste that URL that we had from before and guess that blah right there
pre-filled out form just by from a URL right so I remember uh David he
built this solution out where he saved this URL and he he put the URL in a button in his customer's email and all
the customer do is click the email and boom it took into the form pre-filled out with whatever data you know that
person needed right I forget the exact situation but it was pretty awesome and it used exactly what this
is right super power okay now
um went off on that little tangent now let's say we I want to data to pass between my forms without updating the
URL I don't want this data in the URL maybe it has some sensitive data you don't want it saving the browser history
or whatever right um You don't want this there's other ways to do this okay and
so instead of a get action we're going to use a post URL action okay and you're just going to
configure it the same exact way okay so I'm just going to delete so
we're just going to change all of these um get URL actions to be a post URL
action all right um so let's go ahead and review
that um I'm going to say Joe my email
right step two um let's just say go to final step right now um now if you look
here none of the data was passed okay but the data is there okay um how how do
we know that Joe how can I believe you okay so um agent URL allows us to post
uh um uh process post parameters okay and I'm going to process if the name
equals Joe okay if the name equals Joe this text area should should display and
if you looked you remember right oh got to go back
previe so if I go ahead and uh if I fill this out with Joe and put in an email
okay I'm GNA say boom now I know that this worked because this form field
exists now does that make sense right so
because um that form field only exists if the post URL parameter is is Joe
right so if I go back okay if I do Josh
here only that that Top Field doesn't exist right so even though the data is not in our URL the data is still passed
to the HTTP request and we can still process that information with
agent pretty cool okay
um now the question is I I I forget if
you're using post right hold on I'm GNA test something really quick before I I
know what I'm before I say something wrong um let me find those hidden Fields here
if you send post data the hidden Fields won't automatically get the data okay so we're going to have to augment that a
little bit um I'm pretty sure let me just verify that really
quick correct okay so if we use the post Ural parameters okay the postural action
remember on this step how I added the hidden data and it automatically got that hidden data from the URL when we
move from get to post that doesn't happen Okay um so what we need to do is
uh we need to inject that in okay and this is a a a little bit of code okay
but basically you just do um an echo okay uh dollor
poost and then um we're going to put in the the field so
email actually you know what I think oh look at that I forgot I added you can do Post okay even easier you can do Post
request data because I already thought about this and then you can just type in email here that's right so here instead
of custom value you do Post request data and you do name look at that man pass
Joe was brilliant he was brilliant that pass Joe
okay so now um if I go ahead and refresh
this let's see if I um here this is little developer stuff here but I'm
going to go this is the hidden field here now I'm just going to get that field value just to make sure well here
let's let's restart the form thing so we can kind of make sure that we get it all we're going to do let's just do
Josh email okay go to step two I want to make
sure that those those hidden Fields have data this
one zero
y boom there we go the the while you can't see it that that hidden field has
the value of from the previous step so boom Works um yeah very cool uh so we can use
agent URL now another uh agent stack that we have access to is Agent if now
this does require you to have some sort of knowledge um because basically what
you can do is you can write some PHP statements in here to do all kinds of Stu right so um uh yeah you would have to do
something like if you wanted to process these post URL parameters you could do something like um dollor poost um
email okay um you know equals or doesn't
equal um you know something you know you know support you know whatever okay um
so you can do other things and you can also do some PHP fun if you got really fancy you could be like um string starts
with Joe or something like that right there there's some I'm not going to go into all the various bits of PHP you can
add into here um if you know a little bit of PHP Scott definitely probably I
know Scott uses this a lot you can do all kinds of interesting logic here um
that evaluates to a true or false statement in PHP and at that point here you can then do add else and else if
statements right so You' be like if this else if this and then have like a catch all at the bottom so um this is a very
definitely a more advanced stack um but you could take this logic that we've been kind of working with and take it
definitely to the next level and do some really cool stuff okay um all right last uh last
thing here is I want to go ahead and in the final step uh I'm going to go ahead and I'm going to delete all of these and
we're going to add in our hidden Fields again uh this is name and emails I'm I'm
going to delete this and just take the comments so we have name name email and comments in our um final step okay
um there and then uh we want to add the third one which is
comments and this is all going through the post request data okay and so let me make sure I yeah I did post request
there right so now what I want to do is um Step One connects n collects name and
email step two collects comments okay and then the final step we want to
display that information as like confirm your data here basically okay so um we could do
that pretty easily with pod right so uh let's go ahead and uh let's do
that so this is part I'm really excited about okay um let's just add
Pi I should have gave Pi a different name so that like everything has pi ha that okay
um so we're going to need to
um let's do like piie or let's do like show name okay um
and then this is going to be process formula as text and all it's going to be
is um main
okay I don't use Pi very often I'm pretty sure this is this should work okay then we just do email okay and then
we do email okay and then uh we just
do comments so you're going to have to add one of these for every form field so if you have a lot of form Fields it
could be a lot and it is a little monotonous because it's just basically telling Pi
um he get get just the name field you have to make sure you process formula as
text because normally Pi is meant for math okay but we're we're using it for text here
okay and um let's just show this snippet so then basically wherever I put this
okay so pi show name it will display that it will display the name okay so
what we're going to do is I'm I'm just going to go ahead and let's just uh I'll keep it simple I'll just do a header
stack okay um and I'm going to do um Name colon okay and then it's this class
span show name okay so we're gonna do there Way Joe to use that for that select option I was doing earlier where
would you could actually have it show above that field the name of what we selected that's what I said earlier is
that like you could use Pi for that that's what I was thinking right you could potentially use pi to show it
as you're doing it right so instead of you writing your own JavaScript and that's kind of what Pi's deal is you
know what I mean is anyways yeah yeah we got I got to play with that okay um oh
here uh we're g to make make my life a little easier what we're going to do is I'm going to um so inside Pi you can
provide a prefix so on this in this one I want to pre prefix it with name okay
um and then here I'm just going to do PI show name here uh Pi Dash show Dash
name okay and that that should do it right we don't need to show this STI
anymore so what what this even though I have named colon here we could put whatever the heck we want in here it doesn't really matter it's just going to
it's going to replace it okay so
um okay just to show you how so the header doesn't matter what the contents is
because I have I put that Pi class as the class of the header and then Pi I
told it to prefix the value with Name colon so it's going to be Name colon and then the name does that make sense okay
so then all I'm going to do is just going to copy and paste this and we want to do piie show
email okay and in here I want to prefix this with um
email okay and and then here we're going to do uh Pi show
comments okay and here instead of a header we'll make that one a paragraph okay
and should do it right oh prefix uh
comments all right this should do it so um once we go
to step three we won't see any of the form data we'll see the form data as
text on the page but we still have a submit button that allows us to submit
that data okay so let's uh let's see if it all
works all right so here we have our step one I'm going to do um Joe and we're going to do
support fill it in okay go to step two um some comments we're going go to
the final step oh what the heck happened here what I do
darn it joshu broke unexpected token and what did I do
here Scott brought up an option if you were just trying to display the fields you could put a disabled input field
back in there but if you're wanting it to very true yes that that's I'll show
that yeah I could show that you could just show uh you could put in the input field and just disable it very good
point Scott um but by doing it this way maybe you could you know it could would
look like actual text on the page you know maybe look you know then you can style a text or do whatever you know um
but yeah I that's a great Point Scott um let me see if I can figure out what the heck because if you wanted to have like
um printer stack right and then you wanted to display the text from the fields into a printer stacked deal you
could do it this this would be the way to do it
it Jake R thing no it's
not
freaking me
heck do I have to do I do do
this I think I have to do
that let's
try oh oh interesting it's hold
up oh there's no post data oh I got to restart the form because you can't just refresh the page because there's data
that ain't gonna work yeah that looked like it worked though
all right so uh you just needed to put it into quotations
yeah oh wait that how come the Raw data
is why is it displaying the
PHP the oh wait my file name is is HTML
rookie rookie make sure you page your
Jesus because I took agent off and agent changed it to PHP and this that's a
dangerous thing when it auto changes it auto changes back yeah that is that is definitely dangerous this is very
dangerous all right just a quick lesson everybody when you create a new project file go ahead and go into advanced and
default extension should be PHP okay
okay third times a charm go
boom step two my comments final step boom there we go and
if you click submit it would do the normal form action can you just quickly show again
what what you did on the pi stack sure like the name yeah so when um because Pi
by default it it thinks you're it wants to do math right that was originally why Pi was developed okay yeah yeah um so if
you want to make sure that the Val this value is a string okay then you need to put uh the
the the contents in here inside double quotes as well as check this Box's process formula as
text and then you put that P name show name on the header stack yeah so so yeah
um whatever you set as your Pi name it's going to be Pi Dash whatever as the
class and if you ever forget to say show snippet and you can see the classes right here piie show name right so at
that point um now I show a span and you can put span wherever but we already know classes and I know if I just put
that it's going to replace the contents of whatever has this class with the
contents make sense
indeed so there you go um and for fun here let's let's quickly show off uh
Scott's idea I'm going to duplicate this form so we have both of them in the project file when I send them out here
I'm going to I'm going to get rid of Pi in this first example and I'm going to
get rid of the Hidden data okay um and
what I'm going to do is I'm going to copy the copy that and
then copy these two move that submit down move
these comments and then what we're going to do is we're going to oh but now we
what we're going to have to do is in order to get the default value here from the post data because um because we're
using post instead of get if you're using the get you don't need to do anything here this will just work uh
well you will you will want to set these to be read only so you would set all of these uh all of these to be
readon okay um but because we're using post and not get if you're using the get
request you'd be done at this point because foundation will autofill the get request as the value okay but because
we're using post we're going to have to do uh that little bit of that PHP Snippets so we're going to do um Echo um
dollar poost square bracket uh
name semicolon close PHP all right so that's the
name interesting that does mess up things in in edit value but it it will work right and then we do
that but this is email and then this is going to be uh
comments actually I bet you if I did instead of double quotes if I use single quotes here it probably wouldn't mess up
edit mode there we go
yeah because HTML is stupid it's not intelligent I should say
it's not that HT HT isn't good okay so there we go um now let's well we'll have
to redo the whole thing because we're using post so we're going to go here
um show email
go whatever final step and there we go so now we have this this first example
is uh you know kind of re we made these fields read only so you can still see the data and then you can submit or this
one it shows you know text a text ual version of the data which at that at this point you can style it any way you
want with columns and swatches and all kinds of stuff right so two different implementations they both should work on
the second one just a little bit fancier using pi and then you can style it any way you
want pretty cool awesome what do you think Josh I
it's actually pretty cool I think it's pretty awesome trying to figure out how I do it in my in my case where you're
pulling the data out of feeds and how that would work
um seems trickier yeah what do you think about the agent thing you think that
interesting I think the agent thing uh opens up some possibilities I think it's going to be very specific needs for that
but I think definitely no and I think it's actually pretty awesome because
it's just one more tool in your tool box of ways to to do things yep you
know um I think there could be some very powerful use cases for using agent in
that aspect sweet I appreciate it I I know you got to uh get going uh so uh thank
you for popping on and I I think we're done anyway let's see if there's any other questions that I
uh oh no I think we're good I think we're good I sent you off that project file so you have it there awesome thank
you very much everyone I'll I'll make sure I post this uh to the uh the event for this live stream I'll just post a
download link um in the in the comments there so you can go get this project file um I'll upload that in a few
minutes okay everyone sweet thank you very much for coming on hey no R thank
you very much everybody hopefully we'll see you on Friday Hangouts be there be square see you
then bye cheers