Minimal GUI Set: More Than 1000 Free Elements, Buttons, Patterns, Icons And Many More

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Vintage typewriter: The sexiest jQuery contact form ever

Comments and suggestions in here

Hello friends, on today’s tutorial we will take a step aside of our classical design tutorials and will be focusing more on the programming part, we’re about to show you how to develop an awesome typewriter experiment with all the primary functions fully operational thanks to the mighty power of jQuery and CSS. But don’t think that this is pure crazy experimentation, because this typewriter can actually be utilized as a brilliant contact form to place on your different projects. The tutorial will guide you across the different programming stages, so please set your Dreamweaver, Notepad++ or whatever media you utilize and let’s begin.

View Demo
Download Source


Regarding the design, our creative team designed a beautiful vintage typewriter using a retro color palette, the beautiful Lobster font and an old school notebook sheet, this great design will be explained in a future tutorial. We also placed a nice green texture on the background to support the design. If you want to learn how to make beautiful artworks like this typewriter, please check all our icons tutorials exclusively by TutorialShock.

How does it work?

The typewriter can be manipulated in 3 different ways: You can either operate it via keyboard, clicking directly over the typewriter’s keys or using a touch screen, though there are a couple of things that can be improved (remember that this is just an exercise).

On the keyboard area, you will find all the interactive keys that will let you enjoy our typewriter, each key follows your keyboard orders except the Tab key because as you probably know, that key is utilized for switch between windows. The text area is the corresponding to the sheet, there you will see all the input text and it has an infinite vertical size unless you click the Send button which in that case replaces the sheet with a new one so you can write a new message. As for the DIV container it’s where everything is located and it has no interactivity applied to.

typewriter01

Using the typewriter as a contact form

The typewriter’s system is very easy to understand. First you enter your message using the keyboard (you can even enter Spaces, switch to Caps Lock and use the Tab key) and once you’re satisfied with the message, simply click on the send key and your message will be automatically dispatched to the recipient.

typewriter02

Implementing the @font-face property

We used something pretty cool in our typewriter experiment, the @font-face property. The great thing about @font-face is that now you can implement more than just the standard system fonts in your designs and be absolutely sure that people are going to see them because the property actually calls the typeface from an specific URL and loads it when the people visits the place, so the person can see the font without having it installed on their computer. For our typewriter experiment we utilized the lovely fonts Harting and Lobster, you can check this by highlighting the letters, you will see that they’re not images but actual characters.

The Harting font was created using the @font-face generator of Font Squirrel.

You can find many more useful information about @font-face in WebDesignshock.

Calling the sound library to our typewriter

To complement our typewriter exercise, we decided to insert a series of sounds from the internet to emulate the actual typewriter sounds such as the paper rip, the key pressing and others. What we did was integrate all the sounds with our typewriter with the powerful library SoundManager 2. What this library does is that it wraps and extends both the HTML and Flash audio sound APIs, providing a single, unified sound API to JavaScript.

The sound library was implemented using the power of Flash and JavaScript to ensure a high cross-browser feature, probably many of you are thinking right now “are you guys insane?, Flash is dead, you must utilize HTML5″. The truth is despite the fact that HTML5 is getting more popular every day, it’s still not fully steady and because of that it does not guarantee the same level of cross-browser features that can be achieved using Flash.

Step 1: Configure the HTML

To begin our typewriter we must take care of the HTML. You must create a demo page and then save it as demo.php so once you done it we can continue with the further implementation of the jQuery library.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>typewritter</title>
</head>

<body>
</body>
</html>

Step 2: Identifying the Typewriter’s elements

Having our HTML established, we proceed with the identification of the different graphic elements that are going to be part of our typewriter. Those elements are the following:

Step 3: Working with the CSS

Considering the images that we’ve just defined, we proceed with the implementation of our CSS, so now we leave you with the whole code (comments included) that you have to insert to make the typewriter.


* {
margin: 0;
padding: 0;
}
/* Background image utilized for the whole document */
body {
background-image: url('../img/i27x7ym.jpg') ;

}

