Criar Sites » Boletim de novidades

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

Convidado — Thu, 05 Jan 2012 11:00:18 +0000

Este é um guest post escrito por Rhenan Cardozo que escreve no RC Tutoriais onde publica artigos sobre manutenção de computadores, Windows, Linux entre outros.

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:

Untitled Document





Newsletter




Receba nossas atualizações em seu e-mail! É grátis.

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.

Formatação com CSS:

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

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:

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 “ e ” 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 “” ?

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 – Como criar um campo de pesquisa estilizado com CSS3!

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

Mais Artigos que você pode estar interessado

PT Sender – Email Marketing por R$25

Celso Lemes — Sat, 07 Aug 2010 13:06:18 +0000

Crie campanhas de email marketing com o PT Sender.

O PT Sender é mais um serviço oferecido por Silvio Fortunato que permite que você crie campanhas de email marketing para manter seus visitantes atualizados com as novidades do site, promoções, avisos e etc., do seu site.

Esta é uma excelente ferramenta de marketing, visto que praticamente todo usuário de computador, possui uma conta de email e este geralmente é a primeira coisa que as pessoas veen quando ligam o computador.

Diferente do que acontece com o sistema de email marketing da Aweber, o PT Sender oferece todos os recursos ilimitados, ou seja, você poderá ter ilimitados endereços de emails cadastrados em sua lista, assim como poderá enviar quantos emails quiser no decorrer do mês.

A única desvantagem em relação ao Aweber é que o PT Sender não permite o envio de emails com base no Feed, sendo necessário a criação e envio dos emails manualmente, toda vez que for necessário enviar um boletim.

Aqui no Criar Sites eu passei a utilizar este serviço, visto que a a diferença de preço em comparação com o Aweber é ENORME. Antes eu pagava 130 dólares no Aweber, passando a pagar apenas 25 reais por mês com o PT Sender. Grande diferença!

Um excelente recurso oferecido pelo PT Sender é a possibilidade de criar auto responders, que são emails enviados as pessoas cadastradas automaticamente, após um determinado período de tempo especificado por você.
Abaixo você pode conferir alguns dos auto responders que todas as pessoas que se cadastram no boletim de novidades do Criar Sites recebem.

>> Crie sua conta no PT Sender e gere mais uma fonte de divulgação em seu site <<

Mais Artigos que você pode estar interessado

Crie uma campanha de Email Marketing e aumente as visitas em seu site

Celso Lemes — Mon, 15 Mar 2010 13:32:07 +0000

O email é uma das formas de comunicação mais utilizada na internet. Quase todo internauta possui uma conta de email, o qual na maioria dos casos, é a primeira coisa que olhamos ao ligar o computador.

Tendo em conta esse simples fato, seria interessante se pudéssemos tirar proveito dos emails como um canal extra de comunicação entre seu site e os visitantes. Garantindo um fluxo de visitantes extra, reforço da marca de seu site, aumento de vendas e etc.

Isso pode ser feito criando um Boletim de Novidades (ou NewsLetter se preferir) que serviria para enviar diretamente para o email dos visitantes, as atualizações publicadas no site e outras dicas relevantes.

Uma lista de emails poderia trazer diversos benefícios ao site como:

. Maior audiência. Os visitantes seriam lembrados de voltar ao seu site de tempos em tempos.

. Maior geração de renda. Você pode aproveitar a lista para notificar os visitantes sobre lançamentos de produtos, descontos ou incluir links de programas de afiliados (faça isso com cuidado, se o seu email for inconveniente, certamente você acabará perdendo o visitante e queimando a imagem do site).

. Reforço da marca. O envio constante de emails fortalece sua marca na cabeça do visitante, que com o tempo passará a lembrar de seu site, assim como a Coca Cola é lembrada quando estamos com sede.

Basta uma pessoa pensar em refrigerante que o nome Coca Cola vem a tona ou então basta pensar em Criar Sites que o CriarSites.com vem a tona (tá bom, não é bem assim, mas eu estou trabalhando para conseguir alcançar esta meta).

Visitantes assim costumam ajudar na divulgação do site de uma maneira muito antiga porém eficaz que é a divulgação boca-a-boca, recomendando seu site sempre que um amigo necessite de algo que possa ser encontrado no seu site.

Como criar uma lista de emails
Para criar uma lista de emails é necessário capturar os emails dos visitantes de alguma forma e existem diversas alternativas, como os programas que permitem enviar os emails a partir de sua máquina, sistemas que devem ser instalados em seu servidor ou sistemas de gerenciamento independente que facilitam e tornam mais seguro a capturação e gerenciamento dos emails.

