Prezados, boa tarde!
Criei um formulário no formato #input que alimenta um banco de dados dentro do WIX, mas estou com dificuldade de configurar alguns detalhes para que as informações dos visitantes fiquem armazenadas da forma correta.
No formulário gostaria de saber como configurar os campos abaixo de seguinte forma:
*Telefone* - Aparecer automaticamente o parenteses para colocar o DDD. Ex: (21) 982516368
*Data de Nascimento* - Aparecer automaticamente as barras para preenchimento da data. Ex: 22/05/1988 *Assunto* - Aparecer opções com assuntos pré definidos
Depois que o visitante envia as informações, como fazer com que apareça na tela, por exemplo, uma mensagem "Dados enviados com sucesso" e o formulário ficar limpo novamente?
Já no banco de dados gostaria de saber como configurar as células abaixo de seguinte forma:
*Telefone* - Os dados estão sendo separados por vírgulas, pois só consigo configurar o tipo de campo como Número. Como fazer para aparecer como o exemplo: (21) 982516368?
*Data de Nascimento* - Mesmo configurando o tipo de campo como Data e Horário, as informações não estão entrando nesse formato. Como fazer para aparecer como o exemplo: 22/05/1988?
Entrei em contato por telefone e me indicaram que falasse por aqui, para que fosse gerado um código para esse tipo de configuração.
Obrigada.
Olá @Matheus Alexandre, Obrigada pela ajuda. Estou quase conseguindo chegar no meu objetivo. Consegui fazer as alterações nos campos e os códigos estão funcionando no Visualizar, mas quando publico o site, não consigo clicar nem escrever no formulário publicado. O que pode estar ocorrendo? Obrigada,
Olá, @Isabella Ferrara.
Você precisa de máscara em alguns dos seus campo. Existem algumas maneiras de fazer isso, vou deixar um exemplo pra você com várias máscaras já prontas.
Você vai precisar usar a função onKeyPress do seu input junto com um debounce. Veja o código:
let debounce = undefined; export function input1_keyPress(event) { if(debounce) { clearTimeout(debounce); debounce = undefined; } debounce = setTimeout(() => { mascara("telefone", $w("#input1")); }, 200) } export function mascara(tipo, campoInput) { switch (tipo) { case "telefone": { campoInput.value = campoInput.value.replace(/\D/g, ""); //Remove tudo o que não é dígito campoInput.value = campoInput.value.replace(/^(\d{2})(\d)/g, "($1) $2"); //Coloca parênteses em volta dos dois primeiros dígitos campoInput.value = campoInput.value.replace(/(\d)(\d{4})$/, "$1-$2"); //Coloca hífen entre o quarto e o quinto dígitos break; } case "cpf": { campoInput.value = campoInput.value.replace(/\D/g, ""); //Remove tudo o que não é dígito campoInput.value = campoInput.value.replace(/^(\d{3})(\d)/g, "$1.$2"); campoInput.value = campoInput.value.replace(/(\d)(\d{5})$/, "$1.$2"); campoInput.value = campoInput.value.replace(/(\d)(\d{2})$/, "$1-$2"); break; } case "cnpj": { campoInput.value = campoInput.value.replace(/\D/g, "") campoInput.value = campoInput.value.replace(/^(\d{2})(\d)/, "$1.$2") campoInput.value = campoInput.value.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3") campoInput.value = campoInput.value.replace(/\.(\d{3})(\d)/, ".$1/$2") campoInput.value = campoInput.value.replace(/(\d{4})(\d)/, "$1-$2") break; } case "cep": { campoInput.value = campoInput.value.replace(/\D/g, "") campoInput.value = campoInput.value.replace(/^(\d{5})(\d)/, "$1-$2") break; } case "moeda": { campoInput.value = campoInput.value.replace(/\D/g, "") campoInput.value = campoInput.value.replace(/^([0-9]{3}\.?){3}-[0-9]{2}$/, "$1.$2"); campoInput.value = campoInput.value.replace(/(\d)(\d{2})$/, "$1,$2") // campoInput.value = campoInput.value.replace(/(\d)(\d{2})$/,"$1.$2") //Descomentar para usar pontos break; } case "data": { campoInput.value = campoInput.value.replace(/\D/g, "") campoInput.value = campoInput.value.replace(/(\d{2})(\d)/, "$1/$2") campoInput.value = campoInput.value.replace(/(\d{2})(\d)/, "$1/$2") break; } case "placa": { //campoInput.value = campoInput.value.replace(/\D/g, "") campoInput.value = campoInput.value.replace(/^(\d{3})(\d)/, "$1-$2") break; } } }
Espero ter ajudado!