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

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

Sam Dutton

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.

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

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

Lista de verificação

• Use elementos HTML significativos: <form>, <input>, <label> e <button>.
• Rotule cada campo de formulário com um <label>.
• Use atributos de elementos HTML para acessar recursos integrados do navegador, em especial type e autocomplete com valores adequados.
• Evite usar type="number" para números que não devem ser incrementados, como números de cartão de pagamento. Use type="text" e inputmode="numeric".
• Se um valor de preenchimento automático adequado estiver disponível para um input, select ou textarea, use-o.
• Para ajudar os navegadores a preencher formulários automaticamente, dê aos atributos de entrada name e id valores estáveis que não mudam entre carregamentos de página ou implantações de sites.
• Desative os botões de envio depois que eles forem tocados ou clicados.
• Valide os dados durante a entrada, não apenas no envio do formulário.
• Defina a compra sem login como padrão e simplifique a criação de contas após a finalização da compra.
• Mostre o progresso do processo de finalização da compra em etapas claras com calls-to-action evidentes.
• Limite os possíveis pontos de saída da finalização da compra removendo elementos desnecessários e distrações.
• Mostre todos os detalhes do pedido na finalização da compra e facilite os ajustes.
• Não peça dados de que você não precisa.
• Peça nomes com uma única entrada, a menos que você tenha um bom motivo para não fazer isso.
• Não exija caracteres apenas em latim para nomes e nomes de usuário.
• Permita vários formatos de endereço.
• Considere usar um único textarea para o endereço.
• Use o preenchimento automático para o endereço de faturamento.
• Internacionalize e localize quando necessário.
• Evite a pesquisa de endereço por código postal.
• Use valores de preenchimento automático adequados para cartões de pagamento.
• 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 no campo e no laboratório: análise de páginas, análise de interações e medição de desempenho de usuários reais.
• Teste em vários navegadores, dispositivos e plataformas.

Use um HTML significativo

Use os elementos e atributos criados para o trabalho:

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

Eles ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e dão significado à marcação.

Usar elementos HTML conforme o esperado

Coloque o formulário em um <form>

Pode ser tentador não se preocupar em envolver os elementos <input> em um <form> e processar o envio de dados puramente com JavaScript.

Não faça isso.

Um <form> HTML dá acesso a um conjunto avançado de recursos integrados em todos os navegadores mais recentes e pode ajudar a tornar seu site acessível para leitores de tela e outros dispositivos assistivos. Um <form> também simplifica a criação de funcionalidades básicas para navegadores mais antigos com suporte limitado a JavaScript e permite o envio de formulários mesmo que haja uma falha no código, além de ser útil para o pequeno número de usuários que desativam o JavaScript.

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

Usar <label> para rotular elementos

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

Associe um rótulo a uma entrada atribuindo ao atributo for do rótulo o mesmo valor que o id da entrada.

<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 leitores de tela. Um toque ou clique em um rótulo move o foco para a entrada associada a ele, e os leitores de tela anunciam o texto do rótulo quando o rótulo ou a entrada dele recebe o foco.

Criar botões úteis

Use <button> para botões. Também é possível usar <input type="submit">, mas não use um div ou algum outro elemento aleatório que funcione como um botão. Os elementos de botão oferecem comportamento acessível, funcionalidade integrada de envio de formulários e podem ser estilizados com facilidade.

Dê a cada botão de envio de formulário um valor que descreva o que ele faz. Para cada etapa da finalização da compra, use uma call-to-action descritiva que mostre o progresso e deixe claro qual é a próxima etapa. Por exemplo, rotule o botão de envio no formulário de endereço de entrega como Ir 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 um pedido. Muitos usuários clicam em botões repetidamente, mesmo que eles estejam funcionando bem. Isso pode atrapalhar a finalização da compra e aumentar a carga do servidor.

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

Por outro lado, não desative um botão de envio que está aguardando uma entrada completa e válida do usuário. Por exemplo, não deixe um botão Salvar endereço desativado porque algo está faltando ou é inválido. Isso não ajuda o usuário, que pode continuar tocando ou clicando no botão e achar que ele está quebrado. Em vez disso, se os usuários tentarem enviar um formulário com dados inválidos, explique o que deu errado e o que fazer para corrigir. Isso é especialmente importante em dispositivos móveis, em que a entrada de dados é mais difícil e os dados de formulário ausentes ou inválidos podem não estar visíveis na tela do usuário quando ele tenta enviar um formulário.

Aproveite ao máximo os atributos HTML

Facilitar a inserção de dados pelos usuários

Use o atributo de entrada type adequado para fornecer o teclado certo em dispositivos móveis e ativar a validação básica integrada pelo navegador.

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

