Lesson 10: Forms

Forms allow websites to capture user information and process requests.

Building Forms

Input Types

HTML5 Introduced a number of different input type values to make it easier, especially on mobile devices, to input data. View the examples below on a modern smart phone to see them in action.

<form>
  <input type="date" name="birthday"><br>
  <input type="time" name="game-time"><br>
  <input type="email" name="email-address"><br>
  <input type="url" name="website"><br>
  <input type="number" name="cost"><br>
  <input type="tel" name="phone-number"><br>
</form>

See the Pen zDAck by Michael Macfadden (@mmacfadden) on CodePen.

Google Form Hacks

Google makes it easy to build forms that connect to spreadsheets. They’re great, but they rarely ever match your website. The following link: http://morning.am/tutorials/how-to-style-google-forms/¬†along with a few other HTML5 tricks below, will help you build beautiful forms that enter data directly into a spreadsheet.

  • Add the email type to the email input field
  • Add the required attribute to each input field
  • Strip out Google’s CSS classes and IDs and add your own.

The “cleaned” code below comes from the following Google form: http://goo.gl/WVdeKD

See the Pen bmgtD by Michael Macfadden (@mmacfadden) on CodePen.

Form Responses

After you submit data in the form above, check back in a few minutes, refresh the page, and you should see the information populate into the spreadsheet below.

Google Form Hack: Styles Conference

Use the Google form at the following link: http://goo.gl/YCyqmt to create a working form in Chapter 10’s “In Practice.”
See the html below for the “clean” version of the form code.

<form action="https://docs.google.com/a/glenbrook225.org/forms/d/1hX5ekLaIaL-YSodqTSGEz12diofp7TmtV1oaVCztYrw/formResponse" method="POST" target="_self" onsubmit="">
  <label  for="entry_702413884">Name</label><br>
  <input type="text" name="entry.702413884" value="" dir="auto" aria-label="Name  " title="">
  <br>
  <label for="entry_1323903540">Email</label><br>
  <input type="text" name="entry.1323903540" value="" dir="auto" aria-label="Email  " title="">
  <br>
  <label for="entry_1918916207">Number of Passes</label><br>
  <select name="entry.1918916207" aria-label="Number of Passes  ">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <br>
  <label for="entry_1184110086">Comments</label><br>
  <textarea name="entry.1184110086" rows="8" cols="0" dir="auto" aria-label="Comments  "></textarea>
  <input type="hidden" name="draftResponse" value="[,,&quot;-2965244842198017098&quot;]">
  <input type="hidden" name="pageHistory" value="0">
  <input type="hidden" name="fbzx" value="-2965244842198017098">
  <br>
  <input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
</form>

See the Pen ezAxv by Michael Macfadden (@mmacfadden) on CodePen.