Transcript

00:07 hey everybody joe workman here and this
00:09 is our last final and third video of the
00:12 foundation getting started videos
00:14 now if you haven't watched videos one
00:15 and two i strongly recommend that you go
00:17 back and watch them
00:19 because we're building upon them inside
00:21 this video right now
00:23 um so in this video what we're going to
00:25 do is we're going to add some content to
00:27 the last page in the project the third
00:28 page
00:29 which is the contact us page so we're
00:31 going to go over and add a simple form
00:34 and then we're going to review some
00:35 other things and see how foundation can
00:37 help us with
00:38 seo and optimizing our websites for
00:41 search and search engines
00:43 so without further ado let's jump on in
00:47 so here we have the main project file
00:48 that we've been working on the past
00:50 couple of videos
00:52 and as you see we haven't added any
00:53 content to this page
00:55 so let's go ahead and start building out
00:57 a form
00:58 on this page so let's open up our stacks
01:02 and um just for the sake i'm actually
01:04 going to add just a simple small little
01:06 paragraph
01:07 above the um the form just so it looks
01:10 looks nice normally you have a little
01:11 bit of text or something like that
01:13 before the form right
01:14 now in our earlier video i did already
01:16 change the um
01:17 the header to be you know contact us and
01:20 again
01:20 this is the global header that has saved
01:22 across all pages using the partial
01:24 but the text within it is unique to this
01:27 one page
01:29 okay so i've added a paragraph stack
01:32 and now let's go ahead and add a form
01:35 below it
01:36 now for forms what we're going to do is
01:38 you always want to add a
01:40 form base stack and then all of your
01:43 form is contained
01:44 within the form base stack what we're
01:47 going to do is we're just going to
01:48 create a simple
01:49 um form a contact us form so we're going
01:52 to get the user's name
01:53 email address and some comments okay
01:57 so we want to start by using a simple
01:59 text input
02:02 and if we drag the text input in we'll
02:04 see that it adds and we're going to add
02:06 two text inputs
02:08 and then we're gonna add a text area
02:10 below that
02:11 which is the bigger text area now we
02:14 need a button to submit our form
02:16 so we're gonna go up and find a
02:17 foundation button
02:19 and we're gonna drag that into the form
02:21 as well
02:22 okay so that is the basics of our form
02:26 uh we have this all the stacks we need
02:28 let's go ahead and start looking at some
02:30 of the settings
02:33 so first we're gonna actually gonna set
02:35 up all the field ids and names and
02:37 whatnot
02:38 so for the first input this is gonna be
02:39 our name so we're gonna put in
02:41 um name as the placeholder and then the
02:45 field
02:45 name okay we're gonna call that this
02:47 seems to be unique for each field
02:50 okay we're going to call that name all
02:51 lowercase
02:54 then here on the next one i'm going to
02:56 go ahead and say this is
02:57 email address
03:01 and then the name is going to be email
03:03 now the field name
03:04 should be no spaces just all characters
03:08 and and digits as well as is possible
03:11 but you should not have any spaces in
03:12 the field name it should just be a
03:14 straight
03:15 um you know word something simple keep
03:17 it like name
03:18 email if you want to do first underscore
03:20 name last
03:21 underscore name things of that nature
03:22 you can do that as well
03:24 um and then on this text area we're
03:26 gonna say um
03:28 insert your comments here
03:33 and then we're going to call this field
03:35 name comments
03:37 okay and let's make it a little bit
03:38 bigger let's make it five
03:40 rows high okay now on the button stack
03:44 uh we're gonna have to change a couple
03:45 of the default settings to make it work
03:47 with a form
03:48 so in the foundation button stack you'll
03:50 see that there's a type and when you
03:52 look at that there is gonna be a
03:53 type form submit and that's what we want
03:56 right now we wanna
03:57 type form submit and then we're going to
03:59 change the
04:00 button text to be submit okay
04:04 and then let's go ahead and actually
04:06 change our style of the button i think
04:08 it would look really nice if we
04:09 inherited
04:10 that swatch color that we had set that
04:12 uses for top bar
04:14 and for the footers right and let's go
04:17 ahead and jazz it up and we'll actually
04:18 make it a
04:19 ghost button so that looks really nice
04:22 it kind of gives you just an
04:23 outline of the purple and then when you
04:25 when we hover over it in preview it'll
04:27 it'll look
04:28 really rich okay so that really
04:31 sets up all of the fields right really
04:33 simple we have a name
04:34 email address users comments now if you
04:38 want you can actually set uh
04:39 fields to be required as well right
04:43 so if we want to make sure that these
04:44 fields are required
04:46 inside the name field if we want to make
04:47 sure we have that we can say validate
04:49 field
04:50 and then we can say required now when
04:52 you validate a field you can make sure
04:54 it's just words
04:55 so basically anything you know which is
04:58 probably what you want for a name
04:59 because names could be various things
05:02 okay and we want to make sure that it's
05:03 required so we check the required box
05:06 and then you can give it a custom error
05:08 message that the user will see
05:10 if they don't fulfill that validation
05:13 okay
05:15 next is email address if we want to make
05:17 sure that is required we can validate
05:19 that
05:19 set that to be required and then in here
05:22 we have an email rule
05:23 actually so you can go ahead and set the
05:25 rule to email
05:27 so now let's jump into the form base
05:29 stack
05:30 in all of its settings okay
05:35 so by default we send an email
05:38 and this is really simple to set up when
05:40 we go to the email setup
05:42 we're going to want to make sure the
05:43 from address okay
05:45 now depending on your hosting company
05:47 you you have to use a domain
05:50 that is actually a domain that's hosted
05:52 with your host
05:54 so like for example i would put in
05:57 support
05:58 dot jo joe workman.net right if i could
06:01 type
06:02 okay so because my host is already
06:05 hosting the joeworking.net domain
06:08 they allow me to send emails from an
06:10 address that
06:12 is that domain right now
06:15 you could use custom smtp options as
06:17 well if you want to use maybe your gmail
06:19 account
06:20 or something of that nature that is
06:21 possible but if you just want to use the
06:24 built-in
06:24 mail mechanism that's built into your
06:26 apache web server
06:28 then you can go ahead and just put in
06:30 this use the same domain
06:33 as the domain that's hosted
06:36 next you can add a reply to address so
06:38 if you if your from address is like
06:40 a no reply joeworkman.net you can
06:43 actually set a
06:44 reply address as well
06:48 now the to address uh you can or the
06:50 address that you want the email to go to
06:53 right now you can actually set up two
06:55 different recipients
06:57 uh to be to be sent here okay now
07:01 let's say for instance i wanted the
07:03 customer the person that actually
07:04 submitted this email
07:05 to get a copy of this email
07:08 that is possible as well and the way to
07:11 do that is to use some built-in
07:13 um template variables that we can use
07:17 now if you remember when we set up these
07:20 fields for name and email address
07:22 we set up the field names to be name and
07:25 email
07:27 so if i want the first email address to
07:30 be the actual email
07:31 of the person that filled in the form i
07:34 can go ahead and use
07:36 curly brace curly brace email which is
07:39 the name of the email address field
07:42 and then two curly braces after it
07:46 and i could do the same thing with the
07:47 name however obviously i'm going to be
07:49 using
07:49 the name because that is the name of the
07:52 name field that we set
07:53 so curly brace curly brace name and
07:56 curly brace
07:58 then if we look at our message we also
08:01 have message from
08:02 and if you notice the default on this is
08:04 actually already a variable called
08:06 name okay so here we have a message from
08:09 name
08:10 now maybe if this email was going to
08:12 that person you wouldn't want to have
08:13 that you want to change the subject to
08:15 be
08:15 something else right maybe thank you for
08:17 your message or
08:18 something of that nature but really
08:22 that's the basics and once you publish
08:24 this this will
08:26 submit the form you should receive the
08:27 email to the address that you defined
08:29 inside the stack
08:32 now in some cases if you want you can
08:34 actually send two completely different
08:36 emails as well and that's if you use
08:38 email setup number two
08:40 and the settings here are identical to
08:42 the ones that we received
08:43 or in that we just went over
08:46 now also you can create a custom email
08:50 template
08:50 and when you check this custom email
08:52 template you can
08:54 actually define your own custom email
08:57 here inside the stack and if you notice
09:00 here you can actually define and use the
09:02 variables
09:03 from the form inside the email
09:06 so in this instance we're going to have
09:08 the in the user's name
09:10 from the from the form as well as the
09:13 comments field
09:14 inserted into the email
09:17 and again these template variables are
09:19 curly brace curly brace
09:21 the name of the field and then close
09:23 your curly braces
09:25 so that basically does it for the basic
09:27 structure of our site right
09:28 we've now have a uniform site header
09:32 content area you know the outer part of
09:34 the content area defined as well as the
09:36 footer and they all sync across all of
09:38 our pages
09:39 using partials now in this video we went
09:42 over
09:43 how to edit a form and create forms
09:46 and they're really simple to use now we
09:49 just use
09:49 input fields in there but you can get
09:51 actually some column stacks
09:53 inside your form base to actually you
09:55 know have your
09:56 form fields laid out in columns that is
09:58 definitely possible and it's easy to do
10:01 just drag and drop your column stacks
10:02 inside the form base
10:04 and it'll work just as you would expect
10:05 it to now the form stack actually does a
10:08 lot of other stuff
10:09 such as you know submitting stuff to the
10:11 sql databases and whatnot
10:13 and you know look for more advanced
10:14 tutorials on that or our documentation
10:16 portal on how to do those things
10:18 now right now there's one last piece
10:21 of a website puzzle that we need before
10:23 we can really say our website is
10:25 complete
10:26 right and that's making sure that search
10:29 engines can actually see
10:30 our websites okay so now let's jump in
10:34 and see exactly kind of what things we
10:36 need to tweak to make sure that our
10:37 websites are performing optimally for
10:39 search engines
10:41 so here we have our home page and let's
10:43 go over some of the raw
10:44 really basic things that we need to make
10:46 sure we have
10:47 for search engine optimization now
10:50 obviously built into rapidweaver we have
10:52 the browser title
10:53 and we should have a browser title set
10:56 for every single page okay so for the
10:59 home page i'm just going to go ahead and
11:00 say getting started
11:02 with foundation now for all my sub pages
11:05 i want to make sure they also have
11:06 browser titles
11:07 as well as you probably want to change
11:09 the default folder names
11:11 for every single page that you added so
11:13 in this particular instance i want this
11:15 to be
11:15 slash about okay and our browser title
11:18 is going to be about us
11:21 and then same thing for your contact
11:23 form you want to make sure you change
11:24 those from the default
11:27 now the next thing you want to make sure
11:29 is as you're building your content
11:31 now we did that during this site is
11:32 we've added headers right so you add
11:34 headers to kind of divide your content
11:36 up into
11:37 sections so that the search engines know
11:40 exactly kind of what the main topics
11:42 about a particular web page is
11:44 right now the next thing that we
11:48 we can do is and this is where
11:50 foundation comes in to help is
11:51 there's an seo helper stack built into
11:54 foundation
11:56 now when we add the seo helper stack to
11:57 the page you'll notice there's a small
11:59 blue button
12:00 and when you click on that plus button
12:02 you'll see that there are
12:03 tons of different meta tags that we can
12:05 add to our web page
12:07 so we can add stuff for facebook and
12:10 facebook open graph is kind of an open
12:11 standard that
12:12 some more social networks outside of
12:14 found outside of facebook
12:16 actually have um implemented so they
12:19 look for these tags as well if they're
12:21 available
12:22 but when people share your websites on
12:24 facebook
12:25 or if you use the twitter cards that are
12:27 here okay and people share your websites
12:29 on twitter or facebook
12:31 these meta tags describe your website
12:34 in more detail for those social networks
12:38 so it's what image is going to be
12:39 displayed what title
12:41 what description okay do you actually
12:43 want to show
12:44 when users share a particular webpage or
12:47 any page on your website
12:50 we have things like geolocation where if
12:53 you are an
12:53 actual physical location you can
12:56 actually put in the gps coordinates
12:58 of latitude and longitude for your
13:01 actual location
13:02 this is great if for local searches so
13:05 if you're let's say a cafe
13:07 and you're uh you know you have users
13:10 that are in your area
13:11 that search for cafe google will know
13:13 their location
13:14 and show your search results as a
13:16 preference if they are close to you
13:19 right and also on desktop search you'll
13:22 see nice location information about your
13:24 particular site
13:25 when people search for you
13:29 next we have robots which controls
13:31 whether or not
13:32 search engines can actually index your
13:35 site
13:37 we have page description which is
13:39 normally something that is specific to
13:40 each page
13:42 and it just does find a description that
13:44 will be displayed in the search engine
13:46 results
13:47 about this web page next is structured
13:50 metadata
13:50 and this is a lot more than i'm going to
13:53 go over right now but we have
13:54 more detailed videos on structured data
13:57 but this allows you to really provide
13:59 rich data snippets about your company
14:02 about yourself
14:04 to google and other search engines okay
14:07 such as you know what is my company's
14:10 logo what is my company's website
14:12 what is my social profile so if we were
14:15 to contain
14:16 uh you know a schema type of social
14:18 profile
14:19 you can actually provide all of your
14:20 various social networks
14:22 so you know tumblr youtube twitter
14:25 linkedin instagram youtube all of those
14:28 will actually be displayed
14:30 um in your in if someone searches for
14:32 you on google
14:33 it's really really great and last but
14:36 not least
14:36 is a new child of uh of
14:40 seo helper and that is page speed
14:43 now page speed doesn't have any options
14:44 but what it does is it is it analyzes
14:46 your web page before it sends it to the
14:48 browser
14:49 and moves all of the necessary
14:51 javascript to the
14:52 end of the page but it does give your
14:55 your site
14:56 a slightly higher one or two point
14:58 ranking increases
15:00 um for search engines when they analyze
15:03 you know the speed page tools and stuff
15:05 like that
15:06 this will give your your your sites a
15:08 small bump
15:09 in page speed but every little bit
15:12 counts right
15:13 now that does it as a just a basic
15:15 overview of seo i mean seo is a
15:17 you know book up unto itself that you
15:20 know goes into you know what content
15:22 you know do you use alt tags in your
15:24 images there's a lot of data
15:27 for seo and some of it's black magic
15:30 some people say this helps and some
15:31 people say it doesn't
15:32 right but what seo helper stack does
15:36 is it gives you the exact meta tags that
15:39 you could need
15:41 to improve your visibility for search
15:44 engines and social networks
15:46 and there's so there's no searching
15:48 around for what you need this
15:49 gives it all in one spot for you in one
15:52 convenient location for you to add
15:54 now if you throw seo helper inside of a
15:57 partial you can actually
15:58 share those meta tags across all your
16:01 site right
16:02 now some meta tags such as these page
16:04 description
16:05 is probably going to be something that
16:06 you want specific to each page
16:09 right so that's probably not something
16:11 that you'll add to a partial
16:13 but so you might have some seo helper
16:16 stacks in a partial
16:17 and then you can have other ones that
16:18 are specific to the page
16:20 right so this really gives us a lot of
16:24 flexibility because
16:25 maybe you don't want location services
16:28 uh meta tags on your site
16:29 for example um this is my office
16:32 right is it is my home and i don't want
16:35 that geolocation information
16:37 known by search engines so i don't have
16:40 that on my website
16:41 but i will have information about you
16:43 know facebook so if people share my
16:44 websites on facebook
16:46 what information is gonna be shared okay
16:48 on twitter right
16:50 what's my page description what is my
16:52 social profile what are my social you
16:54 know all my social
16:55 information about my company and myself
16:58 right
16:58 so this really gives us a lot of power
17:00 and flexibility
17:02 because we can choose exactly what we
17:04 want from a predefined list
17:06 of the most popularly known meta tags
17:09 so i hope this helps out everybody i
17:11 hope you've enjoyed this getting started
17:13 course
17:13 i hope you've gone through all three
17:14 videos and it's given you a better
17:17 understanding on
17:18 how to use rapier 6 and stacks 3 and
17:21 foundation 1.5
17:22 to really develop and design powerful
17:26 websites
17:26 right and easily as well as you saw it
17:29 was a little bit of work in the first
17:30 video to get all of our page done right
17:33 but then in the second video we you know
17:36 standardized all of that across our
17:38 entire website
17:39 really quickly using partials and then
17:42 this last one we saw how easy it is to
17:44 create forms
17:45 which everyone wants a form right and
17:47 then how to optimize our sites
17:50 easier using seo helper so i hope this
17:53 helps you out
17:54 i hope that you enjoy it and i hope you
17:56 love foundation
17:57 and go forth and make your websites
17:59 great thanks everybody bye
18:14 you"}]