Scribd
Carregar
29 visualizações6 páginas

Code Form Wix

Enviado por

comprasalixrr
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd
29 visualizações6 páginas

Code Form Wix

Enviado por

comprasalixrr
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 6

<!

DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@700&display=swap" rel="stylesheet" />
<style>
html,
body {
width: 100%;
overflow-x: hidden;
margin: 0;
padding: 0;
font-family: 'Poppins', bold; /* Alterando a fonte para uma versão mais
gordinha da Poppins */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f000;
}

.box {
width: 80%; /* Ajuste a largura para 80% */
padding: 20px;
border-radius: 15px;
background-color: #ffffff00; /* Cor branca */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.815);
}

/* Adicione estilos responsivos */


@media (max-width: 600px) {
.box {
width: 100%;
padding: 10px;
}
}

fieldset {
border: none;
padding: 0;
}

legend {
display: none;
}

.inputBox {
position: relative;
margin-bottom: 20px;
border-radius: 10px;
}

.inputUser {
background: none;
border: none;
border-bottom: 2px solid rgb(192, 0, 96);
outline: none;
color: #ffffff; /* Cor preta */
font-size: 15px;
width: 100%;
margin-bottom: 5px;
padding: 5px;
}

.labelInput {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
transition: 0.5s;
color: rgb(255, 255, 255); /* Cor de rótulo */
}

.inputUser:focus~.labelInput,
.inputUser:valid~.labelInput {
top: -20px;
font-size: 15px;
color: rgb(255, 255, 255);
}

select {
background: none;
border: 2px solid rgb(192, 0, 96);
border-radius: 10px;
color: #ffffff; /* Cor preta */
padding: 10px;
margin-bottom: 10px;
outline: none;
cursor: pointer;
width: 100%;
}

select option {
background-color: #000000; /* Cor branca para as opções */
color: #ffffff; /* Cor preta para as opções */
}

#dnascimento {
background: none;
border: 2px solid rgb(192, 0, 96);
border-radius: 10px;
padding: 5px;
color: #ffffff; /* Cor preta */
font-size: 15px;
margin-top: 5px;
}

#dnascimento:focus {
border-color: rgb(255, 252, 254);
box-shadow: 0 0 10px rgb(255, 255, 255), inset 0 0 10px rgb(192, 0,
96);
}

input[type="radio"] {
appearance: none;
width: 15px;
height: 15px;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}

input[type="radio"]:checked {
background-color: rgb(255, 255, 255);
}

label {
margin-right: 10px;
color: rgb(255, 255, 255);
}

#enviar {
background-color: rgb(3, 48, 122);
color: #f5f5f5;
padding: 10px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
width: 100%;
text-align: center;
transition: all 0.3s ease;
font-weight: bold; /* Adicionando negrito */
font-family: 'Poppins', bold; /* Alterando a fonte para uma versão mais
gordinha da Poppins */
background-image: linear-gradient(45deg, #ff007f, #0000ff);
background-size: 400%;
color: white;
animation: animate 4s linear infinite;
}

#enviar:hover {
animation: none;
background-position: right;
box-shadow: 0 0 20px rgba(255, 0, 127, 0.8); /* Efeito de brilho rosa
ao passar o mouse */
}