Para datas, evite usar elementos select personalizados. Eles prejudicam 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, use um elemento input em vez de um select, já que inserir dígitos manualmente pode ser mais fácil e menos propenso a erros do que selecionar em uma longa lista suspensa, especialmente em dispositivos móveis. Use inputmode="numeric" para garantir o teclado certo em dispositivos móveis e adicione dicas de validação e formato com texto ou um marcador de posição para garantir que o usuário insira os dados no formato adequado.

Usar o preenchimento automático para melhorar a acessibilidade e ajudar os usuários a evitar a reinserção de dados

O uso de valores autocomplete adequados permite que os navegadores ajudem os usuários armazenando dados com segurança e preenchendo automaticamente os valores input, select e textarea. Isso é especialmente importante em dispositivos móveis 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 adequado estiver disponível para um campo de formulário, use-o. A documentação da Web do MDN tem uma lista completa de valores e explicações sobre como usá-los corretamente.

Valores estáveis

Endereço de faturamento

Por padrão, o endereço de faturamento é o mesmo que o endereço de entrega. Reduza a poluição visual fornecendo um link para editar o endereço de faturamento (ou use os elementos summary e details) em vez de exibir o endereço de faturamento em um formulário.

Use valores de preenchimento automático adequados para o endereço de faturamento, assim como você faz para o endereço de entrega, para que o usuário não precise inserir dados mais de uma vez. Adicione um 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-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Ajudar os usuários a inserir os dados certos

Evite "dar bronca" nos clientes porque eles "fizeram algo errado". Em vez disso, ajude os usuários a preencher formulários de maneira mais rápida e fácil, ajudando-os a corrigir problemas à medida que eles acontecem. Durante o processo de finalização da compra, os clientes estão tentando pagar à sua empresa por um produto ou serviço. Seu trabalho é ajudá-los, não puni-los.

É possível 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, assim como as pseudoclasses CSS :valid e :invalid, que podem ser usadas para estilizar elementos com valores válidos ou inválidos.

Por exemplo, o HTML a seguir especifica a entrada de um ano de nascimento entre 1900 e 2020. O uso de type="number" restringe os valores de entrada apenas a números, dentro do intervalo especificado por min e max. Se você tentar inserir um número fora do intervalo, a entrada será definida como 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 espaços:

Os navegadores mais recentes também fazem a validação básica de entradas com o tipo email ou url.

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

Valide inline e forneça feedback ao usuário enquanto ele insere dados, em vez de fornecer uma lista de erros quando ele clicar no botão de envio. Se você precisar validar dados no 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 mostrar uma mensagem inline ao lado de cada campo problemático explicando o que precisa ser corrigido. Verifique os registros do servidor e os dados de análise para encontrar erros comuns. Talvez seja necessário reformular o formulário.

Também é recomendável usar o JavaScript para fazer uma validação mais robusta enquanto os usuários inserem dados e no envio do formulário. Use a API Constraint Validation (que é amplamente aceita) para adicionar validação personalizada usando a interface integrada do navegador para definir o foco e mostrar solicitações.

Saiba mais em Validação de formulário do lado do cliente.

Ajudar os usuários a evitar a falta de dados obrigatórios

Use o atributo required em entradas para valores obrigatórios.

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

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

Simplifique o pagamento

Preste atenção à lacuna do comércio móvel

Imagine que seus usuários têm um orçamento de fadiga. Se você usar tudo, os usuários vão embora.

Você precisa reduzir o atrito e manter o foco, principalmente em dispositivos móveis. Muitos sites recebem mais tráfego em dispositivos móveis, mas mais conversões em computadores, um fenômeno conhecido como lacuna de comércio móvel. Os clientes podem simplesmente preferir concluir uma compra no computador, mas as taxas de conversão mais baixas em dispositivos móveis também são resultado de uma experiência do usuário ruim. Seu trabalho é minimizar as conversões perdidas em dispositivos móveis e maximizar as conversões em computadores. Pesquisas mostram que há uma grande oportunidade de oferecer uma experiência melhor com formulários em dispositivos móveis.

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

Defina a compra sem login como padrão

Para uma loja on-line, a maneira mais simples de reduzir o atrito do formulário é definir a compra sem login como padrão. Não force os usuários a criar uma conta antes de fazer uma compra. Não permitir a compra sem login é citado como um dos principais motivos para o abandono do carrinho de compras.

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

Mostrar progresso da finalização da compra

Para que o processo de finalização da compra pareça menos complexo, mostre o progresso e deixe claro o que precisa ser feito em seguida. O vídeo a seguir mostra como o varejista do Reino Unido johnlewis.com consegue isso.

