Efeito JQuery - Elegante Carta com Formulário de Contato - Exclusivo

Nesta postagem compartilho com vocês este excelente código. O código é uma carta que se abre automaticamente através de um efeito JQuery. Por ter este efeito bem criativo, o código deixa o design do seu blogger muito mais profissional. 

Espero que gostem!!!

Para colocar no seu blogger... Agora, entre em "Layout" - "Adicionar um Gadget" -  "HTML/JavaScript" e cole o seguinte código

<style>

#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHYsujw-XUesXsJ6oozErecDXul2kKxF7e8qiAhHhYrAI3-OSnrInz46up8KO8ZrIoraj-hqlj5WgZd8JNhJWrHxDy2Bbs_S_23haynqU_QHIslQ9ijg3C_Xt-oBPao_ppulMtZW0Ywg/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_O2NvuNKouuIRpPtZChGLQct7dUtVXSsFyWn-qI5U_Z-NRkqxhMOIBqMgVmPVzKpuyl3gXNmg-8q_rNwpo2TZ4lhVbKwe0T1lXuGY288MMy6pBqccWcJ96XpUUjxxHkje_UfxxBsJNw/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#e9fbe9; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #52e052; box-shadow: 0px 0px 5px #00ff00; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMMn0a_kMYH_0sQdIdA3OeM4j_1PHvjls0fYcT6mG0fW-TzyYZA9KqYVK7Z7vyizucMYWVRpdyEEYlh6d4hKZTikbQQN0tbk5_WaDkUy43cF-ehBD1IBnks9ObqeWaeGlpAcCp-6tJTM/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWdQHp-sNcIawjhSFMDenayInjJTT9SO_bxIObfyjN1fOAvpzrRta1tYxJSdSQT1M-eCOSBokqeqEw691hf-onxSbnbRhIF1LOb4GPfBbd42cayQmYvpjo6Qoo0cV8hMNunOkQ6EgnWCM/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRXLXmXmMWh56z2j3quVHch22g6i837p8tnvRCleUvcRthubP_dhuegWR4hnNL-15-Rxzl-4_l-9pAuw2u5SFBzn5dIlzyIG0MYyTW9XzpF-xY-Oh5TUhaddxAqWo7vKz5AMA721NutzE/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }

</style>




<div id="wrap-contact">

<div id='form_wrap-contact'>

<form id="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Nome" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensagem" rows="5"></textarea>

<input id="ContactForm1_contact-form-submit" type="button" value="Enviar" />

<div style="max-width: 222px; text-align: center; width: 100%;">

<div id="ContactForm1_contact-form-error-message">

</div>

<div id="ContactForm1_contact-form-success-message">

</div></div></form></div></div>

Você pode personalizar as cores do formulário se você quiser. Eu destaquei no código as partes a serem modificadas para mudar a cor. Use sua criatividade.

Veja um DEMO do código ABAIXO:

Qualquer dúvida, não deixe de perguntar nos comentários abaixo.