@keyframes animate {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
</style>
</head>

<body>
<div class="box">
<form id="FormularioDB">
<fieldset>
<div class="inputBox">
<input type="text" name="nome" id="nome" class="inputUser"
maxlength="20" required>
<label for="nome" class="labelInput">Nome completo</label>
<span style="color: red; font-size: 12px;">* Preenchimento
obrigatório</span>
</div>

<div class="inputBox">
<label for="dnascimento">Data de Nascimento:</label>
<input type="date" id="dnascimento" name="dnascimento"
max="2005-12-31" min="1933-01-01" required>
<span style="color: red; font-size: 12px;">* Preenchimento
obrigatório</span>
</div>

<div class="inputBox">
<p style="color: rgb(255, 255, 255);">Possui habilitação (CNH)?
</p>
<input type="radio" id="Sim" name="escolha" value="Sim"
required>
<label for="Sim">Sim</label>
<input type="radio" id="Não" name="escolha" value="Não"
required>
<label for="Não">Não</label>
<span style="color: red; font-size: 12px;">* Preenchimento
obrigatório</span>
</div>

<div class="inputBox">
<input type="text" name="phone" id="phone" class="inputUser"
maxlength="15" oninput="applyPhoneMask(event)" required>
<label for="phone" class="labelInput">Número de
telefone</label>
<span style="color: red; font-size: 12px;">* Preenchimento
obrigatório</span>
</div>

<div class="inputBox">
<label for="dropdown1">Selecione sua cidade/estado:</label>
<select id="dropdown1" onchange="atualizarDropdown2()"
required>
<option value="São Paulo-SP">São Paulo-SP</option>
</select>
<span style="color: red; font-size: 12px;">* Preenchimento
obrigatório</span>
</div>

<div class="inputBox">
<label for="dropdown2">Selecione unidade próxima:</label>
<select id="dropdown2" required>
<option value="Santo Amaro">Santo Amaro</option>
<option value="Cidade Dutra">Cidade Dutra</option>
<option value="SBC">SBC</option>
</select>
<span style="color: red; font-size: 12px;">* Preenchimento
obrigatório</span>
</div>
<button type="button" id="enviar"
onclick="redirecionarParaWhatsApp()">Próximo</button>
<div class="inputBox">
<p style="color: rgb(255, 255, 255);">Logo após preencher o
formulário, você será direcionado para o WhatsApp. Suas informações já estarão pré-
definidas.</p>
</div>
</fieldset>
</form>
</div>

<script>
function applyPhoneMask(event) {
const input = event.target;
let value = input.value.replace(/\D/g, '');

if (value.length > 2 && value.length <= 6) {


value = value.replace(/(\d{2})(\d+)/, '($1) $2');
} else if (value.length > 6) {
value = value.replace(/(\d{2})(\d{4})(\d+)/, '($1) $2-$3');
}

input.value = value;
}

function atualizarDropdown2() {
const dropdown1 = document.getElementById('dropdown1');
const dropdown2 = document.getElementById('dropdown2');

// Aqui está a lógica de atualização do dropdown2 com base na seleção


de dropdown1.
const selectedOption = dropdown1.value;

// A lógica de atualização pode variar de acordo com suas necessidades.


// Por exemplo, você pode criar uma lista de opções disponíveis para
cada cidade/estado selecionado.

let options = [];


switch (selectedOption) {
case 'São Paulo-SP':
options = ['Santo Amaro', 'Cidade Dutra', 'SBC'];
break;
// Adicione mais opções de cidades/estados e suas unidades
correspondentes aqui.
// Por exemplo:
// case 'Outra Cidade':
// options = ['Unidade 1', 'Unidade 2', 'Unidade 3'];
// break;
default:
options = [];
}

// Limpa as opções atuais do dropdown2.


dropdown2.innerHTML = '';

// Adiciona as novas opções ao dropdown2.


options.forEach(option => {
const newOption = document.createElement('option');
newOption.value = option;
newOption.text = option;
dropdown2.appendChild(newOption);
});
}

function redirecionarParaWhatsApp() {
const nome = document.getElementById('nome').value;
const dataNascimento = document.getElementById('dnascimento').value;
const habilitacao =
document.querySelector('input[name="escolha"]:checked').value;
const telefone = document.getElementById('phone').value;
const cidadeEstado = document.getElementById('dropdown1').value;
const unidade = document.getElementById('dropdown2').value;

// Monta a mensagem para o WhatsApp.


const mensagem = `Olá, sou ${nome}. Gostaria de agendar uma avaliação.\
nData de nascimento: ${dataNascimento}\nPossui habilitação (CNH): ${habilitacao}\
nTelefone: ${telefone}\nCidade/Estado: ${cidadeEstado}\nUnidade próxima: $
{unidade}`;

// Redireciona para o WhatsApp com a mensagem preenchida.


const linkWhatsApp = `https://api.whatsapp.com/send?
phone=5511994501140&text=${encodeURIComponent(mensagem)}`;
window.open(linkWhatsApp, '_blank');
}
</script>
</body>

</html>

Você também pode gostar