Transcript

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