Práticas recomendadas para formulários de pagamento e endereço

Maximize as conversões ajudando seus usuários a preencher o endereço e os formulários de pagamento da maneira mais rápida e fácil possível.

Dec 9, 2020 — Atualizado Nov 30, 2021

Available in: English, Español, Русский, 中文, 日本語, and 한국어

Appears in: Web Payments

Sam Dutton

TwitterGitHub

Formulários bem projetados ajudam os usuários e aumentam as taxas de conversão. Uma pequena correção pode fazer uma grande diferença!

Aqui está um exemplo de um formulário de pagamento simples que demonstra todas as práticas recomendadas:

Aqui está um exemplo de um formulário de endereço simples que demonstra todas as práticas recomendadas:

Lista de controle #

• Use elementos HTML significativos : <form> , <input> , <label> e <button> .
• Rotule cada campo do formulário com um <label> .
• Use atributos de elemento HTML para acessar recursos integrados do navegador , em particular type e autocomplete com os valores apropriados.
• Evite usar type="number" para números que não devem ser incrementados, como números de cartão de pagamento. Em vez disso, use type="text" e inputmode="numeric" .
• Se um valor de preenchimento automático apropriado estiver disponível para uma input, select ou área de textarea, você deve usá-lo.
• Para ajudar os navegadores a preencher automaticamente os formulários, forneça valores estáveis aos atributos de name e id entrada que não mudam entre carregamentos de página ou implantações de site da Web.
• Desative os botões de envio depois de tocá-los ou clicá-los.
• Valide os dados durante a entrada, e não apenas no envio do formulário.
• Torne o check-out de convidado o padrão e simplifique a criação da conta assim que o check-out for concluído.
• Mostre o andamento do processo de checkout em etapas claras com frases chamativas claras.
• Limite os potenciais pontos de saída de checkout, removendo a desordem e as distrações.
• Mostre todos os detalhes do pedido na finalização da compra e facilite os ajustes do pedido.
• Não peça dados desnecessários.
• Peça nomes com uma única entrada, a menos que tenha um bom motivo para não fazê-lo.
• Não imponha caracteres somente latinos para nomes e nomes de usuário.
• Permita uma variedade de formatos de endereço.
• Considere o uso de uma única áreatextarea para o endereço.
• Use o preenchimento automático para o endereço de cobrança.
• Internacionalize e localize quando necessário.
• Considere evitar a pesquisa de endereço de código postal.
• Use valores de preenchimento automático de cartão de pagamento apropriados.
• Use uma única entrada para números de cartão de pagamento.
• Evite usar elementos personalizados se eles prejudicarem a experiência de preenchimento automático.
• Teste em campo e também no laboratório: análise de página, análise de interação e medição de desempenho de usuário real.
• Teste em uma variedade de navegadores, dispositivos e plataformas.

Use HTML significativo #

Use os elementos e atributos construídos para o trabalho:

• <form>, <input>, <label> e <button>
• type , autocomplete e inputmode

Isso habilita a funcionalidade do navegador embutido, melhora a acessibilidade e adiciona significado à sua marcação.

Use elementos HTML conforme pretendido #

Coloque seu formulário em um <form> #

Você pode ficar tentado a não se incomodar em envolver seus <input> em um <form> e lidar com o envio de dados puramente com JavaScript.

Não faça isso!

Um <form> HTML dá acesso a um conjunto poderoso de recursos integrados em todos os navegadores modernos e pode ajudar a tornar seu site acessível para leitores de tela e outros dispositivos de assistência. Um <form> também facilita construir funcionalidades básicas para navegadores mais antigos com suporte limitado a JavaScript e para habilitar o envio de formulários mesmo se houver uma falha em seu código e para o pequeno número de usuários que realmente desabilitam o JavaScript.

Se você tiver mais de um componente de página para entrada do usuário, certifique-se de colocar cada um em seu próprio elemento <form> Por exemplo, se você tiver busca e inscrição na mesma página, coloque cada um em seu próprio <form> .

Use <label> para rotular os elementos #

Para rotular um <input>, <select> ou <textarea>, use um <label> .