/* Loads the main container where the typewriter is located. */
#container {
margin: 100px  auto 0 auto  ;
width: 1300px;
position:relative;

}
/* On this part the main housing of the typewriter is loaded without the keys. */
#typewritter{
height:858px;
width:845px;
background: transparent url(../img/machine_2.png) no-repeat 0 0;
position:relative;
top:120px;
z-index:2;
}
/* This section is where the sheet is loaded with a defined size of 477px width and 58 px height, though during programming it can be extended up to 260 px. */
#write {
margin: 0 200px;
padding:5px;
width: 477px;
height: 58px;
*height:66px;
font-family: 'HartingPlain', Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
color:#000;
background: transparent url(../img/sheet_2.png) no-repeat top left;
line-height:30px;
*line-height:30px;
border:none;
position:absolute;
top:105px;
*top:75px;
z-index:3;
outline:none;
resize:none;
overflow-y:hidden;

}
/* In this part the keyboard is loaded and on this case each key is loaded via an ul and li tag. */
#keyboard {
width:auto;
*width:614px;
margin: 0 100px 0 140px ;
list-style: none;
position:absolute;
z-index:3;
overflow:hidden;
top:490px;
}
/* Here is where a key is loaded and a li value is assign it within the keyboard. */
#keyboard li {
float: left;
margin: 0 0 0 0;
width: 40px;
height: 49px;
line-height: 40px;
text-align:     center;
font-family: 'Lobster', arial, serif;
font-size:16px;
color:#4B3005;
text-shadow: -1px -1px 1px #ccc;
}
/* On this part the main background for all the keys is assigned.*/
li.letter,li.symbol {
background: transparent url(../img/key.png) no-repeat  center  5px;
}
.capslock, .tab, .left-shift {
clear: left;
}
/* Here's where the background for the delete, tab and return keys is determined.*/
#keyboard .tab, #keyboard .delete ,#keyboard .return {
background: transparent url(../img/shift_key.png) no-repeat   center  7px;
width: 58px;
}
/* This is where the background is set for the Caps Lock key.*/
#keyboard .capslock {
background: transparent url(../img/return.png) no-repeat -2px 5px;
width: 104px;
}
/* On this part the background for the Left Shift and Right Shift is assigned.*/
#keyboard .left-shift, #keyboard .right-shift {
background: transparent url(../img/shifts_keys.png) no-repeat   center  7px;
width: 90px;
}

.lastitem {
margin-right: 0;
}
/* This applies exclusively on the case when the keyboard letters are set in Caps Lock mode. */
.uppercase {
text-transform: uppercase;
}
/* Here's where the background is established for the Space key.*/
#keyboard .space {
clear: left;
width: 544px;
*width: 534px;
background: transparent url(../img/key_space.png) no-repeat  center center;
}
/* This only applies when you hold Shift, it changes the numbers for symbols.*/
.on {
display: none;
}
/* Turns into pointer any of the keys when rolling over.*/
#keyboard li:hover {
cursor: pointer;
}
/* On this part the background for the Send key is assigned.*/
li#send {
font-size:22px;
color:#4B3005;
text-shadow: -1px -1px 1px #fff;
width:80px;
background: transparent url(../img/shifts_keys.png) no-repeat    center center;
}

Step 4: Establishing the JavaScript

This is the programmatic part of the tutorial, because is precisely on this stage where we’re going to define all the interactivity and animation instances such as the key’s effect, sounds and the sheet’s movement.


