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.

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.

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

Veja 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 do formulário com um <label>.
• Use atributos de elementos HTML para acessar recursos integrados do navegador, em particular type e autocomplete com valores adequados.
• Evite usar type="number" para números que não podem 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, forneça valores estáveis para os atributos de entrada name e id 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 finalização de compra para visitantes como padrão e simplifique a criação de conta após a finalização da compra.
• Mostre o progresso do processo de finalização da compra em etapas claras com calls-to-action claras.
• Limite os possíveis pontos de saída da finalização de compra removendo a desordem e as distrações.
• Mostre todos os detalhes do pedido na finalização da compra e facilite os ajustes.
• Não peça dados 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 somente em latim para nomes e nomes de usuário.
• Permitir vários formatos de endereço.
• Use 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ços por código postal.
• Use valores de preenchimento automático de cartão de pagamento adequados.
• Use uma entrada única para números de cartão de pagamento.
• Evite usar elementos personalizados se eles interromperem a experiência de preenchimento automático.
• Teste em campo e no laboratório: análise de páginas, análise de interação e medição de desempenho de usuários reais.
• Teste em vários navegadores, dispositivos e plataformas.

Use HTML significativo

Use os elementos e atributos criados para o job:

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

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

Usar elementos HTML corretamente

Coloque seu formulário em um <form>

Você pode não se preocupar em envolver os elementos <input> em um <form> e em processar o envio de dados exclusivamente com JavaScript.

Não faça isso.

Um <form> HTML oferece acesso a um conjunto eficiente de recursos integrados em todos os navegadores modernos e pode ajudar a tornar seu site acessível a leitores de tela e outros dispositivos de assistência. Um <form> também facilita a criação de funcionalidades básicas para navegadores mais antigos com suporte limitado ao JavaScript e para ativar o envio de formulários mesmo que haja um problema no código e para o pequeno número de usuários que realmente desativam o JavaScript.

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

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 do 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 do rótulo recebe o foco.

Tornar 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 que funcione como um botão. Os elementos de botão oferecem comportamento acessível, funcionalidade de envio de formulário integrada e podem ser estilizados com facilidade.

Dê a cada botão de envio do formulário um valor que indique o que ele faz. Para cada etapa da finalização da compra, use uma call-to-action descritiva que mostre o progresso e deixe a próxima etapa óbvia. Por exemplo, rotule o botão de envio no formulário de endereço de entrega como Pagar em vez de Continuar ou Salvar.

Considere desativar um botão de envio depois que o usuário tocar ou clicar nele, principalmente quando o usuário estiver fazendo um pagamento ou fazendo um pedido. Muitos usuários clicam em botões repetidamente, mesmo que estejam funcionando sem problemas. Isso pode atrapalhar a finalização da compra 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 o botão Salvar endereço desativado porque algo está faltando ou é inválido. Isso não ajuda o usuário. 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 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 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 entrada de dados para os usuários

Use o atributo type de entrada apropriado para fornecer o teclado certo em dispositivos móveis e ativar a validação integrada 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, evite usar elementos select personalizados. Se não forem implementados corretamente, eles vão interromper a experiência de preenchimento automático 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 digitar os dígitos manualmente pode ser mais fácil e menos propenso a erros do que selecionar em uma lista suspensa longa, principalmente em dispositivos móveis. Use inputmode="numeric" para garantir o teclado certo em dispositivos móveis e adicionar dicas de formatação e validação com texto ou um marcador de posição para garantir que o usuário insira dados no formato adequado.

Use o preenchimento automático para melhorar a acessibilidade e evitar que os usuários redigitem 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 é particularmente importante em dispositivos móveis e é essencial para evitar altas taxas de desistência 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ê deverá usá-lo. As MDN Web Docs têm uma lista completa de valores e explicações sobre como usá-los corretamente.

Valores estáveis

Endereço de faturamento

Por padrão, defina o endereço de faturamento como o mesmo do endereço de entrega. Reduza a desordem visual fornecendo um link para editar o endereço de faturamento (ou use os elementos summary e details) em vez de mostrar o endereço de faturamento em um formulário.