Associar uma etiqueta com uma entrada, dando ao atributo for do rótulo o mesmo valor que o input id.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Use um único rótulo para uma única entrada: não tente rotular várias entradas com apenas um rótulo. Isso funciona melhor para navegadores e melhor para leitores de tela. Um toque ou clique em um rótulo move o foco para a entrada com a qual está associado e os leitores de tela anunciam o texto do rótulo quando o rótulo ou a entrada do rótulo obtém o foco.

Torne os botões úteis #

Use <button> para botões! Você também pode usar <input type="submit">, mas não use um div ou algum outro elemento aleatório atuando como um botão. Os elementos de botão fornecem comportamento acessível, funcionalidade de envio de formulário integrada e podem ser estilizados facilmente.

Dê a cada botão de envio de formulário um valor que diga o que ele faz. Para cada etapa do checkout, use uma frase chamativa descritiva que mostre o progresso e torne a próxima etapa óbvia. Por exemplo, identifique o botão enviar em seu formulário de endereço de entrega Prosseguir para o pagamento em vez de Continuar ou Salvar .

Considere desativar um botão de envio depois que o usuário tocar ou clicar nele, especialmente quando o usuário estiver fazendo um pagamento ou fazendo um pedido. Muitos usuários clicam nos botões repetidamente, mesmo quando estão funcionando bem. Isso pode atrapalhar o checkout e aumentar a carga do servidor.

Por outro lado, não desative um botão de envio que aguarda uma entrada completa e válida do usuário. Por exemplo, não deixe um botão Salvar endereço desabilitado porque algo está faltando ou é inválido. Isso não ajuda o usuário, pois ele pode continuar a tocar ou clicar no botão e presumir que ele está quebrado. Em vez disso, se os usuários tentarem enviar um formulário com dados inválidos, explique o que está errado e o que fazer para corrigir. Isso é particularmente importante no celular, onde a entrada de dados é mais difícil e os dados do formulário ausentes ou inválidos podem não estar visíveis na tela do usuário no momento em que ele tenta enviar um formulário.

Aproveite ao máximo os atributos HTML #

Facilite a inserção de dados pelos usuários #

Use o atributo de entrada type apropriado para fornecer o teclado correto no celular e habilitar a validação embutida básica pelo navegador.

Por exemplo, use type="email" para endereços de e-mail e type="tel" para números de telefone.

Para datas, tente evitar o uso de elementos de select. Eles interrompem a experiência de preenchimento automático se não forem implementados corretamente e não funcionam em navegadores mais antigos. Para números como o ano de nascimento, considere usar um elemento input em vez de select, uma vez que inserir dígitos manualmente pode ser mais fácil e menos propenso a erros do que selecionar em uma longa lista suspensa, especialmente no celular. Use inputmode="numeric" para garantir o teclado correto no celular e adicione dicas de validação e formato com texto ou um espaço reservado para garantir que o usuário insira os dados no formato apropriado.

Use o preenchimento automático para melhorar a acessibilidade e ajudar os usuários a evitar inserir dados novamente #

O uso de autocomplete apropriados permite que os navegadores ajudem os usuários armazenando dados com segurança e preenchendo automaticamente os valores de input, select e área de textarea. Isso é particularmente importante no celular e crucial para evitar altas taxas de abandono de formulários. O preenchimento automático também oferece vários benefícios de acessibilidade .

Se um valor de preenchimento automático apropriado estiver disponível para um campo de formulário, você deve usá-lo. MDN web docs tem uma lista completa de valores e explicações de como usá-los corretamente.

Por padrão, defina o endereço de cobrança igual ao endereço de entrega. Reduza a confusão visual fornecendo um link para editar o endereço de cobrança (ou use elementos de summary e details) em vez de exibir o endereço de cobrança em um formulário.

Use os valores de preenchimento automático apropriados para o endereço de cobrança, assim como você faz para o endereço de entrega, de forma que o usuário não precise inserir os dados mais de uma vez. Adicione uma palavra de prefixo aos atributos de preenchimento automático se você tiver valores diferentes para entradas com o mesmo nome em seções diferentes.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Ajude os usuários a inserir os dados corretos #

Tente evitar "repreender" os clientes porque eles "fizeram algo errado". Em vez disso, ajude os usuários a preencher formulários com mais rapidez e facilidade, ajudando-os a corrigir os problemas à medida que acontecem. Com o processo de checkout, os clientes estão tentando dar dinheiro à sua empresa por um produto ou serviço, seu trabalho é ajudá-los, não puni-los!

