jQuery Essentials: Webform

Primary Objective: In this module, HTML5, CSS, jQuery and jQueryUI was used to create a web form that is easy to use, and incorporates the following functionality:

  • Date picker
  • Drop-down menu
  • Checkbox to show/hide additional fields
  • Submit button and related action

This project was challenging, as I was hoping to create a form that I would actually use. Because I often have guests staying at my place, I thought it would be fun to create a form that allowed people to simply submit reservations on a first come, first served basis that would forward to my personal email.

 

The Arrival/Departure date picker provides information related to how long a prospective guest would like to stay. Using a drop-down menu allows users to choose their desired Sleeping arrangement and the date and time that this is submitted places priority to earlier reservations.

Additionally, in the event that a guest would require special accommodations, they may indicate this by choosing Yes, and allowing a text field to display in order to provide details that will determine if they will be able to be comfortable during their stay. The flexibility of the text box allows one to disclose any difficulties related to illness or disabilities that might prohibit them from staying at my place.

Upon clicking Submit at the bottom of the form, visitors receive the following message: Your form was successfully submitted, and will receive a custom email that includes the name field and a verification link to ensure that everything was received correctly.