O que é Unbounce?

Unbounce é um bem conhecido e bem conceituado página de destino ferramenta de criação projetado para permitir HTML noviços para criar impressionante e impactante, páginas de destino, oferecendo espaço para mais experiente codificadores para ter um pouco mais de diversão.

Neste post, vou listar algumas soluções para o que eu chamo de “uma forma” problema da Unbounce, seus pontos fortes e fracos, e que eu, pessoalmente, prefiro.

O que é a “única forma” problema?

Como com qualquer sistema que tenta tomar o complexo de processos e torná-los mais simples de implementar, há uma certa quantidade de nuances e a flexibilidade que tem que ser sacrificado.

Uma limitação é que cada página de destino no Unbounce só pode ter um formulário incorporado (há poucos comunidade artigos discutindo o tema, por exemplo: 1, 2, 3). Enquanto há um risco concreto de call-to-action de fadiga, se você bombardear seus visitantes com formulários, é razoável a exigência de querer proporcionar fácil acesso ao formulário mais do que um ponto.

Por exemplo, você pode levar com um forte apelo à ação e o formulário no topo da página e, em seguida, siga até mais para baixo na página quando os usuários têm tido tempo para absorver mais informações sobre a sua oferta. Um simples exemplo é o abaixo Teambit página de destino, que foi destaque na Hubspot 16 de Melhor Design da Página de Destino Exemplos que Você Precisa Ver em 2017.

O topo desta Teambit página de recursos de um simples e-mail o formulário de coleta de

O formulário é repetido na parte inferior da página, uma vez que os visitantes tiveram a chance de ler mais.

Soluções possíveis para um problema formulário

Agora que estabelecemos o problema, vamos percorrer algumas soluções, vamos?

Felizmente, existem algumas maneiras possíveis para resolver este problema, usando built-in Unbounce ferramentas ou adicionando o código através da abertura de HTML, CSS, JavaScript e insumos.

Vale a pena ter em mente que uma solução é não ter o formulário em sua página, e ter a sua chamada à ação botões de ligar para outras páginas com formulários. Esta é a abordagem Unbounce usa no exemplo abaixo. Enquanto que é perfeitamente válido abordagem, eu não chamaria isso de uma solução para este problema como um formato completamente diferente, então eu não a incluiu na lista abaixo.

Aqui Unbounce usar dois Cta (botões laranja), mas não dependem de ter o formulário na página.

1. De rolagem, botão de âncora

Esta é, potencialmente, a solução mais simples, como é nativamente suportado pelo Unbounce:

Criar um botão de mais para baixo na página onde você deseja que o seu segundo formulário.

Editar o botão, Clique no “em Ação” seção no botão do lado direito do painel de configurações, onde você normalmente seria colocar a URL que você está ligando para

Adicionar o código de IDENTIFICAÇÃO exclusivo para a caixa que contém o formulário (você pode encontrar isso editando o caixa e rolar para a parte inferior do lado direito do painel para “Elemento de Metadados”)

Botão registar

“Em Ação” seção da mão direita do botão do painel de configurações

“O elemento de Metadados” na seção inferior do lado direito do elemento de painel de configuração

Benefícios

Rápido e fácil de implementar, pouco direta JavaScript ou HTML manipulação necessário.

Desvantagens

Há muito mais perfeita maneiras de conseguir isso a partir da perspectiva do usuário. Mesmo com rolagem suave (consulte “pontos de bônus” abaixo), a experiência pode ser um pouco chocante para os usuários, especialmente se eles querem voltar para a verificação de informações em qualquer lugar de uma página.

Pontos de bônus

Apenas acrescentando que como está vai significar muito desagradável experiência para os usuários. Ao clicar no botão, a página vai pular de volta para a sua forma que é carregada uma nova página. Para ajudar os visitantes a entender o que está acontecendo, adicionar rolagem suave através de JavaScript. Unbounce tem informações aqui.

O bônus duplo de

O link âncoras de trabalho, alinhando a parte superior da sua tela com a parte de cima da coisa que você já ancorados. Que pode deixá-lo parecendo que você tenha excedido um pouco, porque a forma é quase caindo fora da tela. Você pode resolver isso simplesmente colocando um minúsculo, um pixel de largura caixa um pouco acima do formulário, com o não preenchimento ou borda, posicionando-a como você quer, e link para o ID da caixa em vez disso, permitindo que um pouco de espaço para respirar acima da sua forma.