Você precisa manter o ritmo! 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 agora e qual é a próxima etapa da finalização da compra.

Use o atributo enterkeyhint nas entradas de formulário para definir o rótulo da tecla Enter do teclado de dispositivos móveis. 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. Saiba mais na explicação sobre enterkeyhint.

Facilite a navegação dos usuários no processo de finalização da compra para que eles possam ajustar o pedido com facilidade, mesmo 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 de itens na página de pagamento. Sua prioridade na finalização da compra é evitar interromper o progresso em direção à conversão.

Remova distrações

Limite os possíveis pontos de saída removendo elementos visuais desnecessários e distrações, como promoções de produtos. Muitos varejistas de sucesso até removem a navegação e a pesquisa da finalização da compra.

Mantenha o foco na jornada. Não é hora de tentar fazer com que os usuários façam outra coisa.

Para usuários recorrentes, é possível simplificar ainda mais o processo de finalização da compra ocultando dados que eles não precisam ver. Por exemplo: mostre o endereço de entrega em texto simples (não em um formulário) e permita que os usuários o alterem seguindo um link.

Facilitar a inserção de nome e endereço

Peça apenas os dados necessários

Antes de começar a programar os formulários de nome e endereço, entenda quais dados são necessários. Não peça dados de que você 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 o custo e a responsabilidade dos dados de back-end.

Usar uma única entrada de nome

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

A menos que você tenha um bom motivo para não fazer isso, não adicione uma entrada separada para um prefixo ou título (como Sra., Dr. ou Lorde). Os usuários podem digitar isso com o nome deles, se quiserem. Além disso, o preenchimento automático de honorific-prefix não funciona na maioria dos navegadores. Portanto, adicionar um campo para prefixo de nome ou título vai prejudicar a experiência de preenchimento automático do formulário de endereço para a maioria dos usuários.

Ativar o preenchimento automático de nomes

Use name para um nome completo:

<input autocomplete="name" ...>

Se você realmente tiver um bom motivo para dividir as partes do nome, use os valores de preenchimento automático adequados:

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

Permitir nomes internacionais

Talvez você queira validar as entradas de nome ou restringir os caracteres permitidos para dados de nome. No entanto, você precisa ser o menos restritivo possível com os alfabetos. É rude dizer que seu nome é "inválido".

Para validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. "Somente latim" exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Em vez disso, permita a correspondência de letras Unicode e garanta que seu back-end seja compatível com Unicode de forma segura como entrada e saída. O Unicode em expressões regulares é bem aceito pelos navegadores mais recentes.

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

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

Permitir vários formatos de endereço

Ao criar um formulário de endereço, lembre-se da enorme variedade de formatos de endereço, mesmo em um único país. Cuidado para não fazer suposições sobre endereços "normais". (Confira UK Address Oddities! se você não estiver convencido!)

Criar formulários de endereço flexíveis

Não force os usuários a tentar encaixar o endereço em campos de formulário que não são adequados.

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

Tenha cuidado especial com os campos de endereço required. Por exemplo, endereços em grandes cidades do Reino Unido não têm um condado, mas muitos sites ainda forçam os usuários a inserir um.

O uso de duas linhas de endereço flexíveis pode funcionar bem para vários formatos de endereço.

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

Adicione rótulos para corresponder:

<label for="address-line1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line1" id="address-line1" ...>

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" id="address-line2" ...>

Considere usar uma única área de texto para o endereço

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

A abordagem textarea se adapta a qualquer formato de endereço e é ótima para recortar e colar. No entanto, lembre-se de que ela pode não atender aos seus requisitos de dados, e os usuários podem perder o preenchimento automático se antes usavam apenas formulários com address-line1 e address-line2.

Para uma área de texto, use street-address como o valor de preenchimento automático.

Veja um exemplo de formulário que demonstra o uso de um único textarea para endereço:

Internacionalizar e localizar 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 os usuários estão.

A nomenclatura das partes do endereço varia, assim como os formatos de endereço, mesmo no mesmo idioma.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

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

Talvez seja necessário personalizar os formulários de endereço para vários locais no seu site, mas usar técnicas para maximizar a flexibilidade do formulário (conforme descrito acima) pode ser suficiente. Se você não localizar seus formulários de endereço, entenda 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 em um nome de rua ou número de casa.
• Sempre que possível, evite tornar os campos required. Por exemplo, 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 nomes inclusivos: "País/região" em vez de "País"; "CEP/código postal" em vez de "CEP".

