Ez Mac Web Design

A contact form with special inputs to launch the appropriate keypad on mobile devices.

This web page contains two versions of the form - one for mobile devices and one for personal computers. Media queries are used to hide one and show the other in the appropriate situation. The different versions are required for the date picker.

Mobile devices will automatically launch a date picker when the user clicks on the date field if it has the input type “date”. Desktop computers don't have this feature so, in this case, the jQuery-ui script is included and gets called into play by giving the date picker input a class or id and including this in the javascript function that launches it.

Mobile Contact Form

Personal Computer Contact Form

If you are viewing this page on a personal computer, grab the browser window by the right hand edge and drag it to the left to reduce its width. You will see the form style change from “desktop style” to “mobile” although, obviously, the mobile inputs won't work for you!

The images below show the various keypads that are launched for the different input types and the date pickers on both mobile devices and personal computers.

text input keyboard

Text

email input keyboard

Email

date input keyboard

Mobile Date

URL input keyboard

URL

phone input keyboard

Phone

phone input keyboard

Date Picker


© Roddy McKay - 2013