Use valores de preenchimento automático adequados para o endereço de faturamento, assim como para o endereço de entrega, para que o usuário não precise inserir dados mais de uma vez. Adicione uma palavra de prefixo para 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 certos

Evite "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 problemas à medida que acontecem. Durante o processo de finalização da compra, os clientes tentam dar dinheiro à sua empresa em troca de um produto ou serviço. Seu trabalho é ajudar, não punir.

É possível adicionar atributos de restrição a elementos de 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 para 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á 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 espaços:

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

No envio de formulários, os navegadores definem automaticamente o foco em campos com valores obrigatórios ausentes ou com problemas. Não é necessário usar JavaScript.

Faça a validação inline e forneça feedback ao usuário conforme ele insere dados, em vez de fornecer uma lista de erros quando ele clica no botão de envio. Se você precisar validar dados no 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 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 em busca de erros comuns. Talvez seja necessário reformular seu formulário.

Você também precisa usar JavaScript para fazer uma validação mais robusta durante a inserção de dados e no envio do formulário. Use a API Constraint Validation, que tem ampla compatibilidade, para adicionar validação personalizada usando a interface do navegador integrada para definir o foco e mostrar avisos.

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

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 modernos propõem e definem o foco automaticamente em campos required com dados ausentes. Você pode usar a pseudoclasse :required para destacar campos obrigatórios. Não é necessário JavaScript.

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

Simplifique o pagamento

Não se esqueça da lacuna do comércio móvel.

Imagine que seus usuários tenham um orçamento de fadiga. Se você usar tudo, seus usuários vão sair.

É preciso reduzir a fricção e manter o foco, especialmente 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 do 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 de usuário ruim. Seu trabalho é minimizar as conversões perdidas em dispositivos móveis e maximizar as conversões em computadores. Pesquisas mostraram que há uma grande oportunidade de oferecer uma experiência melhor com os formulários em dispositivos móveis.

Os usuários têm mais probabilidade de abandonar formulários que parecem longos, complexos e sem um sentido 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 a compra sem login o padrão

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

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

Mostrar progresso da finalização da compra

Você pode tornar o processo de finalização de compra menos complexo mostrando o progresso e deixando claro o que precisa ser feito em seguida. O vídeo abaixo mostra como o varejista johnlewis.com do Reino Unido 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 em entradas de formulário para definir o rótulo da tecla Enter do teclado para 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 tem suporte para Android e iOS. Saiba mais na explicação sobre a enterkeyhint.

Facilite a navegação de ida e volta no processo de finalização da compra para que os usuários 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 a desordem visual e as distrações, como promoções de produtos. Muitos varejistas bem-sucedidos até removem a navegação e a pesquisa da finalização da compra.

Mantenha o foco da jornada. Esta não é a hora de tentar os usuários a fazer outra coisa.

Para usuários recorrentes, você pode simplificar ainda mais o fluxo de finalização de compra, ocultando dados que eles não precisam ver. Por exemplo: exibir o endereço de entrega em texto simples (não em um formulário) e permitir que os usuários o alterem por meio de um link.

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

Só peça os dados necessários

Antes de começar a codificar os formulários de nome e endereço, entenda quais dados são necessários. Não peça dados 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 entrada de nome único

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, nomes honorários ou outras partes do nome. O uso de uma entrada de nome único torna os formulários menos complexos, permite o recurso de recortar 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.", "Dra." ou "Senhor"). Os usuários podem digitar o nome deles se quiserem. Além disso, o preenchimento automático do honorific-prefix não funciona na maioria dos navegadores. Portanto, adicionar um campo para o prefixo ou título do nome vai interromper 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 mais flexível possível com os alfabetos. É rude dizer que seu nome é "inválido".

Para a validação, evite usar expressões regulares que correspondam apenas a caracteres latinos. "Somente em latim" exclui usuários com nomes ou endereços que incluem caracteres que não estão no alfabeto latino. Permita a correspondência de letras Unicode e verifique se o back-end oferece suporte a Unicode com segurança como entrada e saída. O Unicode em expressões regulares tem boa compatibilidade com os navegadores modernos.