Você pode adicionar atributos de restrição aos elementos do formulário para especificar valores aceitáveis, incluindo min, max e pattern. O estado de validade do elemento é definido automaticamente dependendo se o valor do elemento é válido, como são as pseudoclasses CSS :valid e :invalid que podem ser usadas para estilizar elementos com valores válidos ou inválidos.

Por exemplo, o seguinte HTML especifica a entrada para um ano de nascimento entre 1900 e 2020. O uso de type="number" restringe os valores de entrada a apenas números, dentro do intervalo especificado por min e max. Se você tentar inserir um número fora do intervalo, a entrada será configurada para ter um estado inválido.

O exemplo a seguir usa pattern="[\d ]{10,30}" para garantir um número de cartão de pagamento válido, permitindo também permite espaços:

Os navegadores modernos também fazem validação básica para entradas com o tipo email ou url .

No envio do formulário, os navegadores definem automaticamente o foco nos campos com valores obrigatórios problemáticos ou ausentes. Não é necessário JavaScript!

Valide inline e forneça feedback ao usuário à medida que ele insere os dados, em vez de fornecer uma lista de erros ao clicar no botão de envio. Se você precisar validar os dados em seu servidor após o envio do formulário, liste todos os problemas encontrados e destaque claramente todos os campos do formulário com valores inválidos, além de exibir uma mensagem integrada ao lado de cada campo problemático explicando o que precisa ser corrigido. Verifique os logs do servidor e os dados analíticos em busca de erros comuns. Talvez seja necessário reprojetar seu formulário.

Você também deve usar JavaScript para fazer uma validação mais robusta enquanto os usuários estão inserindo dados e no envio do formulário. Use a API de validação de restrição (que é amplamente suportada ) para adicionar validação personalizada usando a IU do navegador integrada para definir o foco e exibir mensagens.

Saiba mais em Use JavaScript para validação mais complexa em tempo real.

Ajude os usuários a evitar a perda de dados obrigatórios #

Use o atributo required nas entradas de valores obrigatórios.

Quando um formulário é enviado, os navegadores modernos automaticamente solicitam e definem o foco nos required com dados ausentes, e você pode usar a pseudo classe :required para destacar os campos obrigatórios. Não é necessário JavaScript!

Adicione um asterisco ao rótulo para cada campo obrigatório e adicione uma nota no início do formulário para explicar o que o asterisco significa.

Simplifique o checkout #

Cuidado com a lacuna do comércio para celular! #

Imagine que seus usuários tenham um orçamento de fadiga. Gaste-o e seus usuários irão embora.

Você precisa reduzir o atrito e manter o foco, especialmente no celular. Muitos sites obtêm mais tráfego no celular, mas mais conversões em computadores: um fenômeno conhecido como lacuna do comércio para celular. Os clientes podem simplesmente preferir concluir uma compra no computador, mas as taxas de conversão em dispositivos móveis mais baixas também são resultado da experiência do usuário insatisfatória. Seu trabalho é minimizar as conversões perdidas no celular e maximizar as conversões em computadores. A pesquisa mostrou que há uma grande oportunidade de fornecer uma melhor experiência de formulários para celular.

Acima de tudo, os usuários estão mais propensos a abandonar formulários que parecem longos, complexos e sem um senso de direção. Isso é especialmente verdadeiro quando os usuários estão em telas menores, distraídos ou com pressa. Peça o mínimo de dados possível.

Tornar o checkout de convidado o padrão #

Para uma loja online, a maneira mais simples de reduzir o atrito com formulários é tornar o pagamento como convidado como padrão. Não force os usuários a criar uma conta antes de fazer uma compra. Não permitir o pagamento como convidado é citado como um dos principais motivos para o abandono do carrinho de compras.

Você pode oferecer inscrição na conta após a finalização da compra. Nesse ponto, você já tem a maioria dos dados de que precisa para configurar uma conta, portanto, a criação da conta deve ser rápida e fácil para o usuário.

Mostrar progresso do checkout #

Você pode tornar o processo de checkout menos complexo mostrando o progresso e deixando claro o que precisa ser feito a seguir. O vídeo abaixo mostra como o varejista johnlewis.com do Reino Unido consegue isso.