/* This function estimates the number of lines in the text area of any size, this is a jQuery function named countlines.*/
var top_init=105;/*Screen's starting position (textaarea).*/
var browser_info= new Array();
jQuery.each(jQuery.browser, function(i, val) {
browser_info[i]=val;

});
/*
This jQuery function makes reference to the following URL:  http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html

*/
(function($) {

/*
* Auto-growing textareas; technique ripped from Facebook
*/
$.fn.autogrow = function(options) {

this.filter('textarea').each(function() {

var $this       = $(this),
minHeight   = $this.height(),
lineHeight  = $this.css('lineHeight');

var shadow = $('

').css({
position:   'absolute',
top:        -10000,
left:       -10000,
width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
fontSize:   $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize:     'none'
}).appendTo(document.body);
for(var i in browser_info )
{
if(i==='msie' )
{
var top_init=24;
break    ;
}
else{
var top_init=20;
break;
}

}
var update = function() {

var times = function(string, number) {
for (var i = 0, r = ''; i &lt; number; i ++) r += string;
return r;
};

var val = this.value.replace(/
.replace(/&gt;/g, '&gt;')
.replace(/&amp;/g, '&amp;')
.replace(/n$/, '
')
.replace(/n/g, '
')
.replace(/ {2,}/g, function(space) { return times(' ', space.length -1) + ' ' });

shadow.html(val);
var top_o=parseFloat($(this).css('height'));
/* On this part a validation process determines whether the textarea crosses a determined size of 260px height or in case that it pass over the top that gives static and vice versa.*/
if (top_o&lt;260 || shadow.height()&lt;=240)
{
$(this).css('height', Math.max(shadow.height() + top_init, minHeight));
$(this).css('overflow-y','hidden' );
}
if (top_o==260 || top_o==272)
{
$(this).css('overflow-y','auto' );
}
if (top_o
{
var top=parseFloat($(this).css('top'));

$(this).css('top', big = (top===105) ? top-22 : top-30 );
var aSoundObject2 = soundManager.createSound({id:'mySound1',url:'sound/typewriter_line_break.mp3'});aSoundObject2.play();
/*  Makes the sound effect in a newline case.*/
}
if (top_o&gt;parseFloat($(this).css('height')))
{
var top=parseFloat($(this).css('top'));
$(this).css('top',big = (top===83) ? top+22 : top+30);
}

}

$(this).change(update).keyup(update).keydown(update);
update.apply(this);

});

return this;

}

})(jQuery);
/* This function verifies if the key that is being typed is on Caps Lock mode. */
function isCapslock(e){

var ascii_code    = e.which;
var shift_key    = e.shiftKey;
if( (65 &lt;= ascii_code) &amp;&amp; (ascii_code &lt;= 90) &amp;&amp; !shift_key )
{
return true
}
else
{
return false;
}
}

var $keyboard = jQuery.noConflict();    /*Loads the jQuery variable in order to avoid any conflict.*/
var caps_lock=false;
var atCount = 2;/* Starting position of the lines counter, it must be set at 2 to make the comparison.*/
var control_sc=false;/* Scroll's state of control when a newline happens.*/
var click_focus=false;

/* Makes the textarea show the cursor when the page starts.*/
$keyboard(document).ready(function(){
$keyboard("#write").focus();

});

$keyboard(function() {
$keyboard('#write').autogrow();
});

/* eventos del mouse */
$keyboard(function(){
var $write = $keyboard('#write'),
shift = false,
capslock = false;
/* Mousedown event= On mouse down= Mouse up, this event applies only within the virtual keyboard. */
$keyboard('#keyboard li').bind({
mousedown: function() {
/*When you're in mouse down state, the key's position changes to 1 px height and 1 px to the right to perform the effect. */
$keyboard(this).css('position','relative');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#e5e5e5');

var $this = $keyboard(this),

character = jQuery.trim($this.html()); // If it's a lowercase letter, nothing happens to this variable
if (! $this.hasClass('send'))
{

if ($this.hasClass('return'))
{
/* Performs the sound effect when pressing the Return key or performing a newline. */
var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
aSoundObject1.play();
}
else{
/*  Executes the sound effect when pressing any other key. */
var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
aSoundObject.play();

}

// Shift keys
/* When pressing the Shift key it changes the key's state. */
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$keyboard('.letter').toggleClass('uppercase');
$keyboard('.symbol span').toggle();

shift = (shift === true) ? false : true;
capslock = false;
return false;
}

// Caps lock
/* This happens when pressing the Caps Lock key.*/
if ($this.hasClass('capslock')) {
$keyboard('.letter').toggleClass('uppercase');
capslock = true;
return false;
}

// Delete
/*This is how you delete any character.*/
if ($this.hasClass('delete')) {

document.getElementById('write').value=document.getElementById('write').value.substr(0, document.getElementById('write').value.length - 1);
return false;
}

// Special characters

if ($this.hasClass('symbol')) character = $keyboard('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "t";
if ($this.hasClass('return')) character = "n";

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

// Remove shift once a key is clicked.
if (shift === true) {
$keyboard('.symbol span').toggle();
if (capslock === false) $keyboard('.letter').toggleClass('uppercase');

shift = false;
}
if(click_focus==true)
{
$keyboard('#write').val('');
click_focus=false;
}
// Add the character
if (! $this.hasClass('delete')) {
document.getElementById('write').value+=character;
}
$keyboard('#write').autogrow();
/* When there's more than one line on the textarea this effect is displayed and keeps increasing until it gets 14 lines to be at the monitor's level. */

}

},
mouseup:  function (){
/* On the mouse up event, it leaves the key on its original position so the key's effect stops.*/
$keyboard(this).css('position','static');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#000');
if(! $keyboard(this).hasClass('send'))
{
$keyboard("#write").focus();
}
}

});
/* This only happens when clicking over the Send button, what it does is to simply perform a character erasing effect and sends the email.*/
$keyboard('#send').click(function()
{
/* Generates the sound effect on case that you click over the Send key only. */
var aSoundObject5 = soundManager.createSound({id:'mySound5',url:'sound/typewriter-paper-1.mp3'});aSoundObject5.play();
/*Here's where the sheeet's animation happens in sincronicity withh the sound while moving 300 px up and changes the hidden position so it emerges behind the typewriter with a more subtle animation. */
$keyboard('#write').animate({"top": "-=300px"},'fast',function() {
/*The following variable is the email's body*/
var message=$keyboard(this).val();
$keyboard(this).css('height','58px');
$keyboard(this).val('     mail sent    ');
$keyboard(this).css('top','163px');
$keyboard(this).css('overflow-y','hidden' );
$keyboard(this).css('z-index','1');
$keyboard(this).animate({"top": "-=58px"},'slow',function(){
$keyboard(this).css('z-index','3');
/*On this part includes the PHP script to send the message, it receives the "message" parameter that is equivalent to the mail's body, if you wish to place your own parameters then you have to customize it.*/
$keyboard.post("Mail/sendmail.php", { mail:message  },
										function(data){

										});
});
click_focus=true;

});

});

/*On this part all the main keyboard events occur when you enter a text on the textarea, there are 3 different events that might be applied on this situation:

1.keydown
2.keypres
3.keyup
*/
var keypressed = 0;

$keyboard('#write').bind(
{
/*On keydown the same effect that occurs during mouse down is performed and it verifies only the characters to perform the same effect that with the mouse.*/
click:function(event){
if(click_focus==true)
{
$keyboard('#write').val('');
click_focus=false;
}
},

keydown:    function(event) {

/* This variable captures the pressed key when is on keydown, what you do is move 2 px down and then 2 px right to make the effect look more interesting.*/
var lowercase=String.fromCharCode(event.keyCode);

switch(event.keyCode)
{
case 8:
lowercase='delete';
break;
case 13:
lowercase='return';
break;
case 16:
lowercase='shift';
break;
case 20:
lowercase="caps lock";

if (isCapslock(event)===true ||caps_lock===false)
{
if (caps_lock===false)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=true;
}
}
else
{
if (event.keyCode!=32)
{
if (caps_lock===true)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=false;
}
}
}

break;
case 32:
lowercase=" ";
break;
case 186:
lowercase='<span class="off">;</span><span class="on">:</span>';
break;

case 188:
lowercase='<span class="off">,</span><span class="on">&lt;</span>';
break;
case 190:
lowercase='<span class="off">.</span><span class="on">&gt;</span>';
break;
case 191:
lowercase='<span class="off">/</span><span class="on">?</span>';
break;
case 222:
lowercase='<span class="off">'+"'"+'</span><span class="on">"</span>';
break;

}

$keyboard('#keyboard li').each(function(){
/* On this part the same Mousedown effect applies.*/

if ((jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())|| jQuery.trim($keyboard(this).html())===lowercase)
{
$keyboard(this).css('position','relative');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#e5e5e5');
}

});
if (event.keyCode===13)
{
var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
/* Makes the sound effect when it passes more than one newline.*/
aSoundObject1.play();
}
else{

var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
aSoundObject.play();
/* Executes the sound effect when you type any key. */

}

},
keyup: function(event){
/* During this event the key that is being pressed returns to its original position instantly. */
var lowercase=String.fromCharCode(event.keyCode);
switch(event.keyCode)
{
case 8:
lowercase='delete';
break;
case 13:
lowercase='return';
break;
case 16:
lowercase='shift';
break;
case 20:
lowercase="caps lock";
break;

case 32:
lowercase=" ";
break;
case 186:
lowercase='<span class="off">;</span><span class="on">:</span>';
break;

case 188:
lowercase='<span class="off">,</span><span class="on">&lt;</span>';
break;
case 190:
lowercase='<span class="off">.</span><span class="on">&gt;</span>';
break;
case 191:
lowercase='<span class="off">/</span><span class="on">?</span>';
break;
case 222:
lowercase='<span class="off">'+"'"+'</span><span class="on">"</span>';
break;

}

/*On this part the same Mouseup effect happens*/
$keyboard('#keyboard li').each(function(){

if (jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())
{
$keyboard(this).css('position','static');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#000');
}

});

},
keypress: function(event){
/* This is the keypress event and it occurs when you type in, it recognizes whether the typed text is in lowercase or uppercase.*/

if (isCapslock(event)===true)
{
if (caps_lock===false)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=true;
}
}
else
{
if (event.keyCode!=32)
{
if (caps_lock===true)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=false;
}
}
}

}
});
});

