Adicionar um formulário de contato personalizado ao seu blog no Blogger é uma ótima maneira de melhorar a interação com seus leitores. Ele permite que eles entrem em contato com você com facilidade e rapidez, seja para fazer perguntas, fornecer feedback ou simplesmente dizer olá.
Neste artigo, vou guiá-lo através do processo de adicionar um formulário de contato personalizado ao seu blog no Blogger. Vamos começar!
Passo 1: Cole o Código HTML/CSS/JavaScript
O primeiro passo é copiar o código HTML/CSS/JavaScript fornecido no artigo original. Este código é responsável pela criação e exibição do formulário de contato.
<div class="contact-form-widget">
<style>
.ContactForm {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.input-area {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
resize: vertical;
}
.contact-form-button {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.notif-area {
margin-top: 15px;
text-align: center;
}
.contact-form-error-message {
color: #ff0000;
}
.contact-form-success-message {
color: #008000;
}
</style>
<div class='ContactForm' id='ContactForm1'>
<form name='contact-form'>
<div class='input-area'>
<label for='ContactForm1_contact-form-name'>Nome</label>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email'>E-mail<span>*</span></label>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email-message'>Mensagem<span>*</span></label>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea>
</div>
<div class='input-area'>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' />
</div>
<div class='notif-area'>
<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>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
window['blogger_templates_experiment_id'] = "templatesV1";
window['blogger_blog_id'] = 'SEU_BLOG_ID_AQUI';
BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\xSEU_BLOG_ID_AQUI', '//www.SEU_DOMINIO_DO_BLOG_AQUI/',
'SEU_BLOG_ID_AQUI');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null,
document.getElementById('ContactForm1'), {
'contactFormMessageSendingMsg': 'Enviando...',
'contactFormMessageSentMsg': 'Sua mensagem foi enviada.',
'contactFormMessageNotSentMsg': 'Não foi possível enviar a mensagem. Por favor, tente novamente mais tarde.',
'contactFormInvalidEmailMsg': 'Um endereço de e-mail válido é necessário.',
'contactFormEmptyMessageMsg': 'O campo de mensagem não pode ficar vazio.',
'title': 'Contact Form',
'blogId': 'SEU_BLOG_ID_AQUI',
'contactFormNameMsg': 'Name',
'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message',
'contactFormSendMsg': 'Enviar',
'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]></script>
Passo 2: Faça as Modificações Necessárias
Antes de incorporar o código ao seu blog, você precisará fazer algumas modificações para que ele funcione corretamente.
- Substitua SEU_BLOG_ID_AQUI pelo ID do seu blog. Você pode encontrar essa informação na URL do painel do Blogger quando estiver logado.
- Atualize 'http://SEU_DOMINIO_DO_BLOG_AQUI/' para refletir o domínio do seu blog.
Passo 3: Incorpore o Código no Blogger
Agora que você fez as modificações necessárias, é hora de incorporar o código ao seu blog.
- Faça login no seu painel do Blogger.
- Vá para "Tema" e clique em "Editar HTML".
- Cole o código no local desejado, preferencialmente onde deseja exibir o formulário de contato.
- Salve as alterações.
Personalizando o Formulário de Contato
O código fornecido no artigo original é um bom ponto de partida, mas você pode personalizá-lo para atender às suas preferências estéticas ou funcionais.
Aqui estão algumas coisas que você pode fazer para personalizar o formulário de contato:
- Altere o CSS para alterar a aparência do formulário.
- Adicione ou remova campos do formulário.
- Altere as mensagens de notificação do formulário.
Testando o Formulário de Contato
Depois de personalizar o formulário de contato, é importante testá-lo para garantir que ele funcione corretamente.
Para fazer isso, preencha o formulário e clique no botão "Enviar". Você deve receber uma mensagem de notificação de que o formulário foi enviado com sucesso.
Conclusão
Ao seguir esses passos, você terá com sucesso adicionado um formulário de contato personalizado ao seu blog no Blogger. Personalize conforme necessário para atender às suas preferências estéticas ou funcionais. Lembre-se de testar o formulário para garantir que tudo funcione conforme o esperado. Boa sorte!
Adições e Informações Adicionais
Além das informações fornecidas no artigo original, aqui estão algumas outras coisas que você pode considerar ao adicionar um formulário de contato personalizado ao seu blog no Blogger:
- Use um nome de campo significativo para o campo "Nome". Isso ajudará seus leitores a saber como se dirigir a você.
- Peça aos leitores que forneçam um endereço de e-mail válido. Isso permitirá que você responda às suas perguntas ou comentários.
- Ofereça aos leitores a opção de enviar uma cópia de sua mensagem para si mesmos. Isso pode ser útil para eles se precisarem consultar suas informações posteriormente.
Ao seguir essas dicas, você pode criar um formulário de contato que seja útil e informativo para seus leitores.
Nenhum comentário:
Postar um comentário