Como usar o novo Formulário de Contato do Blogger em Páginas Estáticas


O Blogger lançou um novo Gadget de Formulário de Contato, que pode ser incorporado à barra lateral. O problema é que não é prático e deixa a sidebar feia e cheia. Através desse tutorial, aprenda a usar este recurso fora de uma gadget, colocando numa página estática do Blogger só para contato.


Se você não viu o novo Gadget do Blogger, recomendo que leia para entender:


A parte ruim desse elemento de página (gadget) é que ele só serve para ser colocado na barra lateral (sidebar) do Template do seu Blog. Não é muito eficiente assim e deixa o blog feio e cheio de coisas.

A primeira coisa a fazer é criar uma página estática. Dê um nome para o título da página como preferir, algo como “Contato”. No corpo da página você vai clicar na aba “HTML” para poder colocar um código.


Então adicione o seguinte código onde seria escrito o conteúdo da Página. Não altere nada para não ter erros no funcionamento:

<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.
Você já verá a página funcionar e o formulário ser exibido, só que ele ainda não recebe mensagens. É preciso mostrar ao Blogger que aquele formulário existe para ele aceitar e fazer funcionar.
A primeira coisa a fazer é adicionar o Gadget do novo Formulário de Contato. Sim. Você vai adicionar ele na sua barra lateral como ensinado no tutorial “Formulário de Contato do Blogger GADGET“. Isso será temporário. Agora vamos excluir alguns trechos do código desse novo Gadget diretamente na fonte.
Para isso vá ao menu “Modelo”, clique no botão “Editar HTML”, para poder ver todo o código fonte do seu Template:


Na janela que abrir, clique no menu que diz “Ir para um widget” e marque a opção “ContactForm1″ ou semelhante, como na imagem ilustrativa abaixo:


Isso levará você até as linhas do novo Gadget que está inserido na sua barra lateral. É preciso expandir as linhas desse gadget que ficam escondidas nas setas pretas. Quando expandir você verá algo semelhante a isso que está na próxima imagem:

Todas essas linhas que estão marcada na imagem devem ser excluídas.
Cuidado para não apagar as linhas erradas. Isso eliminará a exibição do Gadget da barra lateral, mas manterá o funcionamento de seus recursos. É assim que faremos o formulário da página estática funcionar sem erros.
Depois de excluídas as linhas indicadas acima, o seu código ficará assim:

Salve o modelo para aplicar as mudanças.
Agora vá à página estática do Formulário que você criou e teste para vê-lo funcionar. A mensagem será enviada para seu e-mail padrão da conta de acesso ao Blogger.





16:00
Marcadores:

Postar um comentário

[facebook][disqus][blogger]

Alberto Monteiro

Formulário de contato

Nome

E-mail *

Mensagem *

Tecnologia do Blogger.
Javascript DisablePlease Enable Javascript To See All Widget