1
00:00:00,390 --> 00:00:06,770
In this lesson we'll create the contact page shown in this example.

2
00:00:06,790 --> 00:00:13,060
This is the completed version here and this is what we'll be creating the page will consist of a map

3
00:00:13,510 --> 00:00:22,360
that shows a graphical illustration of the location using Google Maps and the address is this one here

4
00:00:24,920 --> 00:00:26,240
underneath the map.

5
00:00:27,420 --> 00:00:38,320
We have some contact details and we also have a contact form the form asks the user to provide their

6
00:00:38,320 --> 00:00:47,670
name email address and message The form also has validation using P P and Ajax similar to our registration

7
00:00:47,670 --> 00:00:54,920
and log in forms if the fields are left empty and the user tries to submit the form.

8
00:00:54,920 --> 00:01:02,850
You can see that we get an error alert displayed in red the form data is transmitted to a specified

9
00:01:02,910 --> 00:01:10,790
email address using a p HP library known as P HP Mailer will explain more about that once we create

10
00:01:10,790 --> 00:01:23,670
the PDP script for now let's get started on completing our contact dot BHP page.

11
00:01:23,870 --> 00:01:26,290
So this is our current contact DOD Page.

12
00:01:26,330 --> 00:01:30,620
Page let's go ahead and open it in our text editor

13
00:01:36,140 --> 00:01:38,610
and we need to make some basic edits.

14
00:01:38,720 --> 00:01:40,700
So first change the title

15
00:01:48,840 --> 00:01:50,670
also need to change like thirty five

16
00:01:57,620 --> 00:01:59,520
remove the navigation code block

17
00:02:05,980 --> 00:02:14,560
and replace it with the P. HP require statement over here we're going to change contact business casual

18
00:02:14,560 --> 00:02:17,160
to contact the perfect cup

19
00:02:23,570 --> 00:02:25,340
We'll also change the email address

20
00:02:27,990 --> 00:02:32,300
right now it's just using an example e-mail address but we'll change it to something more relevant.

21
00:02:32,310 --> 00:02:34,380
Even though we don't actually have this email address

22
00:02:49,710 --> 00:02:53,200
so just to point out this is strictly just text data.

23
00:02:53,200 --> 00:02:58,600
It has nothing to do with our contact form or where this email will be submitted.

24
00:02:58,600 --> 00:03:04,270
All that will be taken care of in our HP script which will program later on and we'll change our footer

25
00:03:04,690 --> 00:03:04,960
your

26
00:03:16,150 --> 00:03:18,890
now with that complete we can go ahead and update our map

27
00:03:23,180 --> 00:03:28,840
some to scroll up to the code block that represents the map and it's located in here.

28
00:03:29,010 --> 00:03:36,430
This entire code block here right now we have a very general map of the United States.

29
00:03:36,450 --> 00:03:41,520
We want something that's specific to this address here.

30
00:03:41,970 --> 00:03:46,820
You can see in the example that it zooms in to that specific location.

31
00:03:47,280 --> 00:03:51,790
So to embed a map we can do so using Google maps.

32
00:03:51,790 --> 00:03:56,680
So the first thing we'll need to do is go to maps that Google dot com

33
00:04:03,560 --> 00:04:05,270
and I've copied this address

34
00:04:09,010 --> 00:04:16,630
when it pasted into this search field and click the Search button.

35
00:04:16,630 --> 00:04:26,440
Now I'm going to click this icon here the menu and click share or embed map.

36
00:04:26,460 --> 00:04:32,640
Now we don't want to share a link we actually want to embed the maps or click on the embed Map tab and

37
00:04:32,640 --> 00:04:37,500
copy this entire line of code in this text field here.

38
00:04:37,500 --> 00:04:44,840
Don't worry about the size we can always modify the size in our in our script so I've copied this code

39
00:04:47,410 --> 00:04:56,200
and exit this window now and I'm going to replace the existing map with the new code

40
00:04:59,860 --> 00:05:07,320
and we will need to change the size somewhat and change it to 100 percent with my 400 pixels light.

41
00:05:07,720 --> 00:05:11,100
And press refresh.

42
00:05:11,140 --> 00:05:19,730
So as you can see we're now zoomed into our location and that makes it obviously a lot easier for visitors

43
00:05:19,730 --> 00:05:20,820
to find us.

44
00:05:20,840 --> 00:05:21,130
OK.

45
00:05:21,170 --> 00:05:28,590
Just save the page now and refresh just to make sure that all your changes have been reflected on the

46
00:05:28,590 --> 00:05:33,190
page and in the next lesson we'll get started on the contact form.