Step 5: Inserting the HTML code

We have made some major advances in our typewriter, now we must proceed with the implementation of the HTML code, so let’s grab that bull by the horns.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!--
The HTML design of this keyboard is based on http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Keyboard test</title>
   <!-- Loads the fonts Harting and Lobster-->
      <link href='http://fonts.googleapis.com/css?family=Orbitron:regular,500,900' rel='stylesheet' type='text/css' />
   <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
   <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
   <!-- Content's CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css"  />
   <link rel="stylesheet" type="text/css" href="css/flashblock.css" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   <script type="text/javascript" src="js/soundmanager2.js"></script>
    <script type="text/javascript">

    // Code to insert inside the sound library.
    // The library was inspired on http://www.schillmania.com/projects/soundmanager2/

    // Flash version URL switch (for this demo page)
        var winLoc = window.location.toString();

        if (winLoc.match(/flash9/i)) {
          soundManager.flashVersion = 9;
          if (winLoc.match(/highperformance/i)) {
            soundManager.useHighPerformance = true;
            soundManager.useFastPolling = true;
          }
        } else if (winLoc.match(/flash8/i)) {
          soundManager.flashVersion = 8;
            }

            soundManager.useFlashBlock = true;
            soundManager.url = 'swf/'; // path to SoundManager2 SWF files (note trailing slash)
            soundManager.debugMode = false;
            soundManager.consoleOnly = false;
            soundManager.onready(function(oStatus) {
                 if (!oStatus.success) {
                    return false;
                  }
              // soundManager is initialised, ready to use. Create a sound for this demo page.
                 soundManager.createSound({
                    id: 'mySound2',
                    url: 'sound/typewriter_key_4.mp3'
                });
                soundManager.createSound({
                    id: 'mySound3',
                    url: 'sound/typewriter_line_break.mp3'
                 });
                soundManager.createSound({
                    id: 'mySound5',
                    url: 'sound/typewriter-paper-1.mp3'
                });
                 if (soundManager.flashVersion > 8) {
                t = window.setInterval(checkRAM,500);
                document.getElementById('flash-ram-use').style.display = 'inline';
                checkRAM();
                  }
            });

