Como adicionar um formulário de contato (página de contato) no Blogger?

Publicados: 2020-11-10

Adicionar um formulário de contato no Blogger é uma tarefa tediosa, pois não oferece suporte a plug-ins como o WordPress.

O que a maioria dos blogueiros do Blogspot faz é buscar a ajuda de sites de terceiros (foxyform, jotform, 123contactform, etc.).

Página de formulário de contato do Blogger Mas hoje, você aprenderá como adicionar uma página oficial de contato no Blogger.

Como eu disse antes, é possível fazer com que códigos de terceiros sejam inseridos em novas páginas, como um passeio no parque. No entanto, o formulário de contato oficial é muito melhor do que aqueles.

Os benefícios do formulário oficial do Blogger

Você receberá a mensagem assim que a enviar. E a capacidade de entrega também é de 100%.
A interface simples torna mais fácil para os visitantes entrarem em contato com você.
Se você conhece a linguagem Cascade Style Sheet (CSS), será fácil para você personalizar o formulário de acordo com sua preferência.
A página inteira não será recarregada para o envio da mensagem.

Eu dividi este tutorial em três seções, adicionando o gadget de contato, ocultando-o e implementando o código oficial em uma nova página.

Parte 1: Adicionando o gadget de contato

Siga as etapas fornecidas abaixo para adicionar um gadget de contato ao seu blog.

Etapa 1 : Visite blogger.com e faça login em sua conta. Se você estiver executando vários blogs, será necessário escolher o blog desejado na lista.

Etapa 2 : clique em Layout na barra lateral esquerda para obter a opção de adicionar gadgets.

Etapa 3 : você pode ver um link Adicionar um gadget no painel principal no lado direito. Clicar nele o levará a uma lista de gadgets.

Etapa 4 : Em seguida, escolha Mais gadgets no lado esquerdo. Agora, você verá o formulário de contato . Basta adicionar o mesmo.

Parte 2: Escondendo o Gadget

Agora, você aprenderá como ocultar o gadget de contato.

Etapa 1 : precisamos brincar com a seção de modelos aqui. Então, clique em Modelos no menu esquerdo.

Passo 2 : Em seguida, clique em Editar HTML e será fornecido todo o código do seu blog em um campo grande.

Etapa 3 : Procure por ]]> </ b: skin> e coloque o código a seguir antes dele.

div # ContactForm1 {
display: nenhum! importante;
}

Em seguida, clique em Salvar para manter as alterações.

Após a terceira etapa, você não verá o widget Contato em seu blog.

Parte - 3: Adicionando formulário de contato a uma página

Você obterá o código do formulário de contato oficial do blogueiro personalizado aqui para ser adicionado e mostrado em uma página separada.

Etapa 1 : Vá para Páginas e clique em Nova página.

Etapa 2 : cole o código a seguir no editor de postagem em HTML após remover tudo nele.

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = ”contact-form-widget”>
<p> Entre em contato preenchendo o formulário abaixo. </p>
<div class = ”form”>
<nome do formulário = ”formulário de contato”>
<p> </p>
Nome
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
O email
<span style = ”font-weight: bolder;”> * </span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </p>
mensagem
<span style = ”font-weight: bolder;”> * </span>
<br>
<textarea rows = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarea>
<p> </p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”alinhamento do texto: centro; largura máxima: 222 px; largura: 100% ”>
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </p>
<p id = ”ContactForm1_contact-form-success-message” class = ”contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class = ”clear”> </div>
<span class = ”widget-item-control”>
<span class = ”item-control blog-admin”>
<a title = ”Editar” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″));” href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = ”18 ″ height =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</span>
</span>
<div class = ”clear”> </div>
</div>

Passo 3: Adicione um título (como Fale Conosco) e, em seguida, altere as configurações fornecidas conforme mostrado abaixo.

Etapa 4: por fim, clique no botão Publicar. Isso é tudo.

As mensagens enviadas a partir deste formulário de contato serão entregues no e-mail do administrador. Se o blog tiver mais de um administrador, todos o receberão.

➜ Outros tutoriais úteis do Blogspot:

Como adicionar um arquivo Robots.txt personalizado no Blogger?
Como enviar o Sitemap do Blogger ao Google Search Console?

Empacotando

Espero que agora você saiba como adicionar a página de contato no blogger. Se você encontrar alguma dificuldade, como entrega zero, mesmo após a mensagem de sucesso, recomendo reinstalar o widget Contato.

E sim, se você tem amplo conhecimento em lidar com snippets de CSS e javascript, você pode continuar customizando a página para um melhor apelo visual.

Não se esqueça de compartilhar esta postagem com seus amigos blogueiros.