HTML Map and Contact Form Code-along

Objectives

Embed Google Map as an iframe
Creating a Contact Form

Introduction

Building upon previous code alongs, in this exercise you will add an embedded iframe map by coding along with the video provided, reviewing the concepts you were introduced to in the previous lessons. This lesson, along with the next set of lessons, has starter code available, so you will be able to follow each video with the content provided.

However, If you were following along using a personal exceptional-realty repository in the previous HTML lessons, you can continue from where we left off by running the following in your terminal:

git clone https://github.com/<your_username_here>/exceptional-realty
cd exceptional-realty

Instructions

Open the Learn IDE to automatically clone down this lab, or if you're working in your own text editor.
Code along with the provided video below and/or its supplementary reading located below the video. Code everything you see there. Feel free to stop, pause, rewind or fast forward through the content to keep pace.

NOTE: The Google Maps interface has changed slightly since this video was recorded.

Map Embed

Start by creating a new feature branch in Terminal by typing git checkout -b contact-page.

Then open the contact.html page. Under the <h3>Contact</h3> write some comments for the content we will add like so,

<h3>Contact</h3>

<!-- Map -->

<!-- Contact Form -->

Now click the menu icon located at the top left of the screen and select Share or embed map. Then click the Embed map tab.

Next to the link with the iframe code click the drop menu to select the size of the iframe and choose Custom size. Then set the width to 425 pixels wide and set the height to 350 pixels tall. Then highlight the iframe embed code and copy it to your clipboard using Command + c (Mac) or Ctrl + c (Windows) and the head back to your code editor and paste the code snippet Command + v (Mac) or Ctrl + v (Windows) under the comment  like so,

<!-- Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6049.881319200985!2d-74.00151372674895!3d40.69730452928296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a47df06b185%3A0xc889234bc07c42ee!2sBrooklyn+Heights%2C+Brooklyn%2C+NY+11201!5e0!3m2!1sen!2sus!4v1461598289488" width="425" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>

This long code snippet uses the <iframe> element that allows us to load another HTML page inside of a frame within our HTML page. It is like looking through a window from our page into another page displaying a Google Map.

Looks good! Let's stage and commit our code. In Terminal type git add contact.html and press return. Then type git commit -m "add google map to contact page" and press return. Then we will push up our feature branch as a backup for safe keeping, type git push -u origin contact-page and press return.

Form

Next let's add a contact form. Under our  comment let's start by creating a <form> element. This will wrap all of our form inputs.

<!-- Contact Form -->
<form>...</form>

We need to give our opening form element two attributes. The first is an action which is the location that our form will submit its input information to. In our case we will be submitting to a PHP script that will send an email later on. For now, we will insert a # pound sign as a placeholder. Second, we will include the method attribute. This tells the browser the type of request we are making to the location we are submitting in the action. Here we will set the value as post.

<!-- Contact Form -->
<form action="#" method="post">
  ...
</form>

Next, we would like to create inputs for the user to insert their name, email, phone, and a message. We will start by adding a label and input for fullname like so,

<!-- Contact Form -->
<form action="#" method="post">
  <label for="fullname">Name</label>
  <input type="text" id="fullname" name="fullname" placeholder="your name" required>
</form>

On line 3 we use a <label> element to create a text label associated with the form input. By using the for attribute set on the label to match the value of the id attribute in the input this ties the label to the input so that if a user clicks on the text of the label "Name" it will select the input next to it. You can test this on the example below:

Name

The required attribute on line 4 helps us alert the user when they try to submit the form without filling out their name.

Let's fill in the rest of our inputs.

<!-- Contact Form -->
<form action="#" method="post">
  <label for="fullname">Name</label>
  <input type="text" id="fullname" name="fullname" placeholder="your name" required>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="your email" required>
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" placeholder="your phone (optional)">
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="10"></textarea>
  <input type="submit" value="send">
</form>

The type attribute (e.g., text vs email) will be recognized by the browser so that when type email is required, the form will validate that the input matches the format of an email address, including the "@". This is a feature brought to us as part of HTML version 5. Additionally, the type tel will bring up the numeric pad on mobile devices, whereas the type text will bring up the alphabet keypad. Support varies from device to device, though.

Again, the for attribute value when matching an id attribute value will link them so that clicking on a label will select the cursor into its related input.

As discussed in the previous lesson, the name attribute is important as it stores the users input under that name (variable). This comes in handy for making use of the users input server-side.

The placeholder value will appear inside the form input until the user starts typing in their own content.

The required attribute will prevent the browser from submitting the form until all required fields are filled in properly. Again this is functionality is baked into HTML5 for us automatically.

The last input on line 11 has a type of "submit" this gives us a submit button to submit the form. The value attribute in this case displays the text that will appear on our submit button.

Next, save the file and refresh the page in the browser to see your form appear. The following code should create a form that displays like the following example below, Name Email Phone Message <textarea id="message" name="message" rows="10"></textarea>

Ok, looks good! Now stage and commit your code. In Terminal type git add contact.html and press return, then type git commit -m "add contact form to contact page" and press return. Then type git push origin contact-page.

Since we are satisfied with our work on our contact page and we feel this feature is publishable we can include the work in our master branch. To do so in Terminal type git checkout master and press return to switch to your master branch then type git merge contact-page and press return to merge in your commits from the contact-page branch. Then to update our remote type git push origin master and press return.

After you're finished, submit a pull request on Github by typing "learn submit" in the terminal and move on to the next lesson!

PreviousHTML Forms and Iframes NextHTML5 Media

Last updated 5 years ago