function checkRAM() {
 if (soundManager.supported()) {
    var ram = (soundManager.getMemoryUse()/1024/1024).toFixed(2);
   if (!isNaN(ram)) {
     document.getElementById('flash-ram-use').innerHTML = ram+' MB';
   } else {
      document.getElementById('flash-ram-use').style.display = 'none';
   }
 }
}

var t = null;

function doEval(sHTML) {
 var html = sHTML.replace(/<(span|code)>/gi,'');
 html = html.replace(/<[/](span|code)>/gi,'');
 html = html.replace(/&gt;/gi,'>');
 eval(html);
 return false;
}

</script>
   <!-- Loads the logical content of the keyboard. -->
        <script type="text/javascript" src="js/keyboard.js"></script>

</head>
<body>
<div id="container">

    <div id="typewritter">
    </div>
   <!-- textarea or screen simulation. -->
    <textarea id="write"  wrap="virtual" autocomplete="off"  ></textarea>
   <!-- Virtual keyboard. -->
    <ul id="keyboard">
        <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
        <li class="delete lastitem">delete</li>
        <li class="tab">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
        <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
        <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li>
        <li class="capslock">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
        <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
        <li class="return lastitem">return</li>
        <li class="left-shift">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
        <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
        <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
        <li class="right-shift lastitem">shift</li>
        <li class="space lastitem">&nbsp;</li>
       <li id="send" class="send"><span>send</span></li>
    </ul>
   <!--Send button-->