Mantenha a flexibilidade. O exemplo de formulário de endereço simples acima pode ser adaptado para funcionar "bem o suficiente" em muitas localidades.

Evite a consulta de endereço por código postal

Alguns sites usam um serviço para procurar endereços com base no código postal ou CEP. Isso pode ser útil para alguns casos de uso, mas é importante estar ciente das possíveis desvantagens.

A sugestão de endereço por 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 em potencial.

É difícil para os usuários selecionar em uma longa lista de endereços, especialmente em dispositivos móveis, se eles estiverem com pressa ou estressados. Pode ser mais fácil e menos propenso a erros permitir que os usuários aproveitem o preenchimento automático e insiram o endereço completo com um único toque ou clique.

Simplifique as formas de pagamento

As formas de pagamento são a parte mais importante do processo de finalização da compra. Um design ruim de formulário de pagamento é uma causa comum de abandono do carrinho de compras. Os detalhes fazem toda a diferença: pequenas falhas podem fazer com que os usuários desistam de uma compra, principalmente em dispositivos móveis. Seu trabalho é criar formulários para facilitar ao máximo a inserção de dados pelos usuários.

Ajudar os usuários a evitar a reinserção de dados de pagamento

Adicione os valores de autocomplete apropriados nos formulários de cartão de pagamento, incluindo o número, o nome no cartão, a data de validade e o código de segurança:

• cc-number
• cc-name
• cc-exp ou cc-exp-month e cc-exp-year para campos separados
• cc-csc

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 os dados do cartão de pagamento de forma insegura no dispositivo.

Evite usar elementos personalizados para datas de cartões de pagamento

Se não forem projetados corretamente, os elementos personalizados podem interromper o fluxo de pagamento ao quebrar o preenchimento automático e não funcionarão 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 forçado a encontrar o cartão físico para procurar uma data de validade porque o preenchimento automático não funcionou para um elemento personalizado, é provável que você perca uma venda. Considere usar elementos HTML padrão e estilizá-los de acordo.

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

Para números de telefone e de cartão de pagamento, use uma única entrada: não divida o número em partes. Isso facilita a inserção de dados pelos usuários, simplifica a validação e permite que os navegadores façam o preenchimento automático. Faça o mesmo com outros dados numéricos, como PINs e códigos de banco.

Valide com cuidado

É preciso validar a entrada de dados em tempo real e antes do envio do formulário. Uma maneira de fazer isso é adicionar um atributo 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 vai mostrar uma mensagem de aviso e focar na entrada. Não é necessário usar JavaScript.

No entanto, sua expressão regular pattern precisa ser flexível o suficiente para lidar com o intervalo de comprimentos de números de cartão de pagamento: de 14 dígitos (ou possivelmente menos) a 20 (ou mais). Saiba mais sobre a estruturação de números de cartões de pagamento no LDAPwiki.

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

Testar em vários dispositivos, plataformas, navegadores e versões

É importante testar os formulários de endereço e pagamento nas plataformas mais comuns para seus usuários, já que a funcionalidade e a aparência dos elementos 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 testes sem custo financeiro para projetos de código aberto em vários dispositivos e navegadores.

Implementar análises e RUM

Testar a usabilidade e o desempenho localmente pode ser útil, mas você precisa de dados reais para entender como os usuários interagem com seus formulários de pagamento e endereço.

Para isso, você precisa de análises e do Real User Monitoring, que são dados sobre a experiência de usuários reais, como o tempo que as páginas de finalização da compra levam para carregar ou o tempo que o pagamento leva para ser concluído:

• Análise de páginas: visualizações de página, taxas de rejeição e saídas de cada página com um formulário.
• Análise de interações: os funis de meta e os eventos indicam onde os usuários abandonam o processo de finalização da compra e quais ações eles realizam ao interagir com seus formulários.
• Performance do site: as métricas centradas no usuário podem informar se as páginas de finalização da compra estão demorando para carregar e, em caso afirmativo, qual é a causa.

A análise de páginas, de interações e a medição de performance de usuários reais se tornam especialmente valiosas quando combinadas 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 as 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
• Verificar números de telefone na Web com a API WebOTP
• Criar formulários incríveis
• Práticas recomendadas para o design de formulários para dispositivos móveis
• Controles de formulário mais eficientes
• Como criar formulários acessíveis
• Simplificar o fluxo de inscrição usando a API Credential Management
• O Guia compulsivo de endereços postais do Frank (em inglês) fornece links úteis e orientações abrangentes sobre formatos de endereço em mais de 200 países.
• O site Countries Lists tem uma ferramenta para baixar códigos e nomes de países em vários idiomas e formatos.

Foto de @rupixen no Unsplash.