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

Convidado

Este artigo foi escrito por um colaborador convidado (guest post).

22 comentários em “Como Criar um Formulário para Captação de Email para Newsletter com CSS

  • 05/01/2012 em 9:21 am
    Permalink

    Olá Rhenan,

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

    Resposta
  • 05/01/2012 em 10:21 am
    Permalink

    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.

    Resposta
    • 05/01/2012 em 10:38 am
      Permalink

      Marques, o que você usa para captar emails?? solução própria, algum plugin?

      Resposta
  • 05/01/2012 em 10:37 am
    Permalink

    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!

    Resposta
    • 05/01/2012 em 12:37 pm
      Permalink

      Com certeza, a coleta de e-mails faz parte do sucesso de um blog ou qualquer negócio na internet.

      Resposta
  • 05/01/2012 em 12:41 pm
    Permalink

    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.

    Resposta
    • 05/01/2012 em 1:08 pm
      Permalink

      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,

      Resposta
  • 05/01/2012 em 3:36 pm
    Permalink

    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!

    Resposta
    • 06/01/2012 em 8:17 am
      Permalink

      Criador Sites:
      Obrigado. Concordo, agora os resultados estão começando a aparecer

      Até.

      Resposta
  • 05/01/2012 em 9:01 pm
    Permalink

    Ó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.

    Resposta
    • 06/01/2012 em 1:29 am
      Permalink

      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!

      Resposta
  • 05/01/2012 em 9:34 pm
    Permalink

    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?

    Resposta
    • 06/01/2012 em 1:29 am
      Permalink

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

      Abraço!

      Resposta
      • 06/01/2012 em 8:43 am
        Permalink

        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é

        Resposta
  • 05/01/2012 em 11:58 pm
    Permalink

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

    Resposta
    • 06/01/2012 em 1:40 am
      Permalink

      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!

      Resposta
  • 06/01/2012 em 5:22 pm
    Permalink

    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!!!

    Resposta
    • 06/01/2012 em 6:17 pm
      Permalink

      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é.

      Resposta
      • 06/01/2012 em 6:33 pm
        Permalink

        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!!!

        Resposta
  • 06/01/2012 em 6:41 pm
    Permalink

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

    Até.

    Resposta
    • 06/01/2012 em 6:49 pm
      Permalink

      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!!!

      Resposta
  • 15/01/2012 em 2:05 pm
    Permalink

    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.

    Resposta

Deixe uma resposta

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