Como Criar um PopUp HTML para Captação de Email no Site!

Like
Like Love Haha Wow Sad Angry

Como Criar um PopUp HTML para Captação de Email

Hoje vou mostrar como criar um PopUp HTML para Captação de Email através do FeedBurner, como o utilizado aqui no CriarSites.com. Um popup simples e eficaz para aumentar consideravelmente sua lista de email.

A ideia é criar algo simples e chamativo para atrair e fisgar a atenção dos seus visitantes.

O único Problema é que muitos métodos para inserir um popup no site são pagos, e isso dificulta muito para quem esta começando um novo site e não dispõe de muitos recursos financeiros para investir.

obs: Gostaria de deixar uma observação que esse código não foi produzido originalmente por mim, e não tive acesso a quem foi o criador, apenas consegui boa parte do código na internet e fiz algumas adaptações como mostro abaixo. Caso alguém conheça o criador, por favor, deixe nos comentário para dar os créditos a quem mereça por esse fabuloso script.

Como Criar um PopUp HTML para Captação de Email

Para iniciar, clique aqui (clique com o botão direito e em “Salvar destino como“) e realize o download do código java script popup html.

Após realizar o download, verá um arquivo em html, basta clicar com o botão direito no arquivo e selecionar as opções “Abrir Com..”, e “Bloco de Notas”.

Repare que esse é o exato modelo usado aqui no CriarSites.com e diante disso, vou deixar algumas mudanças para realizar no código e personalizar de acordo com seu site.

personalizacao-script

Ao abrir o arquivo com o bloco de notas, não é necessário mexer em nada no inicio do código, basta ir ate o trecho final e localizar os pontos a serem personalizados de acordo com seu site (nos pontos como mostra a figura acima, destacados pelo comentário “ISSO E UM COMENTARIO PERSONALIZE ESSA LINHA ABAIXO com …”).

Também lembre-se de publicar em seu site/blog as imagens “closeicon.gif” e “rss-feed-gif.gif” e anote o endereço de cada um deles. Depois cadastre-os endereços no código do popup.

Nos locais onde se encontra “CriarSites“, você deve alterar com o nome que aparece no endereço de seu blog no FeedBurner.

Realizadas estas estas alterações, basta inserir todo o trecho do código antes da tag </body> no seu site, ou se estiver usando um blog WordPress, basta criar um widget Texto/HTML e inserir o código já personalizado (por completo).

Pronto, seus problemas para captar e-mails e aumentar consideravelmente sua lista de e-mails está resolvido de uma vez por todas.

Se realmente gostou desta dica, além de deixar seu comentário, procure compartilhar esse artigo pelas redes sociais para ajudar mais webmasters de plantão!

Esse código realmente é um “salva vidas”, assim como o CriarSites.com

Este é um guest post que foi escrito por Rogério Gomes que bloga no WRG. Visite o blog e prestigie o autor.

Gostou do artigo Como Criar um PopUp HTML para Captação de Email? Ainda tem dúvidas ou sugestões? Então deixe um comentário abaixo.

Posts Relacionados

Like
Like Love Haha Wow Sad Angry

Sobre Convidado

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