Sem e com um pixel de largura caixa para headroom

2. iFrames

Unbounce permite a livre blocos, que você pode usar para incorporar um formulário a partir de outro serviço ou mesmo outro Unbounce página que consiste em apenas um formulário. Você vai precisar de arrastar o “HTML Personalizado” bloco da barra da esquerda para onde você deseja que o formulário para ser e cole no seu código iFrame.

O “HTML Personalizado” bloco no lado esquerdo da barra de

Em branco HTML da caixa que aparece

Como blocos de HTML olhar no editor

Benefícios

Isto irá permitir múltiplas formas, para cada um formulário para ser posicionado de forma diferente na página, para funcionar de uma maneira diferente, e de entradas para cada um formulário para ser marcado de forma diferente (o que irá oferecer uma visão sobre a eficácia da página).

Esta solução também irá permitir que você faça o máximo de funcionalidade de outros serviços, tais como Wufoo (Unbounce tem documentado o processo para que aqui).

Desvantagens

Tendo escolhido o Unbounce como um one-stop-shop para a criação de páginas de destino, sair do que usar formas externas pode ser considerado um passo de distância do propósito original. Este também apresenta complicações em construção, porque você não pode ver como o formulário aparecerá na página no modo de edição. Assim, o fluxo de trabalho para as alterações poderá ter esta aparência:

Alterar a forma externa

Revisão da página e ver o estilo de problemas

Alterar o layout em Unbounce editor

Revisão da página e ver que a forma externa não é tão legível

Alterar a forma externa

Etc.

Pontos de bônus

Unbounce não pode controlar conversões através de um iFrame, assim mesmo se você usar outro Unbounce página como o formulário que você desenhar, você vai estar saindo da Unbounce nativo de rastreamento. Eles têm um script aqui você pode usar para fogo externa de acompanhamento de hits para acompanhar a página de sucesso mais centralmente, de modo a obter mais de uma sensação para se páginas individuais estão indo bem.

O bônus duplo de

Mesmo se você estiver usando um idêntico Unbounce página para puxar a mesma funcionalidade de formulário duas vezes, marca a forma de conclusões de forma diferente para dar uma ideia se os usuários estão mais propensos converter-se no topo da página, antes que eles se distrair, ou mais para baixo, quando eles têm tempo de absorver os benefícios de sua oferta.

3. Sticky formulário (sempre lá)

Uma opção que vai manter tudo na mesma página é um pegajoso formulário. Você pode usar o estilo CSS para corrigi-lo no lugar em uma tela, em vez de uma página, então quando o seu visitante que desloca-se para baixo, o formulário ou o CTA vai viajar com eles — sempre dentro do alcance fácil.

Este simples código CSS irá corrigir um formulário no lado direito de uma página de fou tela com larguras mais de 800 (que estar onde Unbounce opções do Desktop para o Mobile design, ou seja, o posicionamento precisa ser diferente).

Cada elemento de ID abaixo corresponde a uma caixa diferente que eu queria mover-se juntos. Você precisará alterar o “lp-pom-caixa-xxx” abaixo para coincidir com os IDs de que você quer mover a página para baixo com o usuário (você pode encontrar as Identificações no “Elemento de Metadados” a seção, conforme descrito no Deslocamento de Âncora solução de Botão acima).

