Contact Form with special inputs for mobile devices
Contact forms are essential for almost every website. The form needs to be styled a little differently for mobile devices and the input types modified.
The example form shown to the left is contained within the fieldset tags. This is given a width of 300px to fit the smaller screen size of an iPhone and the height set to auto. The legend is used to state the purpose of the form - Comments and Questions.
The input box labels are set above, rather than to the left, to keep the design compact. The boxes have a fixed height and width and and a custom focus ring color - in this case red. The comment box is given a minimum height of 100px and a minimum width equal to that of the others.
The submit button is large enough to be a decent sized target for a fingertip. In this case the button is 100px wide by 40px high.
Portable devices use a special input type for the form fields.
<input type="email" />... will launch the alphabetical keypad
<input type="number" />... will launch the numeric keypad
<input type="url" />... will launch the keypad with the special characters required for URLs and the .com key if the device has this capability.
Note that the form on this page is an example to show some guidelines for layout. It has no post action so it won't go anywhere no matter how often you click the submit button!
The images below show the form on an iPhone and with the alphabetic keypad launched...
Note how the iPhone applies a radius to the form field boxes and substitutes its own submit button.
When a website visitor submits a form, its normal to direct them to a page that informs them that their info has been received and what action the recipient is going to take. To keep things simple for small portable device users, its probably better to return them to the Home page.
The form style should be as simple as possible and the number of fields kept to a minimum. Remember that portable device users have to tap in the information using a small keypad so don't expect them to tell their life story!
Click HERE for an example of a form on a mobile website.