87 Comments

  1. Gostei muito desse artigo. Vou colocar esse popup também em meu blog. Depois menciono a diferença de captação de assinantes no antes e depois do popup. Valeu.

  2. Celso,

    Acabei de instalar o formulário de assinatura. À noite, faço uma faxina melhor no site. E digo se houve mudanças no número de assinantes diários.

  3. Muito bom o tutorial ja foi implantado isso em meu site entes desse tutorial mais muito bom esclareceu todas as minhas duvidas

  4. Bem interessante este artigo, parabéns!!!

  5. Divulgar site

    Era isso mesmo que estava faltando no meu blog. Agora vai sobrar mais espaço na sidebar. Valeu!

  6. Divulgar site

    Uma dúvida? Esse popup poder ser bloqueado por “bloqueadores de popup”?

    • Divulgar Site,
      Não, Ele não é como uma popup que se abre em uma janela do navegador. Ele abre dentro da mesma página.
      O que pode acontecer é o visitante ter o javascrit desabilitado no navegador. Neste caso tudo o que for javascript não vai ser executado.

      Abraço!

  7. Erik José da Costa

    Tem templates wordpress que já vem com o feedburner,eu particulamente uso um autoresponder.Coloc0 uma widget na barra lateral do blog e insiro o código do formulário,acho mais simples.

  8. Excelente dica, vou procurar implementar no meu blog também.

    Com certeza melhora muito a captação de e-mails, pois fica visível o tempo todo, e economiza espaço na sidebar.

  9. Cecilia Parente

    Celso, sei que você mora no Japão então mande notícias suas no blog.
    Afinal, seus leitores também ficam preocupados.

    • Cecília,
      Desde o final de 2009 eu voltei para o Brasil. Mas eu liguei para um amigo que me disse que o terremoto foi muito forte. Muitos prédios e casa cairam, está faltando energia, as pessoas que estavam longe de suas casas estão em abrigos porque os trens e metrôs não estão funcionando (este é o principal meio de transporte nas grandes cidades do Japão).
      Mas o Japão tem uma boa organização, logo eles se recuperam.

      Abraço!

  10. lucas Barbosa

    Galera to com uma duvida
    Como eu crio um site agregador de compras coletivas tipo o saveme to pensando em abrir um na minha cidade

    vlw

  11. Vinicius Horta

    Olha gostei!

    Eu tenho um sistema para captação de e-mails, mas ele abre antes de carregar o blog e deve ser fechado para visualizar o artigo, acho que vou mudar para esse que deve dar melhores resultados 🙂

    Abraço!

  12. Reynaldo Gabarron

    Adorei o post, eu estava procurando isso faz tempo. Eu até dei uma melhorada criando um formulário no googledocs. Com esse recurso a gente pode receber diretamente o e-mail do visitante, pois o feedburner não nos diz qual é o e-mail que se cadastrou no nosso site.

    Testei o código em um html no meu pc e ficou perfeito, porém meu site é do blogspot e eu não consegui implementar lá.
    Tentei incluir no html do post, tentei em widgets, tentei incluir o começo do código, a parte CSS no Designer de modelo na opção avançado e adcionar CSS, e adivinhem … também nada.

    Meu caro Celso, tem como tornar esse código compatível com blogspot?
    Ou você me recomenda sair do blogspot? Não tenho muito tempo para fazer um novo layout completo de site se for para hospedar ele em outro lugar.

    Obrigado e mais uma vez, parabéns pelo site, para mim é referência em suporte a webdesigner!!!

    • Reynaldo,
      Eu testei aqui e funcionou perfeitamente no BlogSpot. Experimente adicionar um novo “Gadget” e escolha a opção “HTML/Javascript” e cole o código.
      Lembre-se de fazer as configurações no código.

      Abraço!

  13. Tentei colocar o código no meu blog mas aparece a seguinte mensagem:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The entity name must immediately follow the ‘&’ in the entity reference.
    Error 500

    Meu blog é do blogspot.

    • Idemir,
      Eu fiz um teste aqui e funcionou normalmente. Creio que você esteja fazendo algo de errado. Adicione um “Gadget”e escolha a opção “HTML/Javascript” e cole o código.

      Abraço!

      • Olá Celso,
        Em adicionar um gadget deu certo no blogger, também apaguei os do final pra caixa nao ficar tão grande, ficou muito bom.

        Valeu!

  14. Celso,

    Já usei em um blog meu, esse formato, á alguns meses atrás e realmente funciona.

    Atualmente estou usando em outro site meu, um modelo parecido com o do dinheirooportunidade . com, só que é GRÁTIS, carrega depois que toda a página abre, e está dando resultados.

    Não é plugin, é um arquivo Javascript, um CSS, um HTML, e no rodapé do site, vai um script que chama o esquema.

    Em 2 dias foram 72 cadastros feitos, e 14 já ativaram o Feed. Nessa média, daria em torno de 1080 cadastros e 210 ativados, por mês.

    Levando em conta que antes dava por dia uns 12 cadastros e uns 4 ativavam, a melhora foi bem interessante.

    Se continuar assim, ou melhorar, crio uma postagem no meu site, disponibilizo os arquivos, e aviso você pelo formulário de contato, caso queira testar, em um dos seus sites e blogs.

    O que acha?

  15. Divulgar site

    Caro colega, a pouco tempo você utilizava o Ptsender para sua lista de e-mail. O que achou do serviço deles? Vale a pena?

    • Divulgar Site,
      É um bom serviço, Se você pretende enviar emails customizados para seus cadastrados, ele é uma excelente opção.
      Eu deixei de usar ele porque eu não tenho o costume de ficar enviando emails.

      Abraço!

  16. Ola… adorei a dica… vou colocar hoje mesmo…. em meu blog…
    mas estou com uma duvida sobre o word press… celso.. eu quero saber se tem como fazer um site de compras coletivas com ele e se da pra usar um dominio ja existente..? com.br?

    • Ana Carolina (você é a cantora? brincadeira),
      É possível criar um sistema de compras coletivas com o WordPress sim. Existe no mercado um template chamado CouponPress. Eu nunca utilizei ele, mas pelo que eu ouvi, ele é um bom sistema.
      Você pode utilizar em qualquer instalação do WordPress, desde que ele não esteja armazenado no wordpress.com. Tem que ser a versão instalada.

      Abraço!

  17. Ola Celso/Rogerio, bom n sei se pergunto pro dono do site ou do artigo kkk, entao esse sistema de captaçao de email novo de vcs é legal, mas serve pra blogspot tb? Abço e fica com Deus!

  18. Denis,
    Não existe nenhum artigo que ensine a mexer com essas coisas. Existem sim sites que ensinam a mexer com o tipo de programação que foi utilizado no template, que você deveria estudar para entender como alterar o seu template.

    Abraço!

  19. Gostei da dica, mais notei uma coisa, o pop up fica um pouco abaixo da barra de tarefa, também a barra de rolagem do navegador passar direto na minha pagina, vou da um ex.. aqui na sua pagina.. seu pou up para no seus credito do seu site no final da pagina, o meu passa direto “no branco” caso vc não entendeu minha duvida, entre no meu blog e vá até o final da pagina onde tem um contador de visita, note que o pop up vai passar dele!!! blz!! caso você saiba o que esta acontecendo..me diga rsrsrs valeu !!!!!!

  20. pelo que eu li por aí, o feed só serve para colocar em blog e não em site, estou certo?

  21. Oa Celso como faço para colocar ( apos o cadastro vc recebera um email automático…) como esta no seu formulario? Ja que muita gente se inscreve mas não acaba de fazer o cadastro. Agradeço.

  22. Boa dica, foi pena não ter conseguido colocar, deu erro xml.

  23. eu adicionei no meu site de testes na plataforma webnode, deu certinho ficou muito legal, mas eu nao consegui cadastrar corretamente as informações do feed, eu nem sabia que isso existia ate um tempo atraz, rsrrs, vc poderia me ajudar onde eu acho os endereços certos para customizar o codigo com meu feed?

    • Luiz Antonio,
      No template de seu site deve existir um link escrito “RSS”. Clique sobre ele para descobrir o endereço URL do feed de seu blog.

      Abraço!

      • esse ai eu achei, mas o meu grande desafio é quando digita o email e clica em cadasrar email, nao esta indo para aquela telinha de confirmação, te lendo em varios artigos e fazendo segundo os tutoriais mas ta tenso de dar certo, vou tentar queimar um novo e ver se da certo, muito obrigado pela sua ajuda, acho seu site um dos melhores.

        grande abraço

        • Luiz Antonio,
          Pode deixar o link de uma página que contém o código da popup? Aparece alguma mensagem de erro?

          Abraço!

          • vou tentar fazer tudo denovo, com um pouco mais de atenção, inclusive vou criar um site no webnode só para testar as novidades que vejo aqui, se tiver alguma duvida peço socorro.
            Vlw pela atenção – sou fã do seu site – grande abraço

  24. Tenho uma sugestão, você poderia nos explicar o que colocamos no comments.php para acrescentar esses textos abaixo da caixa de comentários, por exemplo esse: Envie os novos comentários para o meu Email.

    Abraços.

  25. Dermeval Junior

    Legal Celso, mas sabe o que eu estava pensando: a cada reload da página a caixa é mostrada novamente e pode chatear alguns usuários; o ideal é que abrisse só uma vez. Isso pode ser feito com um cookie em javascript mesmo ou em php, assim só ia abrir uma vez, a não ser que o usuário saisse da página e voltasse novamente porque também não ia ser interessante não abrir mais enquanto o cookie estivesse na máquina do usuário.

    Quando eu tiver com um pouco de tempo vou ver se faço essa iplementação.

  26. PARABÉNS mais uma vez ao Criar Sites!
    Eu procurava este recurso e não tive dúvidas: primeiro vou procurar no Criar Sites… vim ao lugar certo e encontrei a solução!
    Já estou utilizando! É FANTÁSTICO!
    Vou prestigiar Rogério Gomes! Vamos seguir e PARABÉNS!

  27. Dermeval Junior

    Celso estou usando no meu blog e fiz uma pequena implementação com css3 na caixa de newsletter que deixa o campo texto e o botão do formulário com cantos arredondados e sombreado sem necessidade de uso de imagens.

    Pra quem se interessar escrevi um tutorial no blog na categoria css

  28. Gostei, só achei que poderia ser explicado melhor sobre este trecho :
    (Também lembre-se de publicar em seu site/blog as imagens “closeicon.gif” e “rss-feed-gif.gif” e anote o endereço de cada um deles. Depois cadastre-os endereços no código do popup.) sobre isso eu não entendi.

  29. José Antonio

    Oi Celso já consegui resolver , era questão de entendimento meu mesmo, já esta tudo ok e funcionando. Obrigado pela atenção.

  30. Olá Celso
    Nao consegui instalar no meu blog. Creio que compreendi mal a descricao daquilo que tenho que fazer. Nao sei nada de HTML…Que pena!

  31. Celso,

    Vou te explicar o problema para ver se vc pode me ajudar. Está lá o formulario. Só que passa muito rápido a ponto de nao poder se cadastrar na subscriçao. Se movimenta rapidamente na tela

    • Rosane,
      Desculpe mas eu não entendi. Não tenho ideia do que seja isso que você está dizendo que “passa rápido”. Poderia explicar isso melhor? Ou me mostrar um exemplo?

      Abraço!

  32. ok!
    Cria uma barra de rolagem contínua. Logo que estou escrevendo no seu site surge a janela popup e fica estática. E posso me inscrever tranquilamente. Mas no meu blog a janela fica no final da tela e nao surge para a inscricao. Fica em movimento, nao é possivel acessar a ela. nao sei se consegui te explicar.

  33. Está funcionando perfeitamente. Obrigado por compartilhar isso Celso. Sucesso!

  34. Muito boa diga, acabei de colocar no blog, e ficou muito bom, agora é acompanhar as estatísticas do feed.

    Abraço!

  35. Boa noite, não consegui instalar, aparece o seguinte erro Erro ao analisar XML, linha 2239, coluna 30: The entity name must immediately follow the ‘&’ in the entity reference. Pode me ajudar?

    • Olá Adriano,
      Adicione o código utilizando um Gadget Javascript/HTML. Eu fiz o testo no Blogger e realmente não funciona se tentar adicionar no código do template.

      Abraço!

  36. Olá Cézar,
    Essa dica do placeholder funcionou bem no firefox, mas no IE não aparece. Será que existe outra solução.

    Abraço!

    • César Henrique

      Realmente no IE não funciona, mas creio que isso não seja um problema já que muitos usuários estão usando ou migrando para outros navegadores onde todo comando em html funciona.

  37. No meu navegador chrome apareceu certinho, porém tenho algumas imagens side bar e quando o formulário passa fica abaixo delas como resolvo isso?

  38. Ficaria bem legal se pudessemos colocar o código da Aweber…Sei que a Aweber tens seus Pop Ups bem legais,mas ficaria interessante com esse Pop Up…Alguém dos leitores do Criar Sites tem o código parecido ?

  39. Divulgar site

    Caro Celso, tentei instalar num blog do blogger e não funcionou. O popup fica abaixo da visualização do visitante e quando você desce a tela o popup continua descendo e descendo. Pode me ajudar?

  40. Celso, parabéns pelo seu trabalho com CriarSites.

    Coloquei em meu site e ficou legal. Mas meu anúncios do Google desapareceram. Você saberia me dizer o que poderia ter acontecido?

    Obrigado!

    Edson

    • Olá Edson,
      Eu não sei dizer porque seus anúncios não estão aparecendo. Já verificou se em outros computadores os anúncios não aparecem? Já verificou se na sua conta do Adsense está tudo OK?

      Abraço!

  41. Estou a tentar, mas não entendo esta parte: como publicar as imagens closeicom.gif e rss-feed-gif.gif no meu site. Pode me ajudar ?

    “Também lembre-se de publicar em seu site/blog as imagens “closeicon.gif” e “rss-feed-gif.gif” e anote o endereço de cada um deles. Depois cadastre-os endereços no código do popup.”

    • Olá Mafalada,
      Da mesma forma que você faz para publicar uma imagem nos seus posts. Basta que você inicie um novo post, adicione as imagens e então mude o editor para o modo HTML e copie o endereço de cada uma das imagens.

      Abraço!

      • Olá Celso,
        Obrigado pela sua resposta.
        Mas dessa forma as imagens não vão aparecer no site ?
        A minha duvida é essa, ao publicar as imagens elas vão aparecer no site, sem ser no pop-up, certo ?

        Cumps

  42. Quando eu clico nesse link com o botão direito para download não tem opção de salvá-lo somente de abrir em nova guia e salvar endereço de link. E quando clico com o botão padrão do mouse “o esquerdo” uma nova aba é aberta e um arquivo compactado é baixado automaticamente em meu computador e dentro dele não tem arquivo HTML, somente duas páginas desse site e duas figuras. Que pena!

  43. Olá amigo nao estou conseguindo colocar lo… no final quando coloca o email carrega uma janela dizendo que nao esta habilita e nao consigo criar um feed no site… ajudaaaa

  44. Oi Celso,

    Muito Legal o seu post, mas no meu caso eu utilizo o Wix e o feedburner diz que meu site não é um feed. Tem outro jeito de criar pop up para coletar e-mail sem ser utilizando o feedburner?

    • Olá Bruno,
      Eu consegui adicionar uma caixa de coleta de emails do Aweber, mas tive que fazer uma gambiarra no código. Eu até te passaria o código, mas ele não serve para qualquer caso.

      Abraço!

  45. Querido Celso!
    Já tem quase 2 semanas que estou aqui quebrando a cabeça,para conseguir implantar ao menos um unico codigo,que funcione no blogspot e confesso que perdi a paciencia.
    Por favor poderia ajudar-me a instalar esse script no meu blog?
    (qual o valor cobrado pelo suport,caso você faça querido?)
    Já tem quase 3 semanas,e…
    Simplesmente não funciona.
    Devo informar que antes eu ja usei,esse mesmo script em outro blog,e nunca deu nenhum problema.
    Mas agora…Barbaridade!

    Muito obrigada querido!

    • Olá Tai,
      Será que não é um problema de incompatibilidade com o seu atual template. Experimente trocar o template só para fazer um teste e adicione o código ao blog e veja se funciona.

      Abraço!

  46. Jackson Vilela

    Infelizmente pr mim não deu certo, personalizei, acrescentei em um novo widget não rolou, depois acrescentei antes da tag e também não deu certo está criticando a linha:

    return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body

    o que pode ser?

  47. Esse código está dando um erro quando clico em salvar modelo: xml The entity name must immediately follow the ‘&’ in the entity reference.

    Como resolver esse erro?

  48. Olá! Eu consegui instalar, personalizar da forma que eu queria, que era beeeeeem diferente do tema proposto, mas o que está acontecendo é que meu antivírus fica apitando o tempo tooooodo, e acaba bloqueando o site, o que não acontece no meu celular, e outros computadores, podes me dizer o que pode ser? Mexi apenas nos tamanhos, troquei as imagens para as que eu mesma fiz, então não sei o que pode ser!

Deixe uma resposta

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