Como Adicionar um Formulário de Contato no Blogger na Barra Lateral ou Pagina Estática: Tutorial Completo

Admin
Admin
Aprenda como adicionar um formulário de contato ao seu blog no Blogger, seja na barra lateral ou em uma página estática, com dicas de personalização e CSS limpo e responsivo, formulário de contato, blogger, adicionar formulário, CSS responsivo, otimização SEO, página estática, dicas de personalização, tutorial



 

Como Adicionar um Formulário de Contato no Blogger

Aprenda a inserir um formulário de contato de forma simples e prática em seu blog no Blogger, seja na barra lateral ou em uma página estática. Este tutorial oferece dicas de personalização e um código CSS limpo e responsivo.


1. Adicionar Formulário de Contato na Barra Lateral

Para adicionar o formulário de contato na barra lateral do seu blog, siga os passos abaixo:

  1. Acesse o painel do Blogger e clique em "Layout".
  2. Escolha o local onde deseja adicionar o formulário e clique em "Adicionar um Gadget".
  3. Na lista de gadgets, selecione "Formulário de contato".
  4. Salve as modificações.

Com isso, o formulário de contato será exibido na barra lateral do seu blog.

2. Adicionar Formulário de Contato na Página Estática

Se você prefere adicionar o formulário de contato em uma página separada, siga este passo a passo:

  1. Crie uma nova página estática no Blogger.
  2. No editor da página, clique na aba "HTML".
  3. Cole o seguinte código dentro da aba HTML:
    4. 
<div id="formcontact">
<p>Preencha os campos abaixo para entrar em contato. Os campos com * são obrigatórios.</p>
<form name='contact-form'>
<div><b>Seu Nome:</b> *</div>
<input class='contact-form-name' name='name' type='text' />
<div><b>Seu E-mail:</b> *</div>
<input class='contact-form-email' name='email' type='text' />
<div><b>Sua Mensagem:</b> *</div>
<textarea class='contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button-submit' type='button' value='Enviar'/>
<div class='contact-form-error-message'></div>
<div class='contact-form-success-message'></div>
</form>
</div>
  4. Salve a página e publique.

Pronto! Agora seu formulário de contato estará funcionando em uma página separada, ideal para blogs que desejam organizar melhor suas informações.

3. Personalizar o Formulário de Contato no Blogger

Para personalizar o formulário de contato e deixá-lo com o visual adequado ao seu blog, você pode aplicar algumas personalizações de CSS. Siga os passos:

  1. Acesse "Modelo" > "Editar HTML".
  2. Procure pela tag ]]> que fica ao final do CSS do seu template.
  3. Cole o seguinte código de CSS antes dessa tag:
    4. 
/* Formulário de Contato */
#formcontact {
    background: #ffffff;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 8px;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
}

.contact-form-button-submit {
    width: 150px;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form-button-submit:hover {
    background-color: #FF8C00;
}
  4. Salve as alterações.

Isso deixará seu formulário mais moderno e responsivo. Além disso, o código oculta o formulário na barra lateral, mas mantém o funcionamento na página estática.

4. Dicas de CSS Limpo e Responsivo

Manter o código CSS limpo e responsivo é essencial para garantir que seu blog carregue rapidamente e ofereça uma boa experiência ao usuário. Aqui estão algumas dicas:

  • Utilize media queries para garantir que o formulário se adapte a diferentes tamanhos de tela.
  • Prefira cores claras e contrastantes para garantir boa legibilidade dos textos.
  • Evite exagerar no uso de bordas e sombras, mantendo o design minimalista e funcional.

Quer saber mais sobre como melhorar o design do seu blog? Acesse nosso guia de design para blogs.

Esperamos que este tutorial tenha ajudado! Se você gostou, compartilhe e não deixe de conferir outros tutoriais para Blogger.

Tags: Artigos, Blogger
AbrirFecharComentário