hey everyone I wanted to do another
video for Stax apps stacks.com this one
is for F6 Auto mask this one is pretty
cool Scott did some neat stuff here
um so basically what it is is it allows
you to control how input is is handled
inside of a a form for you know
collecting information so you know it's
let me just show you let me stop talking
about it let me just show you so I'm
going to just
go to my templates
that we have and I'm going to just drag
in
a contact form okay so these are pretty
standard
and it's just the one that you know
Joe's made for us and turned it into a
template so here you go
pretty simple name email comments okay
so now what I'm going to do is get the
let's see the F6 Auto mask stack and I'm
just going to drag and drop it down here
now
by default it has the show instructions
in preview and underneath that there is
the method which is set to Auto float
you can also choose mask and we'll go
over those differences in just a little
bit
under the controls you have target class
prefix characters and suffix characters
so not a lot of settings but you don't
really need a lot of settings this is um
this is one of those
enhancement sort of stacks that just
works really well with Foundation six
and other forms I'm sure but you know we
here at uh Stacks base camp we we use
Foundation six
so okay
so let's go ahead and look in preview
and see what the settings are
so Auto F6 Auto mask settings you know
we have kind of an overview of what each
thing is and somewhat what it does and
then some notes this is very handy
um and I'll show you I'll do something
with the the digits to give you an idea
but you know you can do stuff like this
you know if you want a phone number to
be in a specific format or the you know
the time you know or even like numbers
like this
um this stack allows you to make sure
that you you have what you need when
someone submits a form okay
so let's go ahead and just do a an
example so I'm going to use a phone
number as an example okay so I'm going
to go back to my Foundation six Stacks
come down to the form oops went a little
too far and then I'm going to do text
input
so let's say that I want to have a phone
number okay so I'm going to do phone
the input field is just going to be what
I think the phone number should look
like
so I want it to be in this format so
four five six dash 7890 okay so this is
the format I want parentheses around the
area code I want a space after it I want
the first three digits and then I want a
dash before the last four digits okay so
that's what I'm looking for that format
my label I'm just going to name it phone
okay and so down here under custom class
you're going to need to set a class so
I'm going to say phone
I'm going to say contact
Dash phone
okay and then I'm going to go into F6
Auto mask and set the target class to
contact Dash foam
okay now let's see what we have
so when masking I want to I want to this
is a masking situation so
nine is the thing that I need two equal
digits so
super super easy
to set up so I'm going to select a mask
and you have mask pattern so I'm going
to do my parentheses I'm going to do 999
space
999-99999 okay so that is the format
that I want to do
now before I actually do that let me let
me put a one here to disable this class
just so we can see how the form
Works without the auto mask okay so if I
put in you know my phone number
you know I can keep typing
but you know all this fun stuff in there
and keep typing that's that's just a
recipe for disaster you know you can
have it
um you can have submissions that are
just you know crazy looking so
this stack helps you to ensure that you
you get the data in the right format so
now that I have the target class set
properly
I can go in and just start typing you
know let's see my phone number is this
now I'm still typing on my keyboard but
it's not putting any other digits in
because I have kind of locked it down to
just this number of digits in this
specific format okay that's pretty
freaking cool
you know you can do that
it doesn't and right now I'm typing
letters on the keyboard and it won't let
me type letters
I can't type special characters like an
asterisk or a percent sign it has to be
letters
so that's just a really really good way
to you know get information that you
need in a specific format that way later
on you're not having to go through and
format it yourself you know this is all
about saving time all right so there's
that now
let's see what else can we do here
Auto float let's say that you have you
know you want to put in a cost of
something right or you want someone to
put in the cost of something so I'm
going to just copy and paste this phone
down and we'll just do cost
and the placeholder I'll just put you
know
ten dollars
and for the label I'll put cost and down
here I'm going to put contact cost as my
as my custom class and then down here
I'm just going to copy and paste that
and I'm going to set this to cost
okay and so instead of okay so I'm going
to do auto float I think I change this
there we go let me put that back to mask
all right so here we go so Auto float
now
this is really cool too so right now
let's just you know see what we have
if I start typing in numbers
so it's giving me a comma
after the thousandth separator right
which is you know what I want right here
so I can actually make this whatever I
want what if for some silly reason I
want to uh an asterisk right so I can
put that there and for every thousand
separator it's going to give me uh and
well I did until I went a little too far
here let me do that again so there see
I'm doing thousands and it's giving me
an asterisk instead of the comma which
is cool
um but what's really neat is you can put
a dollar sign in here since this is a a
cost so I'm going to put a dollar sign
as the as the prefix so when I click in
here and I start typing and I then go
away
it has the dollar sign already for me
that's very handy okay
now let's see
so for what I want to do now is
like let's say I need you know the max
number or Max decimals okay so this is
the max decimal places so if I put in
three right
and I started typing
see how I gave me the 1000
222.222 but as I keep typing that 222
that point stays in front of the last
three numbers right if I change that to
two not thirty two two
because I want to ensure that someone
puts in you know a dollar amount with
the right cents I can do you know this
so 12 000
323 dollars right let me put the dollar
sign back in there
so there we go
one million two hundred and thirty four
thousand four hundred and thirty four
dollars and 43 cents and I'm again you
know I'm typing
letters I'm you know I won't let me type
anything more so that's pretty cool
um
you can also do a minimum number of
decimals and then you know a decimal
separator
so instead of the period you can have it
you know maybe a dash or something else
whatever you want
okay so let me show you the date thing
as well so let's say that you have a
form not a date picker but you want
someone to actually input a date okay
maybe it's like a a date of arrival or
something so I'm just going to take this
text input copy and paste it
so I'll do date
and I'm gonna do you know like
12 dash
12 or let's do
12-01-2023 so December 1st of 2023
that's my example date right
I'm going to put date
there
and down here under custom class I'm
going to set date
and then
I'm going to come down here and I'm
going to paste copy and paste this
and do date
and so this one instead of float I'm
going to do mask now
let's look at our cheat sheet so
for year month and day it's a capital y
m and d so that's pretty simple all
right
so for this what we're going to do is
instead of this mask pattern
I'm going to do
mm
Dash
DD Dash ear your your year okay
and so now when I look at this
and I go to my date I'm going to type in
you know my birthday so 7 24
80. there you go I was born July 24th
1980 and I can't type anything beyond
that which is really nice or maybe you
want it to be instead of dashes you want
it to be
um forward slashes you know that's
another common format so I'm going to do
oops
there you go
whatever the 23rd month is in the 33rd
day of that 23rd month in the year
4445. who knows maybe in the future
they're going to have more months in a
year and more days than a month I don't
know but there you go that's the format
that you can do
or that's a way that you can format your
information you know just another way so
you can do this all day long you know if
you wanted to have
you know for some some reason you're
collecting Social Security numbers you
know
oops one two three four
say social
not SoCal social
okay then down here we'll do social
come down to Auto mask
and I'm going to put in here social
spell it correctly and I'm going to do
just uh
999-99-9999 so in here in the states
it's you know our social security
numbers are three and two then four
right
so in here I'll just type in two three
four five six seven eight nope oh I
didn't do something right what did I not
do right
I misspelled it down here too
social
all right
so we go one two three four five six
seven eight nine so there you go
gotta properly formatted social security
number now just be careful if you're
collecting Social Security numbers I
don't know what you would be collecting
them for but this is again just an
example of how you can format data so
good job Scott
um this is a really really nice stack so
you guys can pick it up over at
stacksappstacks.com and uh yeah just you
know have fun with it it's really nice
so okay I'll see you guys later