Personalizar formulário de contato nativo do “Blogger”

Curta, e siga-nos!:

1- Acesse layout e clique em adicionar um gadget, na aba que abrir escolha formulário de contato e clique em adicionar, arraste para o final de um dos sidebars.
Agora vamos acessar a aba TEMA no painel de controle do seu blog e clicar em editar HTML.
Dentro da caixa de código-fonte digite Ctrl+F, na barra de pesquisa que aparecer digite ]]></b:skin> e tecle ENTER para localizar.
Acima de ]]></b:skin> cole esse código:

Então salve.
Volte ao painel do seu blog e clique na aba páginas e adicionar uma nova.
Adicionada, agora dê nome, então publique.
Agora clique em HTML logo no topo do editor e clique para editar em modo HTML, cole então este código:

<style type=”text/css”>.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 15px;padding:10px;font-size:14px;color:#777;background:#f4f4f4;border:1px solid #eeeeee;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #f4f4f4;bottom:-32px;content:”;position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #eeeeee;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#FF0073 0%,#B70052 100%);box-shadow:0 1px 1px rgba(255,0,115,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#FF0073 0%,#B70052 100%);font:bold 16px “Helvetica Neue”,sans-serif;height:35px;width:100%;color:#ffffff;display:inline-block;
cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}</style><div class=”widget ContactForm” id=”ContactForm22″><div class=”contact-form-widget”><div class=”form”><form name=”contact-form”><div class=”contactf-message”><textarea class=”contact-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”Message” rows=”5″ value=”Digite sua mensagem aqui” onblur=’if (this.value == “”) {this.value = “Digite sua mensagem aqui”;}’ onfocus=’if (this.value == “Digite sua mensagem aqui”) {this.value = “”;}’></textarea></div><div class=”cbluebutton”><span><input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” type=”button” value=”Enviar” /></span></div><div class=”contactf-name”><input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” size=”30″ type=”text” value=”Nome” onblur=’if (this.value == “”) {this.value = “Nome”;}’ onfocus=’if (this.value == “Nome”) {this.value = “”;}’  /></div><div class=”contactf-email”><input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” size=”30″ type=”text” value=”E-mail” onblur=’if (this.value == “”) {this.value = “E-mail”;}’ onfocus=’if (this.value == “E-mail”) {this.value = “”;}’/></div><div style=”clear:both”></div><div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”></div><div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”></div></div></form></div></div>

Então clique em Atualizar.
Pronto está feito, qualquer dúvidas: contate-me!
Crédito de: FONTE .

Autor.admin

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *