Submit your widget
HomeFormStylish Handwritten Letter Style jQuery Form

Stylish Handwritten Letter Style jQuery Form

Created 12 years ago   Views 16042   downloads 4147    Author line25
Stylish Handwritten Letter Style jQuery Form
View DemoDownload
83
Share |

Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS.  use a mix of basic and intermediate CSS techinques to give the form the appearance of a letter, then use the @font-face CSS property to transform the digital text into handwriting.

The form we’re creating is styled with a lined background texture and a subtle shadow to give the impression of a paper sheet. The title and form fields will be styled as digital text, but instead of using rectangular form fields we’ll create dotted lines with a cursive font to give the appearance of a handwritten letter.

The HTML Structure

<!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>

Create a new HTML document and enter the basic structure of a HTML5 page, including the Doctype, page title, link to the CSS stylesheet and a simple container div to house our form.

<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>

Read more:http://line25.com/tutorials/how-to-build-a-handwritten-letter-style-contact-form

You might also like