Você tem que manter o ímpeto! Para cada etapa do pagamento, use títulos de página e valores de botão descritivos que deixem claro o que precisa ser feito naquele instante e qual é a próxima etapa de checkout.

Use o enterkeyhint nas entradas do formulário para definir o rótulo da tecla enter do teclado móvel. Por exemplo, use enterkeyhint="previous" e enterkeyhint="next" em um formulário de várias páginas, enterkeyhint="done" para a entrada final no formulário e enterkeyhint="search" para uma entrada de pesquisa.

O atributo enterkeyhint é compatível com Android e iOS. Você pode descobrir mais no enterkeyhint explainer.

Torne mais fácil para os usuários irem e voltarem no processo de finalização da compra para facilmente retificarem seus pedidos, mesmo quando eles estiverem na etapa final de pagamento. Mostre todos os detalhes do pedido, não apenas um resumo limitado. Permita que os usuários ajustem facilmente as quantidades dos itens na página de pagamento. Sua prioridade na finalização da compra é evitar a interrupção do andamento da conversão.

Remova distrações #

Limite os pontos de saída potenciais, removendo confusão visual e distrações, como promoções de produtos. Muitos varejistas de sucesso removem até mesmo a navegação e a pesquisa do checkout.

Mantenha a jornada no foco. Este não é o momento de apresentar tentações para os usuários fazerem outra coisa!

Para usuários recorrentes, você pode simplificar ainda mais o fluxo de checkout, ocultando dados que eles não precisam ver. Por exemplo: exiba o endereço de entrega em texto simples (não em um formulário) e permita que os usuários o alterem através de um link.

Facilite a inserção de nome e endereço #

Peça apenas os dados de que você precisa #

Antes de começar a escrever o código de seus formulários de nome e endereço, certifique-se de entender quais dados são necessários. Não peça dados de que não precisa! A maneira mais simples de reduzir a complexidade do formulário é remover campos desnecessários. Isso também é bom para a privacidade do cliente e pode reduzir custos e a responsabilidade com os dados de back-end.

Use um único nome de entrada #

Permita que seus usuários insiram seus nomes usando uma única entrada, a menos que você tenha um bom motivo para armazenar nomes próprios, sobrenomes, títulos honoríficos ou outras partes de nomes separadamente. Usar uma única entrada de nome torna os formulários menos complexos, permite cortar e colar e simplifica o preenchimento automático.

Em particular, a menos que você tenha um bom motivo para não fazer isso, não se preocupe em adicionar uma entrada separada para um prefixo ou título (como Sra., Dr. ou Lord). Os usuários podem digitar isso com seus nomes, se quiserem. Além disso, o honorific-prefix atualmente não funciona na maioria dos navegadores e, portanto, adicionar um campo para prefixo de nome ou título interromperá a experiência de preenchimento automático de formulário de endereço para a maioria dos usuários.

Habilitar preenchimento automático de nome #

Use name para um nome completo:

<input autocomplete="name" ...>

Se você realmente tem um bom motivo para dividir as partes do nome, certifique-se de usar os valores de preenchimento automático apropriados:

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

Permitir nomes internacionais #

Você pode querer validar suas entradas de nome ou restringir os caracteres permitidos para os dados de nome. No entanto, você precisa ser o menos restritivo possível com os alfabetos. É rude ouvir que seu nome é "inválido"!

Para a validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. Somente latino exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Permita, em vez disso, a correspondência de letras Unicode e certifique-se de que seu back-end suporte Unicode com segurança tanto como entrada quanto como saída. O Unicode em expressões regulares é bem suportado por navegadores modernos.

<!-- Nomes com caracteres não latinos (como Françoise ou Jörg) são 'inválidos'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Permitir uma variedade de formatos de endereço #

Ao projetar um formulário de endereço, tenha em mente a variedade surpreendente de formatos de endereço, mesmo dentro de um único país. Tenha cuidado para não fazer suposições sobre endereços "normais". (Dê uma olhada no UK Address Oddities! se não estiver convencido!)

Flexibilize os formulários de endereço #

Não force os usuários a tentar espremer seus endereços em campos de formulário onde não cabem.

Por exemplo, não insista em um número de casa e nome de rua em entradas separada visto que muitos endereços não usam esse formato e dados incompletos podem interromper o preenchimento automático do navegador.

