"gradient-contact Form"
Bootstrap 3.3.0 Snippet by vara24

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <body> <div class="body"> <div id="container"></div> <div class="flip-card" on-click="toggle('flipCard')">{{ flipCard ? 'Reset' : 'Animate' }}</div> <div class="contact-wrapper"> <div class="envelope {{ flipCard ? 'active' : '' }}"> <div class="back paper"></div> <div class="content"> <div class="form-wrapper"> <form> <div class="top-wrapper"> <div class="input"> <label>Name</label> <input type="text" name="name"/> </div> <div class="input"> <label>Phone</label> <input type="text" name="phone"/> </div> <div class="input"> <label>Email</label> <input type="text" name="_replyto"/> </div> </div> <div class="bottom-wrapper"> <div class="input"> <label>Subject</label> <input type="text" name="_subject"/> </div> <div class="input"> <label>Message</label> <textarea rows="5" name="message"></textarea> </div> <div class="submit"> <div class="submit-card" on-click="toggle('flipCard')">Send Mail</div> </div> </div> </form> </div> </div> <div class="front paper"></div> </div> </div> </div> </body> </html>
html,body { background-color: linear-gradient(45deg, #4c90ff, #30e58d); font-family: sans-serif; } .contact-wrapper { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .flip-card { border-radius: 0.5em; position: fixed; top: 1em; left: 1em; width: 5em; padding: 0.5em; border: 0.1em solid #fff; color: #fff; text-align: center; cursor: pointer; z-index: 9; } .envelope { position: relative; display: block; width: 30em; height: 35em; margin: 0 auto; } .envelope.active .content { padding: 15em 2em 2em; } .envelope.active .paper.front, .envelope.active .paper.back { animation-duration: 1.5s; animation-direction: normal; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .envelope.active .paper.front { animation-name: envelope-front; } .envelope.active .paper.back { animation-name: envelope-back; } .envelope.active .paper.back:before { animation-duration: 0.5s; animation-direction: normal; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-delay: 1.25s; animation-name: envelope-back-before; } .envelope.active .bottom-wrapper { transform: rotateX(180deg); } .envelope.active .bottom-wrapper:after { z-index: 0; opacity: 1; } .envelope .content { padding: 2em; box-sizing: border-box; position: relative; z-index: 9; transition: all 0.5s ease-in-out; transition-delay: 1s; } .envelope .top-wrapper, .envelope .bottom-wrapper { box-sizing: border-box; background: #03a9f5; color: #fff; } .envelope .top-wrapper { padding: 2em 2em 0; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } .envelope .bottom-wrapper { padding: 0 2em 2em; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; transition: all 0.5s ease-in-out; transform-origin: top; transform-style: preserve-3d; position: relative; overflow: hidden; margin-top: -1px; } .envelope .bottom-wrapper:after { position: absolute; content: ''; display: block; opacity: 0; background: #03a9f5; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .envelope form label { display: block; padding-bottom: 0.5em; } .envelope form input, .envelope form textarea { width: 100%; box-shadow: 0; background: transparent; color: #fff; } .envelope form input { border-width: 0 0 0.1em; border-color: #fff; border-style: solid; } .envelope form textarea { border: 0.1em solid #fff; border-radius: 0.25em; } .envelope form .submit-card { background: #fff; color: #222; text-align: center; padding: 0.5em; box-sizing: border-box; background: #fff; width: 100%; border: 0; box-shadow: none; border-radius: 0.25em; cursor: pointer; } .envelope form .input { padding-bottom: 1em; } .envelope .paper { position: absolute; display: block; top: 0; left: 0; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; overflow: hidden; } .envelope .paper.back { top: 0; } .envelope .paper.back:before { content: ''; display: block; width: 0; height: 0; margin-bottom: -1px; border-style: solid; border-width: 0 15em 10em 15em; border-color: transparent transparent #d3d3d3 transparent; transform-origin: bottom; transform-style: preserve-3d; z-index: 0; } .envelope .paper.back:after { content: ''; display: block; background-color: #d3d3d3; width: 30em; height: 20em; } .envelope .paper.front { top: 10em; box-shadow: 0.1em 0.5em 0.5em rgba(0,0,0,0.25); z-index: 0; } .envelope .paper.front:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 10em 15em 0 15em; border-color: transparent #fff; } .envelope .paper.front:after { content: ''; display: block; width: 30em; height: 10em; background: #fff; margin-top: -1px; } @-moz-keyframes envelope-front { 0 { top: 10em; z-index: 0; } 50% { top: 15em; z-index: 9; } 100% { top: 10em; z-index: 9; } } @-webkit-keyframes envelope-front { 0 { top: 10em; z-index: 0; } 50% { top: 15em; z-index: 9; } 100% { top: 10em; z-index: 9; } } @-o-keyframes envelope-front { 0 { top: 10em; z-index: 0; } 50% { top: 15em; z-index: 9; } 100% { top: 10em; z-index: 9; } } @keyframes envelope-front { 0 { top: 10em; z-index: 0; } 50% { top: 15em; z-index: 9; } 100% { top: 10em; z-index: 9; } } @-moz-keyframes envelope-back { 0 { top: 0; } 50% { top: 5em; } 100% { top: 0; } } @-webkit-keyframes envelope-back { 0 { top: 0; } 50% { top: 5em; } 100% { top: 0; } } @-o-keyframes envelope-back { 0 { top: 0; } 50% { top: 5em; } 100% { top: 0; } } @keyframes envelope-back { 0 { top: 0; } 50% { top: 5em; } 100% { top: 0; } } @-moz-keyframes envelope-back-before { 0 { border-color: transparent transparent #d3d3d3 transparent; transform: rotateX(0deg); z-index: 0; } 100% { border-color: transparent transparent #fff transparent; transform: rotateX(180deg); z-index: 99; position: relative; } } @-webkit-keyframes envelope-back-before { 0 { border-color: transparent transparent #d3d3d3 transparent; transform: rotateX(0deg); z-index: 0; } 100% { border-color: transparent transparent #fff transparent; transform: rotateX(180deg); z-index: 99; position: relative; } } @-o-keyframes envelope-back-before { 0 { border-color: transparent transparent #d3d3d3 transparent; transform: rotateX(0deg); z-index: 0; } 100% { border-color: transparent transparent #fff transparent; transform: rotateX(180deg); z-index: 99; position: relative; } } @keyframes envelope-back-before { 0 { border-color: transparent transparent #d3d3d3 transparent; transform: rotateX(0deg); z-index: 0; } 100% { border-color: transparent transparent #fff transparent; transform: rotateX(180deg); z-index: 99; position: relative; } }
var ractive = new Ractive({ el: '#container', template: '#template', data: {} });

Related: See More

Paper Kit
Contact Form
Bootstrap Contact Form
Bootstrap Contact Form

Questions / Comments: