SOURCE

 <form>
        <h1>to: Mozilla</h1>

       <div id='from'>
           <label for='name'>from:</label>
           <input type='text' id='name' name='user_name'>
       </div>
       
       <div id='reply'>
           <label for='receiver'>reply</label>
           <input type="text" id='receiver' name='receiver'>
       </div>
       
       <div id='message'>
           <label for='msg'>Your message</label>
           <textarea id='msg' name='user_msg'></textarea>
       </div>
       
       <div class='button'>
           <button type="submit">Send your message</button>
       </div>
    </form>

 @font-face{
            font-family: 'handwriting';
            src: url('fonts/journal-webfont.woff2') format('woff2'),
                url('fonts/journal-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        @font-face{
            font-family: 'typewriter';
            src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
                url('fonts/veteran_typewriter-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }
        
        body{
            font: 21px sans-serif;
            
            padding: 2em;
            margin: 0;
            
            background: #222;
        }
        
        form{
            position: relative;
            
            width: 740px;
            height: 498px;
            margin: 0 auto;
            
            background: #fff url(http://ozkbl6lk3.bkt.clouddn.com/18-2-5/66815173.jpg);
        }
        
        h1{
            position: absolute;
            left: 415px;
            top: 185px;
            
            font: 1em 'typewriter',sans-serif;
        }
        
        #from{
            position: absolute;
            left: 398px;
            top: 235px;
        }
        #reply{
            position: absolute;
            left: 390px;
            top: 285px;
        }
        
        #message{
            position: absolute;
            left: 20px;
            top: 70px;
        }
        label{
            font: .8em 'typewriter',sans-serif;
        }
        
        input,textarea{
            font: 1em 'handwriting',sans-serif;
            
            font-weight: bold;
            
            border: none;
            padding: 0 10px;
            margin: 0;
            width: 240px;
            
            background: none;
            
        }
        
        input:focus,textarea:focus{
            background: rgba(0,0,0,.1);
            border-radius: 5px;
            outline: none;
        }
        
        input{
            height: 2.5em;
            vertical-align: middle;
        }
        
        textarea{
            display: block;
            
            padding: 10px;
            margin: 10px 0 0 -10px;
            width: 340px;
            height: 360px;
            
            resize: none;
            overflow: auto;
        }
        
        button{
            position: absolute;
            left: 440px;
            top: 360px;
            
            padding: 5px;
            
            font: bold .6em sans-serif;
            border: 1em solid #333;
            border-radius: 5px;
            background: none;
            
            cursor: pointer;
            
            -webkit-transform: rotate(-1.5deg);
            -moz-transform: rotate(-1.5deg);
            -ms-transform: rotate(-1.5deg);
            -o-transform: rotate(-1.5deg);
            transform: rotate(-1.5deg);
        }
        
        button: after{
            content: '>>>';
        }
        
        button:hover,
        button:focus{
            outline: none;
            background: #000;
            color: #fff;
        }