Como Criar um Formulário para Captação de Email para Newsletter com CSS

Criar Site no Webnode

newsletter

Com o CSS é possível remover toda a formatação visual do HTML, fazendo com que aumente a velocidade de carregamento das páginas entre outras tantas possibilidades. Com CSS é possível fazer coisas impressionantes, como transformar um simples formulário de captação de email em um formulário mais “convidativo” e combinando com seu Layout.

Definindo as marcações do HTML

Abra o Dreamweaver (ou o bloco de notas), e adicione os seguintes códigos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>
</head>
<body>
<section id="wrapper">
<div id="news">
<h1>Newsletter</h1>
<hr />
<h3>Receba nossas atualizações em seu e-mail! É grátis.</h3>
<form  action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('URL do seu feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>
<input type="text"  name="email" id="e-mail"/></p>
<input type="submit" class="solid" value="Assinar" />
<input type="hidden" value="Nome do seu Feed" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
</form>
</div>
</section>
</body>
</html>

O código acima irá adicionar à página um campo de texto, um botão e o texto do formulário, neste momento esta é a aparência dele.

formulário sem formatação

Formatação com CSS:

Agora as mudanças começam a aparecer, antes da marcação HTML adicione o seguinte código:

<style type="text/css">
#news {
width: 260px;
height: 270px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
</style>

O código acima ira dar o formato e cor do formulário, este código só se aplica ao background do formulário, veja o resultado:

definindo background

Estilizando a caixa de texto:

Para a caixa de texto digite o seguinte código, abaixo da ultima chave ”}” do CSS.

#e-mail {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 30px;
margin-left: 10px;
border: 1px solid #999999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

Este código dará a caixa de texto sombra e aparência de profundidade.

Estilizando o botão Enviar.

O código do botão enviar dará a ele cantos arredondados e sombra, para isso utilize o código a seguir:

