Um componente avançado e altamente customizável de campo de telefone para Framer, projetado para aumentar a taxa de conversão dos seus formulários. Ele combina um design premium com formatação automática e validação inteligente, oferecendo a melhor experiência para o usuário final.

Principais Funcionalidades

• Seletor de País Inteligente: Dropdown integrado com bandeiras, nomes e códigos de área (DDI) de dezenas de países. O componente já vem pré-configurado com regras específicas para cada região.

• Máscara de Formatação Automática: O número é formatado em tempo real enquanto o usuário digita, de acordo com o padrão do país selecionado (ex: no Brasil, aplica a formatação (11) 99999-9999).

• Validação Integrada: Utiliza a API nativa do navegador para bloquear o envio de formulários caso o número digitado não atenda ao tamanho ou formato correto do país escolhido.

• Pronto para Formulários (Form-Ready): Enquanto o usuário vê o número lindamente formatado na tela, o componente gera um input oculto (Hidden Input) contendo o dado limpo e unificado (ex: +5511999999999). Isso garante compatibilidade total com integrações de formulários e webhooks (como n8n, Zapier ou Supabase).

• Acessibilidade e UX: Inclui fechamento automático do menu ao clicar fora, navegação fluida, scroll inteligente no dropdown para focar no país selecionado e transições suaves de estado (Hover e Focus).

Totalmente Personalizável

O componente foi criado para se adaptar perfeitamente ao Design System do seu projeto diretamente pelo painel de propriedades do Framer:

• Tipografia: Controle total sobre a fonte, peso e tamanho do input e do menu de países de forma independente.

• Estilização do Input: Modifique cores de texto, placeholder, background, padding, raio da borda (border-radius) e sombras.

• Estados Interativos (Hover & Focus): Defina cores de fundo, bordas e sombras exclusivas para quando o usuário passar o mouse ou clicar no campo, garantindo feedback visual imediato.

• Design do Dropdown: Personalize a cor de fundo do menu, a cor de destaque ao passar o mouse sobre um país, a cor da linha divisória e até o visual da barra de rolagem (scrollbar).

• Atributos de Formulário: Defina facilmente o Name (para o banco de dados), ID, Placeholder customizado, País Padrão (ex: Brasil) e alterne a obrigatoriedade (Required) com um clique.

Casos de Uso Ideais

• Landing Pages de alta conversão (Captura de Leads).

• Formulários de checkout e agendamento.

• Aplicações SaaS e painéis administrativos que exigem dados precisos de contato.

• Qualquer projeto Framer que utilize integrações de banco de dados e precise padronizar a entrada de números de telefone/WhatsApp.