Sistema Online
Um sistema gratuito e muito utilizado para este fim é o PHPList que pode ser instalado em seu servidor. Ele permite capturar os emails através de um formulário que pode ser instalado em uma página na internet e permite o envio dos boletins através de um painel de controle.

Ps. Eu já utilizei este sistema uma vez, mas logo desisti por ele ser muito complicado.

Programa Local
Em uma busca pela internet encontrei um programa chamado de Carteiro que permite criar e gerenciar listas de emails diretamente em seu computador. Preço R$69

Ps. Nesse tipo de sistema, você deve capturar os emails através de um formulário e inserir os emails no programa manualmente

Gerenciamento independente
Um sistema que eu venho utilizando há algum tempo é o Aweber que é um serviço de gerenciamento de Email marketing online que possui recursos avançados permitindo aproveitar ao máximo o potencial da lista de email. Preço $19 dólares por mês para até 500 emails cadastrados.

Conclusões
Criar uma lista de emails para o envio de boletins de novidades pode trazer grandes resultados a longo prazo, porém somente é recomendado o seu uso em sites com atualizações freqüentes. Em outros casos poderia ser perca de tempo.

Outra coisa que você deve ter em mente é que ninguém gosta de ser perturbado, portanto não caia na tentação de comprar listas contendo milhões de emails ou utilizar programas para capturar emails em sites para depois enviar spams emails para estas pessoas sem o seu concentimento.

Não importa o que esteja passando em sua cabeça, somente envie emails úteis para pessoas que lhe deram permissão.

Mais Artigos que você pode estar interessado

Sistema de Newsletter Grátis com o FeedBurner

Celso Lemes — Mon, 20 Jul 2009 12:30:35 +0000

Ofereça o conteúdo do seu blog por email aos seu visitantes, utilizando o serviço gratuito oferecido pelo FeedBurner.

Para quem não sabe, o FeedBurner é um serviço grátis voltado para “BLOGS” oferecido pelo Google, que permite ao blogueiro gerenciar o feed do blog e saber estatísticas sobre como os visitantes acessam o conteúdo.

Além das estatísticas, o FeedBurner também oferece uma opção de envio do conteúdo por email para as pessoas que estiverem cadastradas nesta opção.

Se você já possui uma conta no Feedburner e já cadastrou seu blog, poderá ativar a opção de envio de Newsletter e poderá colher o email dos visitantes através de um formulário que pode ser adicionado ao seu blog.

Desta forma, sempre que você publicar um novo post em seu blog, um email contendo o conteúdo do post é enviado para todos as pessoas que estiverem cadastradas no seu boletim de novidades.

Também recomendo a leitura do artigo “Como instalar uma popup de captação de email” que vai ajudá-lo a aumentar ainda mais o número de pessoas cadastradas no seu boletim de novidades.

Para aprender a ativar este recurso, você pode conferir uma vídeo aula criada por Lucas do blog Criar Blog BR que ensina o passo a passo.

Atenção!
Este recurso de NewsLetter utilizando o FeedBurner somente está disponível para blogs que ofereçam o conteúdo via feed. Se você tem um site e gostaria de implantar um sistema de newsletter, poderá conferir algumas opções aqui.

Mais Artigos que você pode estar interessado

Email Marketing com o MailChimp

Celso Lemes — Mon, 30 Mar 2009 09:36:57 +0000

O MailChimp é um serviço (em Inglês) de gerenciamento de campanhas de email marketing.

Ele oferece recursos avançados com estatísticas completas onde você pode conferir os resultados de suas campanhas como número de emails abertos, emails não abertos, emails rejeitados, localização geográfica e mais…

Além disso ele oferece total customização dos emails onde você pode alterar as cores, textos e até incluir uma imagem no cabeçalho dos emails enviados.

Conta Gratuita
Você pode criar uma conta gratuita que é ideal para sites pequenos ou webmasters que queiram testar o serviço antes de decidir em pagar. Esse tipo de conta possui algumas restrições como:

Até 100 emails cadastrados;
Até seis boletins por mês;
Pubicidade no final dos email enviados.

Acima disso você terá que desembolsar uma quantia de $10 por mês para uma lista com até 500 emails.

Criando sua conta
Ao criar uma conta no MailChimp você não poderá utilizar uma conta de email gratuita, é necessário que você utilize um email de um domínio próprio como seunome@seusite.com

Isso quer dizer que proprietários de sites com domínio gratuitos não poderão utilizar este serviço a menos que morem nos Estados Unidos e possa comprovar o cadastro através de um código que é enviado por celular.

