How To Build a Handwritten Letter Style Contact Form

Pen & paper inspired contact form in HTML and CSS

Follow this step by step tutorial to create a traditional pen & paper inspired contact form in HTML and CSS. We’ll 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.

Daniela Vaseva

Daniela VasevaDaniela is writing tutorials, news, newsletters, and update emails for the DMXzone specialising in the sphere of electronic processing, analysis and publication of texts, and interested in the development of new Internet technologies and problems related to the cyberculture and net literature. She has a bachelor's degree in Bulgarian philology, and a master's degree in computational linguistics.

See All Postings From Daniela Vaseva >>


Be the first to write a comment

You must me logged in to write a comment.