@media (min-width: 800px) { #lp-pom-caixa-56{ position:fixed; left:50%; margin-left: 123px; parte superior:25%; margin-top:-70px} #lp-pom-formulário-59{ position:fixed; left:50%; margin-left: 141px; parte superior:25%; margin-top:60px} #lp-pom-caixa-54{ position:fixed; esquerda:50%; margin-left: 123px; parte superior:25%; margin-top:50px}}

Benefícios

Isso permite que você mantenha o acompanhamento de dentro Unbounce. Ele corta um monte de idas e voltas de criar o formulário em outro lugar e, em seguida, tentando fazer com que forma, dentro de um iFrame, agir em sua página do jeito que você quiser.

Desvantagens

O problema com isto é que os usuários podem rapidamente tornar-se cego para um CTA que viaja com eles, a adição de algum tipo de regular a atenção em busca de efeito é provavelmente apenas para irritá-los. A solução aqui é ter sua chamada para a ação ou forma obscurecida durante partes da página, apenas para reaparecer em outro, mais apropriado vezes (como na próxima seção).

Pode ser difícil ver exatamente onde o formulário será exibido, pois as CSS alterações não entrarão em vigor no editor de pré-visualização, mas você será capaz de ver o impacto quando você salvar e visualizar a página.

4. Sticky formulário (aparecendo e desaparecendo)

A maneira mais simples de conseguir isso é usando z-index. Em suma, o z-index é uma forma de comunicação camadas através de HTML, uma imagem com um índice z de 2 será interpretado como mais próximo do usuário do que uma caixa com um índice z de 1, de modo que quando visualizar a página em que ele vai olhar como a imagem está na frente da caixa.

Para este método, você vai precisar de algum tipo de caixa opaca em cada seção de sua página. A caixa pode ser preenchida com uma cor, imagem, gradiente — isso não importa, desde que não seja transparente. Depois de colocar as caixas no lugar, fazer uma nota do seu z-index, que você pode encontrar na “Meta-Dados”, seção do lado direito da barra de configurações, o mesmo lugar que o ID do Elemento é mostrado.

Esta caixa tem um z-index de 31, de modo a cobrir algo com um índice de 30

Em seguida, use CSS para selecionar os elementos que você está se movendo para baixo a página e defina as suas z-index para um número menor. Nas linhas abaixo eu selecionei dois elementos e o conjunto de suas z-index para 30, o que significa que vai estar escondido atrás da caixa acima, que tem um z-index, de 31. Novamente, aqui você vai querer substituir o id de início #lp-pom-caixa-xxxx, com as mesmas Identificações você usou o adesivo Formulário (Sempre Lá) solução acima.

#lp-pom-caixa-133{z-index: 30; } #lp-pom-caixa-135{z-index: 30; }

Quando você está escolhendo o local onde você deseja que o formulário seja visível novamente, basta remover todos os itens que podem obscurecer a forma durante a seção. Vai rolar no modo de exibição.

Benefícios

Isso permitirá que você para oferecer um formulário para que os usuários preencham, em diferentes pontos na página, sem ter que se preocupar com isso se tornando um papel de parede ou se você pode se casar externos conversões. Usando apenas CSS também significa que você não terá de se preocupar com os usuários com o JavaScript desactivado (por enquanto os pontos de bónus abaixo dependem de JavaScript, isso vai voltar a cair graciosamente se o JavaScript está desativado).

Desvantagens

Ao contrário do iFrame método, isso não permite que você use mais de um formato de formulário. Ele também requer um pouco mais de CSS conhecimento (e os pontos de bônus vai exigir pelo menos um pouco de tentativa e erro com JavaScript).

Pontos de bônus

O uso de JavaScript para aplicar e remover classes CSS com base na sua posição de rolagem na página. Por exemplo, você pode criar classes CSS como estes que tornam elementos de fade in e fade out de vista.

CSS:

@media (min-width: 800px) { /* fazer a opacidade de um elemento 0, onde tem esta classe */ .ocultar { opacity: 0; } /* em vez de aplicar um efeito imediato, aplicá-la gradualmente, ao longo de 0,2 segundos */ .transição { -webkit-transition: all 0,2 s ease-in-out; -moz-transition: all 0,2 s ease-in-out; -o-transição: todos 0,2 s ease-in-out; transição: todos 0,2 s ease-in-out; }}

Você pode então usar esse JavaScript para aplicar a .ocultar classe quando o utilizador se desloca através de determinados pontos, e retire-a quando chegar ao ponto onde você quer que eles vejam o formulário. Isso pode ser usado para ter um melhor controle de onde o formulário é exibido, sem ter para apenas cobrir-lo. Como antes, você vai precisar atualizar o #lp-pom-caixa-xxx seqüências de caracteres para coincidir com as Identificações na sua conta.

JavaScript:

// Este script aplica-se a “esconder-se” da classe, o que faz com opacidade zero, para certos elementos quando nós se deslocar mais de 100 pixels de distância a partir da parte superior da página. Efetivamente, se rolar a página para baixo desses itens irá desaparecer. $(window).de deslocamento(function() { if ($(window).scrollTop() > 100 ){ $(‘#lp-pom-caixa-54’).addClass(‘ocultar’); $(‘#lp-pom-caixa-228’).addClass(‘ocultar’); } // Esta seção remove a ocultar classe, se estamos a menos de 500 pixels de fundo da página ou role até voltar a ser inferior a 100, a partir do topo. Isso significa que esses elementos vão desaparecer de volta para o modo de exibição quando estamos perto da parte inferior da página ou voltar para o topo. if ($(document).altura() – ($(window).altura() + $(window).scrollTop()) < 500 || $(window).scrollTop() < 100 ){ $('#lp-pom-caixa-54').removeClass('ocultar'); $('#lp-pom-caixa-228').removeClass('ocultar'); }}

O bônus duplo de

Você pode considerar usar o JavaScript para seletivamente mostrar ou ocultar campos de formulário em pontos diferentes. Que iria permitir que você para mostrar uma forma mais longa, inicialmente, por exemplo, e de uma forma mais curta quando aparece o segundo tempo, apesar de ele realmente ser a mesma forma a cada vez.

Para isso, basta adicionar ao seu .seleccione a função JavaScript acima:

if ($(document).altura() – ($(window).altura() + $(window).scrollTop()) < 75){ // Esta parte oculta o "nome completo" parte do formulário, move o botão enviar e reduz o tamanho da caixa quando nós desloque-se para menos de 75 pixels de distância a partir da parte inferior da página $('#container_full_name').addClass('ocultar'); $('#lp-pom-caixa-54').stop().animar({height: "200px"},200); $('.lp-pom-botão-60-impassível').animar({topo: '-=75'}, 200); $('#lp-pom-botão-60').removeClass ("lp-pom-botão-60-impassível'); $('#lp-pom-botão-60').addClass ("lp-pom-botão-de 60 mudou-se');} else{ // Esta parte adiciona o "nome completo" parte de volta para o formulário, se move no botão enviar de volta para baixo e aumenta o tamanho da caixa, se desloca novamente. $('#container_full_name').removeClass('ocultar'); $('#lp-pom-caixa-54').stop().animar({height: "300px"},200); $('.lp-pom-botão-de 60 mudou-se').animar({topo: '+=75'}, 200); $('#lp-pom-botão-60').removeClass ("lp-pom-botão-de 60 mudou-se'); $('#lp-pom-botão-60').addClass ("lp-pom-botão-60-impassível');

Quando o deslocamento dentro 75px de fundo da página, our JavaScript oculta o campo de Nome Completo, reduz o tamanho da caixa, e move-se o botão para cima. Isso tudo poderia acontecer quando o formulário é escondido da vista; eu acabei de fazer isso em vista a demonstrar.

Conclusão

Na tabela abaixo eu separei uma lista rápida dos diferentes soluções e seus pontos fortes e fracos.

Solução

Pontos fortes

Pontos fracos

De rolagem, botão de âncora

Fácil implementação, pouco a codificação necessária

Chocante experiência do usuário

iFrame

De várias formas diferentes

Requer a criação de formulário em outro lugar, e introduz-se um pouco e análise de complexidade para o fluxo de trabalho

Sticky formulário (sempre lá)

Mantém e design de rastreamento dentro de um projeto Unbounce

CTA fadiga, usando uma grande quantidade de espaço de página

Sticky formulário (aparecendo e desaparecendo)

Os benefícios de um pegajoso forma, além de evitar o CTA fadiga e grande necessidade de espaço

CSS conhecimento necessário, pode usar apenas um formulário

Pessoalmente, o meu favorito foi o Sticky Formulário (aparecendo e desaparecendo) de opção, para reduzir a necessidade de integração de ferramentas externas, mas se eu tivesse que usar de várias formas diferentes eu definitivamente poderia imaginar usando um iFrame.

Qual é o seu favorito? Eu faltei qualquer soluções legais? Sinta-se livre para ping-me nos comentários.