Criando a lista de emails
Após criar uma lista de emails, você pode coletar os emails através de um formulário que pode ser implantado em seu site ou acessado através de um link como este.

Assine o Boletim de novidades do Criar Sites

(Os campos de preenchimento obrigatório estão em negrito)

Atenção! O formulário acima serve apenas como teste.

Também é possível importar uma lista de email armazenada em documentos de texto, porém o MailChimp não permite que spammers utilizem o serviço, por isso você deve garantir que tem permissão para enviar os boletins e que não comprou, alugou ou roubou a lista de nenhum lugar. Caso você seja reportado como spammer, você pode perder sua conta.

Programa de Afiliado
O MailChimp possui um programa de afiliado que permite que você ganhe $30 em créditos sempre que você indicar novos usuários pagantes ao sistema. Estes créditos podem ser utilizados para adquirir novos serviços dentro do site.

Isso é feito permitindo que seja enviado uma imagem que leva ao site do MailChimp no final dos emails, através de um banner que pode ser colocado em seu site ou junto ao formulário de cadastro de novos usuários.

Saiba mais
Você pode conferir alguns dos recursos oferecidos pelo Mailchimp na página de vídeos de apresentação criado pela empresa. Clique aqui.

Nota
O uso do MailChimp requer conhecimento médio do idioma Inglês e também algum estudo sobre o funcionamento das ferramentas.

>> Crie sua conta no MailChimp e inicie sua campanha de Email Marketing <<

Mais Artigos que você pode estar interessado

Aweber – Estratégia de Marketing Boletim de Novidades

Celso Lemes — Tue, 05 Aug 2008 02:52:08 +0000

Dentre as várias estratégias de marketing que eu venho utilizando para divulgar o Criar Sites uma delas é o boletim de novidades que é basicamente um email contendo as principais novidades site que eu envio periodicamente aos usuários cadastrados.

Depois de quebrar a cabeça com os vários sistemas gratuitos e até alguns pagos eu resolvi testar o Aweber que para minha surpresa se mostrou uma excelente ferramenta.

Algumas das vantagens de se utilizar o Aweber são:

Cadastro de usuários
O cadastro de novos usuários pode ser feito manualmente através do painel de controle ou através de um pequeno formulário que pode ser colocado em seu site onde o próprio usuário se cadastra. Confira no menu de navegação deste site.

Em ambos os casos é necessário uma confirmação por parte do usuário para que o Aweber identifique o email como válido para receber emails com os boletins, evitando que engraçadinhos saiam cadastrando emails alheios.

Estatísticas
Com o Aweber você tem acesso a estatísticas que me mostram o número de emails abertos, número de reclamações (até agora não tive nenhuma) e também ao número de cliques feitos nos links contidos nos emails.

Você também tem acesso as estatísticas gerais que me mostram o número de usuários cadastrados/descadastrados por dia, semana e mês.

Várias listas em um só conta
Você pode criar quantas listas de emails quiser. Isso quer dizer você não precisa criar outras contas se tiver mais de um site ou um site com várias categorias.

Nível de Spam
Após criar um novo boletim, o Aweber mostra o nível de possibilidade que o email tem de ser enviado para a caixa de spam dos leitores cadastrados, mostrando onde está o problema para que você possa fazer alterações para que esse nível seja abaixado.

Blog BroadCast
Com o Aweber é possível enviar automaticamente atualizações via Feed (o Feed é mais comum em blogs, saiba mais sobre os Feeds)
Basicamente ele pega a ultima atualização do site/blog (ou quantas você quiser) e envia o boletim para os usuários cadastrados em sua lista.

Eu nunca utilizei esta alternativa porque gosto de editar manualmente meus boletins, mas é uma opção a mais para quem deseja automatizar o processo de envio.

Contras
Como nem tudo é uma maravilha, todos estes recursos tem um preço a altura. O plano mais barato sai por $19.00 dólares por mês e permite o cadastro de até 500 emails. Você deve adquirir planos maiores conforme sua lista de email for crescendo.

Outro problema é que o Aweber está no idioma Inglês, o que me levou a criar um pequeno guia para orientar os visitantes durante o processo de cadastro. Se você pretende utilizar o Aweber eu recomendo que faça o mesmo.

Conclusões
Se você tem um comércio virtual ou se o seu site tem atualizações freqüentes, o uso de um boletim como estratégia de marketing é essencial para manter seus visitantes sempre retornando ao site e e/ou lembrando de sua marca.