Formulário de Contato do Blogger

O  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 != &quot;&quot;’>

<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 + &quot;_contact-form-name&quot;’ 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 + &quot;_contact-form-email&quot;’ 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 + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>

<p/>

<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + &quot;_contact-form-submit&quot;’ 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 + &quot;_contact-form-error-message&quot;’/>

<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>

</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

Facebook / Twitter / Pinterest / Instagram