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 perso...
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:
- Acesse o painel do Blogger e clique em "Layout".
- Escolha o local onde deseja adicionar o formulário e clique em "Adicionar um Gadget".
- Na lista de gadgets, selecione "Formulário de contato".
- 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:
- Crie uma nova página estática no Blogger.
- No editor da página, clique na aba "HTML".
- Cole o seguinte código dentro da aba HTML:
- Salve a página e publique.
<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>
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:
- Acesse "Modelo" > "Editar HTML".
- Procure pela tag
]]>que fica ao final do CSS do seu template. - Cole o seguinte código de CSS antes dessa tag:
- Salve as alterações.
/* 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;
}
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.
COMMENTS