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 com a maior rapidez e facilidade 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.

Confira 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 automaticamente formulários, atribua valores estáveis aos atributos name e id de entrada 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 o finalização da compra como visitante como padrão e simplifique a criação de conta após a conclusão da compra.
• Mostre o progresso no processo de finalização da compra em etapas claras com calls-to-action claras.
• Limite possíveis pontos de saída da finalização de compra removendo a desordem e as distrações.
• Mostrar todos os detalhes do pedido na finalização da compra e fazer ajustes com facilidade.
• Não peça dados desnecessários.
• Peça nomes com uma única entrada, a menos que você tenha um bom motivo para não fazer isso.
• Não force o uso de caracteres apenas do alfabeto latino para nomes e nomes de usuário.
• Permita uma variedade de 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 de cartão de pagamento adequados.
• 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ágina, análise de interação e medição de desempenho do usuário real.
• Teste em vários navegadores, dispositivos e plataformas.

Usar 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 adicionam significado à sua marcação.

Usar elementos HTML conforme o esperado

Coloque o formulário em um <form>

Talvez você não queira envolver seus elementos <input> em um <form> e prefira processar o envio de dados apenas com JavaScript.

Não faça isso.

Um <form> HTML dá acesso a um conjunto avançado de recursos integrados em todos os navegadores modernos e pode ajudar a tornar seu site acessível a 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 seu código, além de atender ao 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 pesquisa e inscrição na mesma página, coloque cada uma no próprio <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 dele 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 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 de formulário um valor que diga o que ele faz. Para cada etapa do processo de 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 Continuar para pagamento em vez de Continuar ou Salvar.

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

Por outro lado, não desative um botão de envio que aguarda a 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 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, onde 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 entrada de dados para os usuários

Use o atributo type de entrada 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. Elas prejudicam a experiência de preenchimento automático se não forem implementadas corretamente e não funcionam em navegadores mais antigos. Para números como ano de nascimento, considere usar 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 no dispositivo móvel e adicione validação e dicas de formato com texto ou um marcador de posição para garantir que o usuário insira os dados no formato adequado.

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

Usar 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 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. O MDN Web Docs 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 é igual ao de entrega. Reduza a poluição visual fornecendo um link para editar o endereço de faturamento (ou use elementos summary e details) em vez de mostrar o endereço de faturamento em um formulário.