Submit your widget

Stylish Handwritten Letter Style jQuery Form

Created 11 years ago   Views 15699   downloads 3988    Author line25
Stylish Handwritten Letter Style jQuery Form
View DemoDownload
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>
<meta charset="utf-8" />
<title>Pen &amp; Paper Form</title>

<link href="style.css" rel="stylesheet" />


<div id="container">



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


Read more: