Formulário de pedido personalizado avançado

O formulário de pedido personalizado avançado permite adicionar outras personalizações ao formulário de pedido usando um modelo de CSS.

Com o CSS, você tem máximo controle e garante a conformidade com nossas regras contáveis e comerciais.

OBSERVAÇÃO: é preciso conhecer HTML e CSS para usar o formulário de pedido personalizado avançado. Se você não se sentir à vontade com HTML e CSS, encontre um desenvolvedor que possa ajudar ou use o formulário de pedido personalizado padrão.

Os tópicos a seguir são abordados neste artigo:

New Version

Nas próximas semanas, ClickBank estará mudando para uma versão mais atualizada de nosso formulário de compra. A nova versão tem uma série de benefícios:

  • Responsivo à dispositivos móveis
  • Aparência moderna
  • Notificações de abandonamento do carrinho de compra.

O novo formulário de pedido usa uma versão atualizada do modelo do formulário de pedido personalizado avançado. Se você estiver usando atualmente um formulário de pedido personalizado avançado, ele continuará a funcionar durante o período de migração.

Agora, você pode enviar arquivos do formulário de pedido personalizado avançado para aprovação, que usam o novo modelo. A nova versão é exibida como nova avançada na interface do usuário. Isto lhe dá tempo para ter arquivos preparados para a transição.

No início de junho, nós iniciaremos a oferecer o novo formulário de pedido. Os produtos que usam um formulário de pedido com personalização básica ou não tem perdosonalização irão automaticamente usar o novo formulário de pedido.  Produtos que já estiverem usando o formulário de pedido personalizado avançado podem usar tanto o novo como o velho "design", dando lhe tempo para testar o novo formulário de pedido e migrar para o novo formulário de pedido personalizado avançado que funcione para você.

No final do ano, nós removeremos o suporte para o formulário de pedido antigo. Qualquer formulário de pedido personalizado avançado antigo que ainda estiver sendo usado  irá usar o padrão para o novo formulário de pedido sem nenhuma personalização.

Elementos personalizáveis

Como varejista de seus produtos na Internet, o ClickBank tem regras comerciais internas e requisitos para processamento de pagamentos que limitam a personalização de alguns elementos do formulário. Os elementos a seguir podem ter seu estilo alterado, mas devem ser incluídos em todos os formulários de pedido:

  • Termos e condições do ClickBank
  • Direitos autorais do ClickBank
  • Informações sobre a atribuição do afiliado
  • Logotipo da Kount

Além dos elementos padrão mostrados no formulário do pedido (como informações de cobrança, resumo do produto etc.), incluímos 12 recipientes personalizados nos quais você pode fazer o upload de suas próprias imagens. Eles podem ser usados em banners personalizados, imagens de segundo plano, depoimentos e promoção da marca.

Algumas imagens podem ser movidas, mas não podem ser alteradas:

  • O logotipo do ClickBank deve estar visível ao cliente em algum lugar do formulário. Você pode escolher entre diversos tamanhos que estão incluídos no arquivo HTML do pacote do formulário de pedido personalizado avançado.
  • Os logotipos de segurança devem aparecer no formulário. Essas imagens são fornecidas por terceiros e estão disponíveis apenas em tamanho único. O posicionamento pode ser alterado, mas os logotipos devem estar visíveis para o cliente.

A personalização inclui fontes, cores, cores de fundo e tamanho. Lembre-se de que não é possível mudar o texto. Por exemplo, você pode mudar a cor, a fonte e o visual do botão Pagar agora, mas não é possível mudar o texto para Comprar agora.

Exemplos de elementos que podem ser personalizados:

  • Imagens do cabeçalho e do logotipo
  • Títulos (por ex.: formulário de pagamento seguro, detalhes do pedido)
  • Imagem do produto
  • Título do produto
  • Descrição do produto
  • Menus suspensos de idioma e moeda
  • Garantia do ClickBank
  • Informações de cobrança
  • Informações de envio
  • Botão Pagar agora

Implementação de um formulário de pedido personalizado avançado

O processo de implementação inclui as seguintes etapas:

  1. Download e descompactação de arquivos
  2. Criação e edição do formulário
  3. Upload do conteúdo
  4. Obtenção de aprovação do ClickBank
  5. Habilitação do formulário de pedido personalizado avançado

Repita estas etapas quantas vezes forem necessárias para encontrar os formulários de pedidos ideais para conversão de produtos adicionais.

Download e descompactação de arquivos

A seção "Recursos" desta página contém um link para um arquivo "ZIP" Baixe este arquivo. Ele contém todos os arquivos necessários para criar o seu formulário de pedido personalizado.

O novo arquivo Zip contém:

  • index.html – Este arquivo contém um link para ‘theme/custom-css.css’.
    <link rel=”stylesheet” href=”theme/custom-theme.css”>
    Se você quiser alterar o nome do seu arquivo CSS personalizado com o fim de fazer testes, tenha certesa de que ele está refletido no link acima. Quando você enviar o seu formulário de pedido personalizado avançado, o arquivo css tem que usar o nome original como exibido acima.
  • Examples.pdf – Este arquivo contém exemplos de formulários de pedido personalizados avançados, exibidos em "desktop" e nos formatos de dispositivos  móveis.
  • dist – Esta pasta contém arquivos necessários para fazer com que seu formulário de pedido funcione localmente. Não modifique os arquivos nesta pasta.
  • img – Esta pasta contém arquivos necessários para fazer o seu formulário de pedido funcionar localmente. Não modifique os arquivos nesta pasta.
  • theme – Esta pasta contém o arquivo "custom-css.css que você edita para criar o seu  formulário de pedido personalizado avançado.

O antigo artigo Zip contém:

  • default-template.html: contém todo o código HTML (elementos personalizáveis e não personalizáveis) que compõem o formulário de pedido do ClickBank. Use esse arquivo para visualizar o CSS personalizado e ver a aparência do formulário de pedido após as alterações. Lembre-se de que você só poderá fazer o upload do arquivo CSS, pois não aceitaremos mudanças no código HTML. Por padrão, você verá um link para o CSS pronto do formulário de pedido do ClickBank: <link rel="stylesheet" href="cb-content/public/css/orderform.css">
Um link para o arquivo CSS personalizado é incluído no modelo do HTML, mas fica desativado por padrão. <!--<link rel="stylesheet" href="c/vendor_name/custom.css">-->
Se você quiser alterar o nome do arquivo CSS personalizado, certifique-se de que a mudança seja refletida no link acima. Ative o link para ver as alterações. 
  • Pasta c:o local onde você adicionará os arquivos do formulário de pedido personalizado (CSS e imagens)
  • Pasta cb-content folder:contém arquivos que processam o formulário de pedido.
  • CUIDADO: não altere nem adicione arquivos a essa pasta.

Criação e edição do formulário

Depois de baixar os arquivos necessários, você pode usá-los para personalizar seu formulário de pedido.

  1. Abra o arquivo default-template.html e ative o link para o arquivo CSS personalizável.
  2. Abra o arquivo CSS personalizável em c/vendor_name/custom.css
  3. Altere o arquivo para personalizar o formulário de pedido.
  4. É possível visualizar suas alterações localmente. Basta abrir o arquivo default-template.html em qualquer navegador.
    • Recomendamos realizar um teste em diferentes combinações de navegadores e sistemas operacionais, já que a experiência pode variar.
    • Se você não quiser exibir um elemento DIV no formulário, defina a propriedade do DIV no CSS para display:none. Você pode ocultar qualquer DIV no CSS, mas o formulário de pedido personalizado não será aprovado se você ocultar algum elemento obrigatório. 

Upload do conteúdo

Depois de concluir a personalização, faça o upload da imagem e dos arquivos CSS na sua conta.

Upload das imagens do formulário de pedido personalizado

Todas as imagens incluídas no CSS personalizado devem ser enviadas por upload e aprovadas na sua conta do ClickBank.

Para fazer o upload das imagens:

  1. Faça login em sua conta do ClickBank.
  2. Clique na guia Configurações.
  3. Clique em Minhas imagens.
  4. Clique no botão Adicionar nova imagem.
  5. Insira os detalhes da imagem:
    • Nome: usado para identificar a imagem durante o processo.
    • Tag alt: usada para descrever a imagem para usuários que desativaram imagens no navegador ou estão usando um leitor de tela.
    • Tipo de imagem: selecione Imagem de formulário de pedido personalizado avançado.
    • Imagem: A imagem propriamente dita. Clique em Escolher arquivo, em seguida, procure a imagem.
  6. Clique em Fazer upload.
    A imagem é enviada ao ClickBank para ser aprovada.

Upload dos arquivos CSS do formulário de pedido personalizado

Assim que as imagens personalizadas forem aprovadas, será necessário fazer o upload do arquivo CSS personalizado. Se você tiver feito personalizações padrão no formulário de pedido (banners de substituição ou cores da barra lateral etc.), essas alterações serão exibidas em Modelos básicos. Todas as personalizações do arquivo CSS estarão incluídas em Modelos avançados.

  1. Faça login em sua conta do ClickBank.
  2. Clique na guia Configurações.
  3. Clique em Meu formulário de pedido.
  4. Clique no botão Adicionar novo modelo.
  5. Selecione tipo correto :
    • Avançado – Um  formulário de pedido personalizado avançado criado usando o antigo arquivo  zip.
    • Novo avançado – Um  formulário de pedido personalizado avançado criado usando novo arquivo zip.
  6. Faça o upload do arquivo CSS.

Se estiver válido, o arquivo CSS será enviado ao ClickBank para ser aprovado. Se houver erros, não será feito o upload do arquivo.

Erros que podem ocorrer durante o carregamento do CSS:

  • O arquivo CSS está vazio
  • O arquivo CSS tem mais de 20 kb
  • Formatação inválida de CSS (por ex.: ausência de aspas curvas, vírgulas ou pontos e vírgulas ou ausência de identificadores ou propriedades)
  • O arquivo CSS tem referências absolutas para imagens remotas que começam com http, https ou www.
  • O CSS tem imagens incorporadas (por ex.: url(data: image/gif;base64,R01GODhCg)
  • As regras @import estão incluídas (e.g. @import url ('/css/styles.css')

Obtenção de aprovação do ClickBank

Após o envio, o formulário do pedido será analisado pela equipe de serviços comerciais do ClickBank. Antes da aprovação, verificamos se ele atende aos seguintes critérios:

  • O logotipo do ClickBank está presente e visível.
  • Os termos de venda do ClickBank estão presentes e visíveis.
  • Os elementos de rodapé (como logotipo da Kount, direitos autorais e informações de atribuição do afiliado) estão presentes e visíveis.
  • O preço e as informações de pagamento recorrente (se aplicáveis) estão presentes e visíveis.
  • As imagens e/ou o design não violam o Contrato de cliente do ClickBank.
  • As imagens respeitam as diretrizes existentes. O ClickBank não aceita imagens, tags de nome de imagem e tags alt de imagem que contiverem violações das políticas do ClickBank (como material protegido por direitos autorais ou nomes de marcas registradas, nudez, profanidade etc.).

Habilitação do formulário de pedido personalizado avançado

Na página Meu formulário de pedido, serão exibidos todos os formulários de pedido enviados por upload (pendentes e aprovados).

Se já tiver usado os formulários de pedido personalizado básicos, você saberá como usar os parâmetros cbskin. O processo dos formulários de pedido personalizado avançados funciona da mesma maneira que o dos formulários básicos.

Localize o parâmetro cbskin (cbskin=####) do formulário do pedido que você deseja usar. É preciso incluir o parâmetro de URL em todos os links de pagamento na página de lançamento.

Para lembrar, os links de pagamento têm o seguinte formato:

http://item.nickname.pay.clickbank.net

Adicione o novo parâmetro ao final do URL com /? antes do parâmetro:

http://item.nickname.pay.clickbank.net/?cbskin=SkinID

Após o upload dos links de pagamento na página de lançamento, os clientes verão o novo formulário de pedido personalizado (desde que ele tenha sido aprovado pelo ClickBank).

OBSERVAÇÃO: se você estiver usando as vendas adicionais PitchPlus, transmita o parâmetro cbskin antes de transmitir o parâmetro de ID de fluxo. Por exemplo:

http://item.nickname.pay.clickbank.net/?cbskin=1234&cbfid=2345

Perguntas frequentes

P: Um único tipo de formulário CSS funciona para todos os tipos de produtos?

R: Sim. Não é necessário criar um CSS para cada tipo de produto. Todas as personalizações serão aplicadas a produtos físicos e digitais, assim como a produtos padrão ou recorrentes. Não esconda elementos no CSS (por ex.: detalhes de envio) para garantir que a personalização funcione com todos os produtos.

P: Posso alterar os detalhes do formulário?

R: Não. Você só pode modificar os elementos que estão presentes e não pode fazer alterações no texto nem adicionar novos campos ao formulário.

P: Posso adicionar imagens de selos de segurança do meu site?

R: Não. É possível usar apenas os selos do ClickBank, já que o formulário do pedido está em nosso domínio. Os selos de segurança devem ser clicáveis, logo nenhuma imagem de selo de segurança é permitida.

P: Não vejo minhas imagens depois de fazer o upload do arquivo CSS personalizado. O que aconteceu? 

R: Verifique se você fez o upload das imagens necessárias para a sua conta. Em seguida, faça referência aos caminhos das imagens no arquivo CSS. Não permitimos links externos para outros URLs de imagens ou outro tipo de conteúdo no CSS.

P: O menu suspenso de idioma é obrigatório?

R: Sim, o ClickBank tem clientes de todo o mundo que compram os produtos. Mesmo que seu produto seja oferecido em apenas um idioma, muitos clientes preferem fazer o pedido em seu idioma nativo. A conversão é mais alta para formulários de pedido que oferecem tradução. Lembre-se de que os textos incluídos nas imagens personalizadas não serão traduzidos. 

Para obter uma lista completa dos elementos obrigatórios, consulte nosso PDF com a documentação que está incluída no arquivo ZIP.

P: Posso colocar o preço do meu produto em uma imagem?

R: Não. Se você listar o preço como imagem, ele não será atualizado dinamicamente com as alterações em impostos e moeda. O preço ficará incorreto para o cliente se for exibido como imagem estática. 

Recursos

Arquivos

Pacote padrão do formulário personalizado de pedido avançado com complemento do pedido – Pacote padrão do formulário personalizado de pedido avançado que inclui todos os elementos no formulário do pedido, incluindo elementos DIV da personalização do complemento do pedido.

Dicas de edição de CSS

Alteração da cor de fundo do formulário

Altere o texto em azul no CSS (#fff) para editar a cor de fundo padrão do formulário.

.main_form_container{ 
background-color: #fff;
padding-top: 5px;
box-shadow; 0px 3px 10px #888;
}

Remoção ou edição da sombra nas bordas do formulário

Para remover a sombra, desative a propriedade de sombra da caixa ou defina-a como nenhuma. Também é possível definir um estilo diferente de sombra.

.main_form_container{
background-color: #fff;
padding-top: 5px;
box-shadow: 0px 3px 10px #888;
}

Adição de borda em volta do formulário

Adicione a linha sublinhada para incluir uma borda. 

.main_form_container{
background-color: #fff;
padding-top: 5px;
box-shadow: 0px 3px 10px #888;
border: 1px solid #000000;

Alteração da fonte padrão

Modifique o texto sublinhado para alterar a fonte padrão.

.body{
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
background: #fff;
}

Alteração de estilo dos campos de inserção do formulário

Os dois estilos exibidos aqui controlam o estilo do botão Pagar agora.

.cb_paybutton input[type=submit] {
width: 300px;
}
.submitButton{
padding: 7px 15px;
border: 1px solid #elelel;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background:-moz-linear-gradient(top, #fff000 0%, #ffcc00 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, $ffcc00), color-stop (100%, #ff000));
background-image:-ms-linear-gradient(top, #ffcc00 0%, #fff000 100%);
filter:
progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ffcc00', endColorstr='#fff000')'
cursor: pointer;
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 16px;
}
Tem mais dúvidas? Envie uma solicitação

0 Comentários

Por favor, entre para comentar.
Powered by Zendesk