入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル
Post on:2012年2月14日
sponsors
メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。
How To Build a Handwritten Letter Style Contact Form
[ad#ad-2]
デモ
まずは、その手書き風のフォームのデモからご紹介。
デモページ：入力した文字は手書き風に
[ad#ad-2]
デモページ：日本語は設定されてないため、ブラウザのデフォルトフォント
実装
フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。
ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。
HTML: 基本構造
まずは、HTML5を使ってフォームを配置する前の基本構造から。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Pen & Paper Form</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div id="container"> </div> </body> </html>
HTML: フォーム
フォームはHTML5の「input type="email"」を除けば、ベーシックなHTMLと言えるでしょう。
<h1>Send a Letter</h1> <form action="" method="post"> <fieldset> <label for="name">Name:</label> <input type="text" id="name" name="name" /> <label for="email">Email:</label> <input type="email" id="email" name="email" /> <label for="message">Message:</label> <textarea id="message" name="message"></textarea> <input type="submit" id="send" value="Send" /> </fieldset> </form>
CSS: 見出しとラベル
見出しとラベルのスタイルはシンプルですが、「letter-spacing」を使って文字間を調整しています。
h1 {
font-size: 30px;
text-align: center; letter-spacing: 5px;
margin: 0 0 44px 0;
}
label {
width: 150px; display: block;
text-align: right; float: left;
font-size: 18px; letter-spacing: 3px;
margin: 0 10px 40px 0; clear: left;
}
CSS: 入力箇所
入力箇所の罫線には画像（dots.png）を使用しています。また、ユーザーの入力箇所のフォントに「Shadows Into Light」を使用して、手書き風のフォントで表示します。
※日本語に対応したフォントを指定することも可能です。
input {
width: 300px; height: 40px; float: left; margin: -14px 0 0 0;
background: url(dots.png);
font-family: 'Shadows Into Light', cursive;
font-size: 24px; color: #18326d; letter-spacing: 3px;
}
textarea {
width: 300px; height: 200px; float: left; margin: -14px 0 40px 0;
background: url(dots.png);
font-family: 'Shadows Into Light', cursive;
font-size: 24px; color: #18326d; letter-spacing: 3px;
}
CSS: 送信ボタン
送信ボタンの切手の消印は背景画像で配置しているので、ボタンを移動する際はpaddingではなく、marginで調整します。
input#send {
width: 202px; height: 84px; float: right;
margin: 0 70px 36px 0; padding: 0 0 0 77px;
background: url(post-mark.png);
font: bold 30px Helvetica, Sans-Serif; text-transform: uppercase; color: #525c73;
cursor: pointer;
}
完成したデモは下記のようになります。
sponsors
