Início
> Blocos Prontos
> Blogger Profissional
> curso blogger
> curso blogspot
> formulário de contato Blogger
> formulário de contato em página separada
> Página de contato Blogger
> widget personalizado
Como colocar o formulário de contato em uma página separada ?
Para criar um Formulário de Contato em uma página separada, Crie uma nova página com o conteúdo do widget e exclua do código HTML a parte visível do "main" ... Veja a baixo como:
O Blogger do Google lançou a algum tempo um widget de
Formulário de Contato. Esse formulário é capas de enviar para o e-mail do
administrador do blogger uma mensagem direta de qualquer um que acessar o site.
Porém esse widget é por padrão inserido em uma seção que
geralmente é mostrada igualmente em todas as páginas (Página inicial, post,
pesquisa, erro, etc).
Nesse post irei te ensinar como colocar esse formulário em
uma página estática separada.... Vamos lá?
Se você não sabe o que é uma página Estática Veja esse post
antes: Como Criar Páginas estáticas no blogger?
Primeiramente você deve criar uma página estática, como
ensinamos no post acima. 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:
<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>
|
Publique a página normalmente, perceba que o formulário já
vai aparecer na página online, porém este formulário ainda não está funcional.
Para isso adicione ao seu tema um formulário padrão na
lateral do seu template e iremo modificar uns códigos direto no HTML... Acesse
o Painel do Blogger > Tema > Editar HTML > Localize o widget padrão de
Contato.
Logo após o código “<b:includable id='main'>” exclua
todo o conteúdo até sobrar apenas o “<b:include name='quickedit'/>”
dentro.
Seu Código ficará assim:
Clique em Salvar o Modelo
e sua página estará pronta para uso, faça um teste antes de divulgar o seu
blogger.
Espero ter te ajudado... Se vc conseguiu compartilhe o link
do seu blogger a baixo, se não compartilhe sua dúvida nos comentários.
Para personalizar a aparência do seu formulário não mexa
nesse código, mude apenas o CSS.
Acompanhe esse blog para ver dicas valiosas e crie o seu
blogger profissional atravéz dos nossos blocos prontos.
6 comentários:
Fiz o indicado, mas a eliminação das linhas de comando cousou a desconfiguração da exibição do blog em aparelhos móveis
Opa... Blz... alguns templates já tem essa configuração de página de contato separada...
eu elimino as linhas porque se tiver dois widgets com o mesmo ID geralmente não funciona.
um atributo que eu uso pra exibir o conteúdo no celular é o mobile='yes'...
https://blogger-profissional.blogspot.com/2020/02/como-modificar-versao-mobile-do-blogger.html
Vê se resolve isso. se não resolver entra em contato que eu te ajudo.
O formulário nativo do meu blog não está funcionando há algum tempo. Será que mais alguém está com esse problema?
Eu tenho mais de 10 Blogs e esse problema esta acontecendo com dois deles.
Acredito que seja algum problema com a atualização que o blogger esta fazendo, ou pelo fato de enviar muitas mensagens de teste para mim mesmo.
Não sei o que realmente é, mais realmente atrapalha demais agente.
Excelente tutorial vou testar no meu blog sim, mas e o feed do instagram dentro do blogger é possível um tutorial de como fazer
O formulário não funciona na versão mobile do blog.
Tem como resolver isso?
Postar um comentário
Deixe um comentário com seu Feedback sobre este Conteúdo.