input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-top:20px;
margin-left: 60px;
background-color: #d5d5d5;
color:#2c2c2c;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #adadad;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
input[type="submit"].solid:active {
background: #d5d5d5;
position:relative;
top: 5px;
border: 1px solid #adadad;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;}

Estilizando o texto:

Para as tags H1 e H3 utilizaremos este código:

h1 {
font:26px Verdana, Arial, Helvetica, sans-serif; color:#999999;
font-weight:bold;
margin-left:50px;
margin-top:15px;
}
h3 {
font:15px Verdana, Arial, Helvetica, sans-serif; color:#999999;
margin-left:5px;
margin-top:3px
}

Modificando os dados do formulário:

Substitua o “URL do seu feed” pelo seu endereço de feed.

EX.:

“uri=Url do seu feed” troque por
http://feedburner.google.com/fb/a/mailverify?uri=RcTutoriais&loc=pt_BR

Procure por “URI=”Nome do seu feed”” e substitua pelo nome do seu feed.

EX.:

uri=”nome do seu feed” troque por “RcTutoriais”

Teste o código no seu navegador, caso esteja funcionando  copie o código que está entre as tags “<body> e </body>” e adicione como um widget no seu blog.

Este formulário foi testado no WordPress.org, Blogger e Webnode utilizando os navegadores Google Chrome, Firefox e Safari.

Lembre-se de realizar o backup do seu blog e tema antes de adicionar qualquer código.

Por que só utilizamos o conteúdo da tag “<body>” ?

Só utilizamos as outras tags para que você possa visualizar todas as etapas da construção do formulário no navegador antes de adicionar no blog. Assim ficará mais fácil de corrigir algum erro ou fazer alguma modificação.

Créditos: Escola Criatividade

Este é um guest post escrito por Rhenan Cardozo que escreve no RC Tutoriais

Sobre Convidado

Este artigo foi escrito por um colaborador convidado (guest post).
Adicionar a favoritos link permanente.

22 Comments

  1. Bruno Simomura

    Olá Rhenan,

    Bem legal e intuitivo, obrigado por compartilhar a criação de formulário já com CSS.

  2. Olá amigo, com certeza este formulário pode ajudar a muitas pessoas que trabalham com internet marketing como eu, captar e-mails de contatos, e ao mesmo tempo manter seus visitantes atualizados.
    Eu já tenho um sistema assim funcionando em meu blog, mas sua dica pode ser essencial para quem ainda não tem e pretende criar sua própria lista autorizada.

  3. Dica importantíssima! Todos nós que temos blog temos que ter um relacionamento mais perto de nossos leitores, e a captação de emails para envio de feeds ou mesmo de newsletter, é um dos fatores mais importantes, em meu blog uso o popup domination, que é uma forma fantástica de fazer isso!

  4. Muito bom tutorial. Fora que fazer css e html para e-mail é uma tarefa dificil, pois, cada programa de e-mail renderiza de maneira diferente e as vezes é muito limitado e até ultrapassado.

    Ficou bem simples o desenvolvimento, parabéns Celso.

    • Fazer Facebook, o exemplo mostrado acima não é para o layout do email de newsletter e sim para o cadastro de emails NO SITE para o envio dessas newsletter,

  5. Olá Rhenan Cardozo. Parabéns pelo artigo. Realmente é muito importante deixarmos o formulário do feedburner mais personalizado e atrativo para os nossos leitores.
    Abraço!

  6. Ótimo Tutorial, tava precisando dele.
    Celso gostaria de fazer uma pergunta: Tenho alguns dominios registrados, e gostaria de saber se teria a possibilidade de vende-los, e se puder me indicar um serviço gratuito seria melhor.

    Obrigado desde já, Obrigado e Parabens pelo site.

    • Lucas,
      O pessoal só compra um domínio se ele for muito bom ou se já estiver recebendo visitas. Não sei se é o seu caso.
      De qualquer forma, eu não sei de um site eficaz que você possa vendê-los. Experimenta divulgar em um fórum para webmasters.

      Abraço!

  7. Gostaria de entender melhor.
    Este assunto muito me interessou, mas fugiu um pouco de meu entendimento.
    Onde que coloco em meu blog/site, todos estes códigos?
    Tem como obter uma explicação?

    • Edvaldo,
      Aí vai depender de como você está criando seu site? Qual é o serviço ou programa?

      Abraço!

      • Olá Edivaldo,
        Caso esteja usando o WordPress.org, ou Blogger adicione como um Widget, no Webnode basta adicionar como Código Embutido.

        Qualquer dúvida deixe um comentário.

        Até

  8. OLA ! Eu sou novo nessa area eu gostaria de entender se eu consigo identificar os imails ? Se sim aonde eu vejo ?
    Obrigado

    • Flavio,
      É possível sim. Você deve acessar o perfil do feed desejado, clicar na aba “Publicize”, e no menu lateral em “Email Subscriptions”, em “Subscription Management” e na página em “View Subscriber Details”.

      Abraço!

  9. Rhenan coloquei no meu blog e fico muito legal, parabeéns, mas eu queria saber como tiro esse espaço que fico embaixo do botão “Assinar”?

    Abraços!!!

    • Olá Rosiel,
      Obrigado. Altere o valor do Height do seletor #news, notei em seu blog que o formulário ficou com uma linha acima do texto, caso queira retira-la remova a tag hr que está localizada acima da h3.

      Até.

      • Obrigado por me ajudar Rhenan,
        Agora como que tiro esse outro espaço que fica embaixo do texto “Receba as notícias no seu e-mail:”?

        Abraços!!!

  10. Diminua o valor de margin-top do seletor #e-mail.

    Até.

    • Mais uma vez muito obrigado Rhenan, não tenho mais nenhuma dúvida, tinha esquecido de perguntar como tirava aquela linha que ficava acima do texto, mas você mesmo percebeu e já me falo rsrs.

      Abraços!!!

  11. Central de Informações

    Uma ótima idéia.

    Faz tempo que estou querendo criar uma Newsletter própria, pois o Feedburner não tem funcionado nada corretamente no meu site.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *