Ontem me deparei com uma surpresa: Em Maio o blogger disponibilizou seu próprio formulário de contato! Testei e funciona super bem. Então hoje, vou ensinar 2 maneiras de colocar ele no seu blog: A primeira é a mais simples, e a segunda é a melhor! Mas atenção: Antes de começar as alterações, escolha onde quer que fique seu formulário e só faça um dos tutoriais.
Adicionando o Formulário de Contato na sidebar
1.Vá na aba Layout do seu menu do blogger.
2. Na área da sidebar, clique em Adicionar um Gadget.
3. Na página que abriu, clique em Mais gadgets. // 4. Clique no "+" como mostra a imagem.
5. Salve. (se quiser mude o título)
O Formulário aparecerá assim na sua sidebar! (fundo e bordas podem variar de acordo com o estilo do seu layout).
Super fácil né? Mas ficaria melhor se não fosse na lateral do blog... Pois vou ensinar como colocar esse formulário em uma página!
Adicionando o Formulário de Contato em uma Página
1. Vá na aba Páginas do seu menu do blogger. // 2. Clique na página que deseja que fique o formulário.
3. (O padrão é a página abrir em Escrever) Clique em HTML.
4. Adicione o seguinte código:
<div class="contato"><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></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></em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5' style='max-width: 450px;'></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></div>
5. Atualize/Salve.
6. Vá na aba Modelo do seu menu do blogger. // 7. Clique em Editar HTML.
8. Clique em Ir para um widget > Blog1
9. Cole o seguinte código abaixo de "Blog1".
<b:widget id='ContactForm1' locked='false' title='Formulário de contato' type='ContactForm'><b:includable id='main'><b:include name='quickedit'/></b:includable></b:widget>
Ficará assim:
10. Visualize e se estiver tudo ok no seu layout, salve.
Agora é só ir até a página que você colocou o código do passo 4 e testar seu formulário!
A mensagem vai para o seu e-mail da conta do blogger.
PS: O código do passo 4 é do Ferramentas Blog, eu adicionei apenas um estilo. Segui o tutorial de lá, mas não cheguei ao resultado que queria. Mudando algumas coisas consegui, e acho que até ficou mais fácil de entender, será?
Qualquer dúvida é só perguntar!
Oi, eu estou tentando modificar um layout do Difluir, e quando eu sigo os passos, no fim o formulário que eu coloquei na coluna continua lá :c
ResponderExcluirOs códigos não são compatíveis?
Consegui arrumar (:
ExcluirQue bom que conseguiu, qualquer dúvida é só perguntar =)
ExcluirBeijinhus
Mary, não estou conseguindo achar onde é para colocar o código :c
ResponderExcluirOi! Procura por essa linha no html:
ExcluirDepois siga a partir do passo 9 :)
Veja se dá certo!
Ps: Use Ctrl+f pra procurar mais rápido!
Beijinhus
Como faz para colocar esse gadget eu acho... "do Leia outras postagens do blog"
ResponderExcluirObrigadaaa
Oi Eloane eu usei o http://www.linkwithin.com/learn e personalizei!
ExcluirIndico que leia essa postagem aqui: http://isjackiezzdream.blogspot.com.br/2012/06/personalizando-o-gadegets-de-postagens.html
Beijos!