Jeny

Sempre que estou trabalhando em algum blog, costumo conversar sobre questões importantes para o blog, como a coerência do layout com a personalidade do blog, a forma correta de se compartilhar os posts em grupos, e acima de tudo, uma página de contato.

Você pode pensar, – aaah pra que isso, se alguém quiser falar comigo, vai me mandar uma mensagem – Errado!

Ter uma página específica para contato, é tão importante quanto um Mídia Kit. É ali que as empresas vão atrás de você, e onde podem acontecer diversas parcerias.

Tão importante quanto a página em si, é o uso de formulários de contato. Vou me colocar como exemplo, se entro em um blog/site, e quero entrar em contato com o dono e não tem formulário, vou ficar com preguiça de copiar o endereço de email, abrir o meu email, escrever uma mensagem…………….. Viu como é chato? Ou até, posso esquecer de fazer isso, e lá se vai outra parceria ou contato…

CALMA, VOCÊ NÃO TEM FORMULÁRIO DE CONTATO NO BLOG? Vamos mudar isso agora!

Vou colocar 3 opções, para Blogger, WordPress (.com/gratuito) e WordPress (.org).

PARA BLOGGER

Antes de tudo, você precisa ir até a aba LAYOUT, e em qualquer área, clique para Adicionar um Gadget. E clicando em Mais Gadgets, escolha a opção Formulário de Contato. Salve na caixinha do Formulário, e depois na aba Layout.

Agora, corre pra aba Modelo, e em Editar HTML. Clique dentro da caixa do código, e clique em CTRL + F, para abrir a caixa de pesquisa. Dentro da caixa, digite: b:skin. E aperte Enter.

Clique nesses três pontinho () entre os b:skin. E depois, abra a caixa de pesquisa novamente, e digite dessa vez: /b:skin.

Agora, antes do ]]></b:skin>, você vai colar o seguinte código:

#ContactForm1{ display:none!important;}

Salve, e vamos para onde você quer colocar o formulário. Eu, quero colocar na página de Contato do blog. Dentro da página ou post escolhido, troque para opção HTML, e cole o código abaixo:

<div class="form">
<form name="contact-form">

   <!-- Nome -->
Preencha o formulário abaixo para falar comigo, ou mande um email para contato@jenylima.com<br />
<p>Nome</p> <br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" /> 

   <!-- Email -->
<br />
<p>Email</p> <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="email" /> 

   <!-- Mensagem -->
<br />
<p>Mensagem</p> <br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" row="5"></textarea> 

   <!-- Botão Enviar --> 
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /> 

 <!-- Validação --> 
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>

<!-- Estilo -->
<style>
 .contact-form-name, .contact-form-email, .contact-form-email-message {
 display: block; 
 font-size: 14px; 
 line-height: 1.42857143; 
 background: #fff;
 border-radius: 6px; /*Borda, se quiser quadrado, apague a linha*/
 max-width:100%;
 width:300px; /*Largura da caixa*/
 }

 #ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 padding: 15px;
 border: 1px solid #d9d9d9; /*Cor e espeçura da borda*/
 margin-bottom: 20px; /*Espaço entre as caixas*/
 }

 #ContactForm1_contact-form-email-message {
 border: 1px solid #d9d9d9;
 padding: 15px;
 margin-bottom:20px; /*Espaço entre as caixas*/
 }

 #ContactForm1_contact-form-submit{
 padding: 0px 15px 0 15px;
 border: none;
 background: #FF4E7E; /*Cor do Botão*/
 }

 p {
 font-weight: bold;
 margin: 0 0 5px;
 color:#000; /*Cor do Texto*/
 }
</style>

</form>
</div>

Na parte de cima, a visão de como vai ficar no HTML, e na de baixo, a visão quando você voltar para a visão normal:

 

Faça as mudanças que achar necessária, e salve 🙂

PARA WORDPRESS (.com e .org)

Faça login no seu painel normalmente, vá até a página que quer colocar o formulário. Eu escolhi a página de Contato novamente.

Se você estiver no wordpress.com, vai existir, como padrão, uma caixinha chamada Adicionar Formulário de Contato. Clique nela. Se estiver no wordpress.org, instale o plugin Jetpack, ative, e logo após, vai aparecer a mesma opção no editor de posts e páginas. O resto é bem intuitivo, tanto para adicionar campos, como para remover e editar, e também para configurar as notificações por email.

Depois de configurar tudo, clique em Adicionar esse formulário ao meu post. O formulário não irá aparecer no editor, para dar uma olhada, clique em Visualizar, para ver como fica:

***

Bom gente, é isso, qualquer dúvida, é só gritar aqui nos comentários ein.

Um beijo, e até mais 🙂

Compartilhe!


Me segue pela internet

E não deixe de comentar


Olha o que as pessoas já falaram

Agora me diz o que você achou

Seu email não será publicado ou compartilhado. Os itens com * são obrigatórios (: