Formulário de Contato do Blogger
31/07/2014O Blogger já disponibilizou seu gadget de Formulário de Contato, porém o formulário fica somente na barra lateral do seu blog, o que acaba deixando a sidebar cheia. Mas hoje vamos aprender com alguns truques de HTML como esconder o formulário da barra da lateral e utilizar o recurso fora de um Gadgets, em um pagina separada, somente para os contatos.
Passo 1: Criar a pagina de contatos, para isso é só ir até a opção Paginas e clicar no botão Nova Pagina.
Passo 2 : Irá aparecer a pagina conforme abaixo:
Passo 3 : Você irá clicar na opção HTLM e colar o seguinte código:
<form name=’contact-form’>
<div>Seu Nome:</div>
<input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/>
<br/><br/>
<div>Seu E-mail: <em>(obrigatório)</em></div>
<input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/>
<br/><br/>
<div>Sua mensagem: <em>(obrigatório)</em></div>
<textarea class=’contact-form-email-message’ id=’ContactForm1_contact-form-email-message’ name=’email-message’ rows=’5′></textarea>
<p></p>
<input class=’contact-form-button contact-form-button-submit’ id=’ContactForm1_contact-form-submit’ type=’button’ value=’Enviar Mensagem’/>
<div style=’text-align: center; max-width: 450px; width: 100%’>
<p class=’contact-form-error-message’ id=’ContactForm1_contact-form-error-message’></p>
<p class=’contact-form-success-message’ id=’ContactForm1_contact-form-success-message’></p>
</div>
</form>
Agora publique a página normalmente. A pagina já estará disponível para os seus leitores e o formulário será exibido, porém ainda não receberá mensagens, então agora vamos acertar isso.
Passo 4 : vamos editar o HTML para que você possa receber as mensagens do formulário no seu e-mail
No seu perfil do Blogger, vá na opção Modelo e depois clique em Editar HTML. Na pagina que irá abrir é só clique no menu “Ir para um widget” e escolha a opção “ContactForm1″ conforme imagem abaixo:
Será necessário expandir as linhas do gadget que ficam escondidas nas setas pretas, para isso basta apenas clicar em cima das setas.
Depois de expandir a setinha da linha <b:widget id=’ContactForm1′ locked=’false’ title=’Contato’ type=’ContactForm’>, logo abaixo dessa linha existe o seguinte código:
<b:if cond=’data:title != ""’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’contact-form-widget’>
<div class=’form’>
<form name=’contact-form’>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class=’contact-form-name’ expr:id=’data:widget.instanceId + "_contact-form-name"’ name=’name’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<input class=’contact-form-email’ expr:id=’data:widget.instanceId + "_contact-form-email"’ name=’email’ size=’30’ type=’text’ value=”/>
<p/>
<data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>
<br/>
<textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + "_contact-form-email-message"’ name=’email-message’ rows=’5’/>
<p/>
<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + "_contact-form-submit"’ expr:value=’data:contactFormSendMsg’ type=’button’/>
<p/>
<div style=’text-align: center; max-width: 222px; width: 100%’>
<p class=’contact-form-error-message’ expr:id=’data:widget.instanceId + "_contact-form-error-message"’/>
<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + "_contact-form-success-message"’/>
</div>
</form>
</div>
</div>
Apague-o e pronto! Você verá que o formulário não está mais na barra lateral, somente na sua pagina. Acesse sua pagina do formulário e faça um teste para verificar se está funcionando. A mensagem será enviada para o seu e-mail padrão de acesso à conta do Blogger.
CBBlogers by Grazi Forti
visita o meu blog e seja o meu seguidor por favor pessoal