Seja especialmente cuidadoso com campos de endereço required. Por exemplo, endereços em grandes cidades no Reino Unido não têm um condado, mas muitos sites ainda obrigam os usuários a informar um.

Usar duas linhas de endereço flexíveis pode funcionar bem o suficiente para uma variedade de formatos de endereço.

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

Adicione rótulos para corresponder:

<label for="address-line-1">
Linha de endereço 1 (ou nome da empresa)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Endereço linha 2 (opcional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

Você pode experimentar combinar e editar o exemplo incorporado abaixo.

Considere usar um único textarea para o endereço #

A opção mais flexível para endereços é fornecer um único textarea.

O textarea se ajusta a qualquer formato de endereço e é ótimo para recortar e colar, mas lembre-se de que pode não atender aos seus requisitos de dados e os usuários podem perder o preenchimento automático se anteriormente tiverem usado apenas formulários com address-line1 e address-line2 .

Para um textarea, use street-address como o valor de preenchimento automático.

Aqui está um exemplo de um formulário que demonstra o uso de uma única área textarea para o endereço:

Internacionalize e localize seus formulários de endereço #

É especialmente importante que os formulários de endereço considerem a internacionalização e a localização, dependendo de onde seus usuários estiverem localizados.

Esteja ciente de que a nomenclatura das partes do endereço varia, assim como os formatos dos endereços, mesmo dentro do mesmo idioma.

    ZIP code: EUA
 Postal code: Canadá
    Postcode: Reino Unido
     Eircode: Irlanda
         PIN: Índia

Pode ser irritante ou confuso receber um formulário que não combina com seu endereço ou que não usa as palavras que você espera.

Personalizar formulários de endereço para vários locais pode ser necessário para o seu site, mas o uso de técnicas para maximizar a flexibilidade do formulário (conforme descrito acima) pode ser adequado. Se você não localizar seus formulários de endereço, certifique-se de entender as principais prioridades para lidar com uma variedade de formatos de endereço:

• Evite ser muito específico sobre partes do endereço, como insistir no nome de uma rua ou número de casa.
• Sempre que possível, evite tornar os campos required. Por exemplo, os endereços em muitos países não têm um código postal e endereços rurais podem não ter um nome de rua ou estrada.
• Use nomenclatura inclusiva: 'País/região' e não 'País'; 'ZIP/código postal' e não 'ZIP'.

Deixe flexível! O exemplo de formulário de endereço simples acima pode ser adaptado para funcionar 'bem o suficiente' para muitos locais.

Considere evitar a pesquisa de endereço de código postal #

Alguns sites usam um serviço para pesquisar endereços com base no código postal ou CEP. Isso pode ser sensato para alguns casos de uso, mas você deve estar ciente das potenciais desvantagens.

A sugestão de endereço de código postal não funciona para todos os países e, em algumas regiões, os códigos postais podem incluir um grande número de endereços potenciais.

É difícil para os usuários selecionar a partir de uma longa lista de endereços, especialmente no celular se estiverem com pressa ou estressados. Pode ser mais fácil e menos sujeito a erros permitir que os usuários aproveitem o preenchimento automático e insiram seus endereços completos preenchidos com um único toque ou clique.

Simplifique os formulários de pagamento #

Os formulários de pagamento são a parte mais crítica do processo de checkout. O design inadequado do formulário de pagamento é uma causa comum de abandono do carrinho de compras. O diabo está nos detalhes: pequenas falhas podem levar os usuários a abandonar uma compra, principalmente no celular. Seu trabalho é projetar formulários para facilitar ao máximo a inserção de dados pelos usuários.

Ajude os usuários a evitar inserir novamente os dados de pagamento #

Certifique-se de adicionar os autocomplete apropriados nos formulários de cartão de pagamento, incluindo o número do cartão de pagamento, o nome no cartão e o mês e ano de validade:

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

Isso permite que os navegadores ajudem os usuários armazenando com segurança os detalhes do cartão de pagamento e inserindo corretamente os dados do formulário. Sem o preenchimento automático, é mais provável que os usuários mantenham um registro físico dos detalhes do cartão de pagamento ou armazenem dados do cartão de pagamento de maneira insegura em seus dispositivos.

Evite usar elementos personalizados para datas de cartão de pagamento #

Se não forem projetados corretamente, os elementos personalizados podem interromper o fluxo de pagamento interrompendo o preenchimento automático e não funcionar em navegadores mais antigos. Se todos os outros detalhes do cartão de pagamento estiverem disponíveis no preenchimento automático, mas um usuário for obrigado a encontrar seu cartão físico de pagamento para procurar uma data de validade porque o preenchimento automático não funcionou para um elemento personalizado, você provavelmente perderá uma venda. Considere usar elementos HTML padrão em vez disso e estilize-os de acordo.

Use uma única entrada para cartão de pagamento e números de telefone #

Para cartões de pagamento e números de telefone, use uma única entrada: não divida o número em partes. Isso facilitar para os usuários inserirem dados, torna a validação mais simples e permite que os navegadores sejam preenchidos automaticamente. Considere fazer o mesmo para outros dados numéricos, como PIN e códigos bancários.

Valide com atenção #

Você deve validar a entrada de dados em tempo real e antes do envio do formulário. Uma maneira de fazer isso é adicionando um pattern a uma entrada de cartão de pagamento. Se o usuário tentar enviar o formulário de pagamento com um valor inválido, o navegador exibe uma mensagem de aviso e define o foco na entrada. Não é necessário JavaScript!

No entanto, seu pattern deve ser flexível o suficiente para lidar com a variedade de comprimentos de número de cartão de pagamento: de 14 dígitos (ou possivelmente menos) a 20 (ou mais). Você pode descobrir mais sobre a estruturação do número do cartão de pagamento no LDAPwiki .

Permita que os usuários incluam espaços ao inserir um novo número de cartão de pagamento, pois é assim que os números são exibidos nos cartões físicos. Isso é mais amigável para o usuário (você não terá que dizer a eles "eles fizeram algo errado"), e é menos provável que interrompa o fluxo de conversão, é simples remover espaços nos números antes do processamento.

Teste em uma variedade de dispositivos, plataformas, navegadores e versões #

É particularmente importante testar o endereço e os formulários de pagamento nas plataformas mais comuns para seus usuários, uma vez que a funcionalidade e a aparência do elemento do formulário podem variar, e as diferenças no tamanho da janela de visualização podem levar a um posicionamento problemático. O BrowserStack permite o teste gratuito para projetos de código aberto em uma variedade de dispositivos e navegadores.

Implemente análises e RUM #

Testar a usabilidade e o desempenho localmente pode ser útil, mas você precisa de dados do mundo real para entender corretamente como é a experiência dos usuários com seus formulários de pagamento e de endereço.

Para isso, você precisa de análises e monitoramento de usuário real: dados para a experiência de usuários reais, como quanto tempo as páginas de checkout levam para carregar ou quanto tempo o pagamento leva para ser concluído:

• Análise da página: visualizações de página, taxas de rejeição e saídas para cada página com um formulário.
• Análise da interação : funis de objetivos e eventos indicam onde os usuários abandonam seu fluxo de checkout e quais ações eles realizam ao interagir com seus formulários.
• Desempenho do site : métricas centradas no usuário podem dizer se suas páginas de checkout demoram para carregar e, em caso afirmativo, qual é a causa.

Análise de página, análise de interação e medição de desempenho real do usuário tornam-se especialmente valiosos quando combinados com registros do servidor, dados de conversão e testes A/B, permitindo que você responda a perguntas como se os códigos de desconto aumentam a receita ou se uma mudança no layout do formulário melhora conversões.

Isso, por sua vez, oferece uma base sólida para priorizar esforços, fazer mudanças e recompensar o sucesso.

Continue aprendendo #

• Práticas recomendadas para formulários de login
• Práticas recomendadas para formulários de inscrição
• Verifique os números de telefone na web com a API WebOTP
• Crie formulários incríveis
• Melhores práticas para design de formulários para celular
• Controles de formulário mais capazes
• Criação de formulários acessíveis
• Simplificando o fluxo de inscrição usando a API de gerenciamento de credenciais
• O Guia compulsivo de endereços postais de Frank fornece links úteis e orientação abrangente para formatos de endereço em mais de 200 países.
• Listas de países tem uma ferramenta para baixar códigos e nomes de países em vários idiomas, em vários formatos.

Foto de @rupixen no Unsplash .