<!-- 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 projetar um formulário de endereço, lembre-se da variedade de formatos de endereço, mesmo em um único país. Não faça suposições sobre endereços "normais". Confira as esquisitices dos endereços do Reino Unido se você ainda não se convenceu.

Tornar os formulários de endereço flexíveis

Não force os usuários a tentarem colocar o endereço em campos de formulário que não cabem.

Por exemplo, não insista em um número da casa e um 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-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

Adicione rótulos para corresponder:

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

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

Para testar esse recurso, remixe e edite a demonstração abaixo.

Considere usar um único campo de texto para o endereço

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

A abordagem textarea se encaixa em qualquer formato de endereço e é ótima para cortar e colar. No entanto, ela pode não atender aos seus requisitos de dados, e os usuários podem perder o preenchimento automático se tiverem usado apenas formulários com address-line1 e address-line2.

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

Confira 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 da localização dos usuários.

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 encaixa no seu endereço ou que não usa as palavras que você espera.

Personalizar formulários de endereço para várias localidades pode ser necessário para seu site, mas usar 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, entenda as principais prioridades para lidar com vários formatos de endereço: * Evite ser muito específico sobre partes do endereço, como insistir em um nome de rua ou número da casa. * Sempre que possível, evite criar 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 rodovia. * Use a nomenclatura inclusiva: "País/região" e não "País", "CEP/código postal" e não "CEP".

Seja flexível. O exemplo simples de formulário de endereço acima pode ser adaptado para funcionar 'bem' para muitas localidades.

Evite a pesquisa de endereços por código postal

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

A sugestão de endereço de CEP 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 possíveis.

É difícil para os usuários selecionarem uma opção em uma lista longa de endereços, principalmente em dispositivos móveis, se estiverem apressados 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.

Simplificar as formas de pagamento

As formas de pagamento são a parte mais importante do processo de finalização da compra. O design inadequado do formulário de pagamento é uma causa comum de abandono do carrinho de compras. O diabo está nos detalhes: pequenos problemas podem fazer com que os usuários abandonem uma compra, principalmente em dispositivos móveis. Seu trabalho é projetar formulários para facilitar ao máximo a entrada de dados dos usuários.

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

Adicione os valores autocomplete adequados 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 o ano de vencimento:

• 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 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 corromper 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 o 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, você provavelmente perderá uma venda. Considere usar elementos HTML padrão e estilizá-los adequadamente.

Usar 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 facilita a entrada de dados, simplifica a validação e permite que os navegadores façam preenchimento automático. Considere fazer o mesmo para outros dados numéricos, como PINs e códigos bancários.

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 exibirá uma mensagem de aviso e definirá o foco na entrada. Não é preciso usar JavaScript.

No entanto, a expressão regular pattern precisa ser flexível o suficiente para processar o intervalo de tamanhos de número do cartão de pagamento: de 14 dígitos (ou possivelmente menos) a 20 (ou mais). Saiba mais sobre a estrutura do número do cartão de pagamento no LDAPwiki (em inglês).

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 precisa dizer a ele que ele fez algo errado), menos propenso a 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

É especialmente importante testar o endereço e as formas de pagamento nas plataformas mais comuns para os usuários, já 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 causar problemas de posicionamento. A BrowserStack permite testes gratuitos 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 monitoramento de usuários reais, dados sobre a experiência de usuários reais, como o tempo que as páginas de finalização de 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 para cada página com um formulário.
• Análise de interação: os funis de meta e os eventos indicam onde os usuários abandonam seu fluxo 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 de compra estão demorando para carregar e, em caso afirmativo, qual é a causa.

A análise de página e de interação e a medição de performance real do usuário se tornam especialmente valiosas quando combinadas com registros de 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
• Mais controles de formulário
• Como criar formulários acessíveis
• Simplificar o fluxo de inscrição usando a API Credential Management
• O Frank's Compulsive Guide to Postal Addresses (em inglês) oferece links úteis e orientações detalhadas sobre formatos de endereços em mais de 200 países.
• A Lista de países tem uma ferramenta para fazer o download de códigos e nomes de países em vários idiomas e formatos.

Foto de @rupixen no Unsplash.