In this lesson we'll create the contact page shown in this example.
This is the completed version here and this is what we'll be creating the page will consist of a map
that shows a graphical illustration of the location using Google Maps and the address is this one here
underneath the map.
We have some contact details and we also have a contact form the form asks the user to provide their
name email address and message The form also has validation using P P and Ajax similar to our registration
and log in forms if the fields are left empty and the user tries to submit the form.
You can see that we get an error alert displayed in red the form data is transmitted to a specified
email address using a p HP library known as P HP Mailer will explain more about that once we create
the PDP script for now let's get started on completing our contact dot BHP page.
So this is our current contact DOD Page.
Page let's go ahead and open it in our text editor
and we need to make some basic edits.
So first change the title
also need to change like thirty five
remove the navigation code block
and replace it with the P. HP require statement over here we're going to change contact business casual
to contact the perfect cup
We'll also change the email address
right now it's just using an example e-mail address but we'll change it to something more relevant.
Even though we don't actually have this email address
so just to point out this is strictly just text data.
It has nothing to do with our contact form or where this email will be submitted.
All that will be taken care of in our HP script which will program later on and we'll change our footer
your
now with that complete we can go ahead and update our map
some to scroll up to the code block that represents the map and it's located in here.
This entire code block here right now we have a very general map of the United States.
We want something that's specific to this address here.
You can see in the example that it zooms in to that specific location.
So to embed a map we can do so using Google maps.
So the first thing we'll need to do is go to maps that Google dot com
and I've copied this address
when it pasted into this search field and click the Search button.
Now I'm going to click this icon here the menu and click share or embed map.
Now we don't want to share a link we actually want to embed the maps or click on the embed Map tab and
copy this entire line of code in this text field here.
Don't worry about the size we can always modify the size in our in our script so I've copied this code
and exit this window now and I'm going to replace the existing map with the new code
and we will need to change the size somewhat and change it to 100 percent with my 400 pixels light.
And press refresh.
So as you can see we're now zoomed into our location and that makes it obviously a lot easier for visitors
to find us.
OK.
Just save the page now and refresh just to make sure that all your changes have been reflected on the
page and in the next lesson we'll get started on the contact form.