</div>
</body>
</html>

And now our typewriter machine is ready and fully operational, we hope that you’ve enjoyed this great exercise that may have more than one practical application, you can test it on all the different browsers and the results will be the same, though in IE8 and IE9 the sheet’s scroll will not show up. Thanks for visiting TutorialShock and reading our articles, please leave us a message to find your opinions and well, we will see you soon :).

View Demo
Download Source


90 Responses to “Vintage typewriter: The sexiest jQuery contact form ever”

  1. What a remarkable article, I haven’t seen such a nice contact form in years, I have a really fun time playing with your typewriter, congratulations and thanks for sharing it with us :)

    • TS Editorial
      February 1st

      Thanks mate, we created this typewriter with both purposes of giving you something to have fun with but that also is completely functional and implementable :)…

  2. Dude this is really, really cool!

    You should do a followup where typing shows an animated pen moving.

    • TS Editorial
      February 2nd

      Well Daniel, that’s a pretty cool idea, we will definitely keep it in mind for our upcoming tutorials :)…

  3. This is great.
    Found 1 “bug” (using Chrome). I wrote something , then deleted the text. While I was deleting the paper kept moving upwards until it disappeared :(

    • TS Editorial
      February 2nd

      Hi Cristy, our friend Piorek had just let us know a few minutes ago about this bug. You can see our response to his comment and as we said to Piorek, if you know an effective way of fixing this bug, you can leave us a comment with your solution :)…

  4. piorek
    February 2nd

    I’ve found a bug in your script.
    -Type enough lines in textarea for a scroll bar.
    - Delete some lines
    Effect:
    background will shrink back, but position of a paper is wrong (it’s not coming from a typewriter)

    • TS Editorial
      February 2nd

      Hi Piorek, thanks for letting us know, we haven’t realized that bug. Basically what happens is that when we delete a certain amount of lines (either through Delete, Backspace or Ctrl + X), the script does not recognize the current amount of lines and that’s when the bug shows up, so the solution is add a tracker that actually detects the amount of lines that are left after you subtract a certain number of lines. Anyway, if you have a solution for this bug, you can leave us a comment with it so we can figure out something together :)…

  5. Very funky, especially the sound when you hit send!

  6. Hi! You have lot`s of great tutorials!
    Congratulations!
    I`we just started a tutorial indexing website and I would like to ask you to submit some tutorials :D
    You can submit tutorials without registering, but if you register you will get gift points for each tutorial and you can use these points to buy ads.

    Please visit it: http://www.tutorialswindow.com
    Thanks

    • TS Editorial
      February 2nd

      Thanks buddy, we will definitely consider your suggestion ;)…

  7. Thanks for sharing :)

  8. Fantastic! Now I just need one of you really smart people to turn this into a WordPress plugin for me!

    • TS Editorial
      February 8th

      That’s an interesting idea Judi, maybe we will…

    • wordpress plugin would rock!~~~

    • TS Editorial
      February 10th

      Hi Amanda, we’re definitely considering this as many of you are requesting it…

  9. Where does it tell where to send the form to? Is that nested in the sendmail.php file and I missed it?

    Also, this is very sexy.

    • TS Editorial
      February 8th

      Oops, we actually haven’t placed this part on the documentation, what you have to do is insert the following lines of code inside the JS-jQuery section:

      var message=$keyboard(this).val();

      $keyboard.post(“Mail/sendmail.php”, { mail:message },
      function(data){

      });

      You can find all the explanation within the tutorial, we’ve just updated it :).

  10. Roland
    February 9th

    Brotha!! What the…….!!? INCREDIBLE Tut! You broke it down in detail as to how you achieved this! Remarkable!! Thank YOU for taking the time out in doing this for all of us :)

    Looking forward to more of such!

    • TS Editorial
      February 9th

      Thanks Roland!!!, we put all our effort on making this tutorial as complete as possible to be easy to understand by everyone, make sure to visit us back to find out more pretty cool tutorials :).

  11. Great in depth tutorial!

  12. This is truly awesome…

  13. On Firefox, when you type many lines and you get the scrollbar, you can’t see the text you’re typing. Every key I press brings me back to the top of the paper so I cannot see the text I’m typing.
    Other than this issue, very wonderful and pretty amazing work on this!! Totally love it!

    • TS Editorial
      March 2nd

      Thanks for your comment mate, unfortunately Firefox has many compatibility issues when working with jQuery, so our suggestion is that you should probably check it using Chrome or Safari :)…

  14. good tutorial thanks for sharing

  15. This is a cool tutorial! Thanks for sharing.

    • TS Editorial
      March 11th

      You’re welcome Brett, thanks for your constant support…

  16. That is an awesome contact form, great job!

    • TS Editorial
      April 8th

      Thank you Julie!!! :D…

  17. -dies- this is so cool! I so wanna implement this somehow! I’m sure I can find a purpose :)

    • TS Editorial
      April 19th

      I bet you will figure out some clever way to use it Jae :)…

  18. Chirag
    June 21st

    Mind blowing!!!!!!!!!!

    No words to say.

    Awesome work

    Plz mail me whenever new kinds like this is posted

    Thank you

    • TS Editorial
      June 21st

      Hi buddy, thanks for your kind message. You can follow all our updates via Twitter or Facebook :)…

  19. lol this is crazy and kind of usless.
    but d*mn this is nicly done !

  20. Hi, although I seem to recall having seen the AI  somewhere, I just stumbled upon both tutorials for the vector and this *really* well done contact form, with an unusual attention to detail. Huge congrats for the job and the perfect result.

    • TS Editorial
      July 25th

      Thanks buddy, we always try to balance design and functionality in every single one of our works…

  21. Samual
    October 13th

    Thanks dude these plugins are awesome !!
    The like the typewriter demo :)

    Other Cool jQuery Plugins:
    http://labs.rnzmedia.co.za

  22. It was an awesome tutorial. Thanks !

  23. Guys great tut loving it but I’m having a problem getting the submit to send to my mail. The code above is in the js file and I’ve changed the example mail in sendmail.php to my address but still not getting anything. Am I missing something? either in the js file or the sendmail.php?

  24. Hi Guys I posted earlier but my post seems to have disappeared. Great tutorial love it but I’m having problems getting the ‘send’ to go to my email address. The .js file has the code var message=$keyboard(this).val();$keyboard.post(“Mail/sendmail.php”, { mail:message },function(data){}); and I’ve changed the example email in the sendpost.php but still not working. Am I missing anything in either file? Thanks!

  25. Hey this is very complex 
    after downloading the source how can i build a contact form like this to be put on my website

    • Follow the steps on the post, if you take them one by one it wont seem as complicated. Best regards.

  26. Zachary
    April 25th

    Thank you! This is amazing!

    • Designer
      June 24th

      Indeed! Thank you for your support!

  27. Max W
    October 15th

    Hi 

    I realy love this retro contactform, can you tell me how to integrate this in a WordPress site ?

    Bets regards

    max

    • Designer
      November 12th

      You might need a little help of a WP specialist to add the necessary PHP

  28. [...] Vintage typewriter: The sexiest jQuery hit form ever « Design … [...]

  29. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  30. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  31. [...] Vintage typewriter: T&#1211&#1077 sexiest jQuery contact form &#1077&#957&#1077r « Design … [...]

  32. [...] Vintage typewriter: T&#1211&#1077 sexiest jQuery contact form &#1077&#957&#1077r « Design … [...]

  33. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  34. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  35. Vintage typewriter: The sexiest jQuery contact form ever…

    A fancy typewriter contact form powered with jQuery, CSS and PHP along with a nice vector illustration…

  36. Coolt: Kontaktformulär i jQuery som klassisk skrivmaskin…

    Eftersom jag är så pass gammal att jag började min karriär på skrivmaskin, någon gång i sjuårsåldern, kan jag inte låta bli att tipsa om den här länken. Det är ett kontaktformulär utvecklat i jQuery, med ett gränssnitt som ser ut och fun…

  37. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  38. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  39. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  40. [...] Vintage typewriter: The sexiest jQuery contact form ever [...]

  41. [...] VeipsCSS/CSS3, Forms, jQueryNo Commentswww.tutorialshock.com have published an awesome tutorial on creating a vintage typewriter contact form with jQuery.The form is created with CSS and jQuery, and works on most modern browsers.I’ve yet to see [...]

  42. [...] out in many projects and it was a great pleasure to spend some time getting to know him more.Vintage typewriter: The best looking jQuery contact form everA fancy typewriter contact form powered with jQuery, CSS and PHP along with a nice vector [...]

  43. [...] WP Greet BoxAn out-of-the-box contact form tutorial from TutorialShock: they developed an awesome typewriter contact form with all the primary functions fully operational with the mighty power of jQuery and [...]

  44. [...] 「typewriter contact form」はタイプライタで文字入力が出来るようになるお問い合わせフォームを作れるjQueryプラグインです。 [...]

  45. [...] 1. Vintage typewriter: The sexiest jQuery contact form ever [...]

  46. Contact Us says:

    [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  47. [...] Vintage typewriter: The sexiest jQuery contact form ever « Design … [...]

  48. [...] 16. Vintage typewriter: The sexiest jQuery contact form ever [...]

  49. Vintage typewriter: The sexiest jQuery contact form ever…

    In today’s tutorial we will take a step aside of our classical design tutorials and will be focusing more on the programming part, we’re about to show you how to develop an awesome typewriter experiment with all the primary functions fully operatio…

  50. [...] Vintage typewriter: The sexiest jQuery contact form ever [...]

  51. [...] into programming, specially jQuery, you can find one of Tutorialshock’s most popular tutorials, Vintage typewriter: The sexiest jQuery contact form ever – where you can learn how the typewriter was implemented as a fully functional contact form. [...]

  52. [...] Vintage typewriter: The sexiest jQuery contact form ever [...]

  53. [...] and designers. I hope you will enjoy this post and learn something new from this tutorials.Vintage typewriter: The sexiest jQuery contact form everShutter Effect Portfolio with jQuery and CanvasHow To Build a Sliding Feature Slideshow with [...]

  54. Jenzing says:

    very helpful…

    I preferred to thank you for this good article. http://wsdxj.poker-blogs.fr/ I by all odds liked every little bit of it…

  55. [...] Vintage typewriter: The sexiest jQuery contact form ever [...]

  56. [...] 15个新鲜和优秀的jQuery教程 jQuery Add comments 七 072011 Vintage typewriter: The sexiest jQuery contact form ever [...]

  57. [...] Vintage typewriter: The sexiest jQuery contact form ever [...]

  58. [...] Vintage typewriter: The sexiest jQuery contact form ever [...]

  59. Vintage typewriter: The sexiest jQuery contact form ever http://t.co/UuEHXHGT via @webdesignshock

Leave a Reply

Comments

*