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