入力箇所も手書き風にしたコンタクトフォームを制作するチュートリアル

メモ状のデザインのフォームに、ユーザーが入力した箇所のフォントをブラウザのデフォルトから変更し、手書き風にしたコンタクトフォームを制作するチュートリアルを紹介します。

サイトのキャプチャ

How To Build a Handwritten Letter Style Contact Form

デモ

まずは、その手書き風のフォームのデモからご紹介。

デモのキャプチャ

デモページ

デモのキャプチャ

デモページ:入力した文字は手書き風に

デモのキャプチャ

デモページ:日本語は設定されてないため、ブラウザのデフォルトフォント

実装

フォームの制作はHTML+CSSだけでなく、メモ状のUIを作るPhotoshopのチュートリアルも掲載されています。
ここでは、デザイン部分は省略して、以下フォームの実装を紹介します。

HTML: 基本構造

まずは、HTML5を使ってフォームを配置する前の基本構造から。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pen &amp; 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;
}

完成したデモは下記のようになります。

デモのキャプチャ

デモページ

top of page

©2017 coliss