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.

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.

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