Este é um placeholder de código customizado. Mude para a Pré-visualização ou publique a página para ver como seu código funciona. Dê clique duplo para editar

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> /* Estilo do botão e da div do formulário */ .botao-flutuante { position: fixed; bottom: 20px; right: 20px; background-color: #4caf50; padding: 0px; border: none; border-radius: 100%; cursor: pointer; transition: background-color 0.5s; } .botao-flutuante:hover { background-color: #32cd32; } .formulario { position: relative; } /* Estilo dos campos do formulário */ input[type='text'], input[type='tel'], input[type='submit'] { display: block; margin-bottom: -30px; margin-top: 18%; width: 90%; padding: 10px; border: 1px solid #ddd; font-size: 16px; background-color: transparent; color: #333; } input[type='submit'] { width: 100%; background-color: #25d366; color: #fff; border-radius: 5px; cursor: pointer; } input[type='submit']:hover { background-color: #128c7e; } /* Estilo dos campos do formulário */ #form-container { position: fixed; top: 45%; right: -350px; width: 250px; height: 33%; background: linear-gradient(to bottom, #128c7e 30%, #f2f2f2 30%); border-radius: 5%; transition: right 0.8s ease-in-out; z-index: 9999; padding: 30px; } #form-container label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: bold; } #form-container p { margin-top: 10%; font-size: 14px; height: 10%; text-align: center; } /* Estilo para dispositivos móveis */ @media screen and (max-width: 768px) { .botao-flutuante { bottom: 10px; right: 10px; } #form-container { top: 40%; right: -200%; width: 70%; height: 35%; } } </style> <!-- Script para animação do formulário --> <script> var botaoFlutuante = document.getElementById('botao-flutuante') var formContainer = document.getElementById('form-container') botaoFlutuante.addEventListener('click', function () { formContainer.style.right = '0' }) { document.getElementById("enviar").addEventListener("click", function() { // Obtenha os valores dos campos de nome e telefone do formulário var nome = document.getElementById("nome").value; var telefone = document.getElementById("telefone").value; // Verifique se ambos os campos foram preenchidos antes de abrir a janela do WhatsApp if (nome && telefone) { // Abra a janela do WhatsApp window.open("https://api.whatsapp.com/send/?phone=5551998552075&text&=Ol%C3%A1!%20Encontrei%20a%20Ital%C3%ADnea%20Class%20M%C3%B3veis%20no%20Google%20e%20gostaria%20de%20saber%20mais%20informa%C3%A7%C3%B5es%20sobre%20m%C3%B3veis%20planejados."); } else { // Exiba uma mensagem de erro para o usuário informando que os campos são obrigatórios alert("Por favor, preencha todos os campos antes de iniciar a conversa no WhatsApp."); } }); } // Botão de fechar o formulário var fechar = document.getElementById('fechar'); fechar.addEventListener('click', function() { formContainer.style.right = '-350px'; }); // seleciona o elemento do formulário const form = document.querySelector('#myForm'); // adiciona um ouvinte de eventos para o envio do formulário form.addEventListener('submit', function(e) { // obtém a data e hora atual const now = new Date(); const date = now.toLocaleDateString(); // ex: '27/04/2023' const time = now.toLocaleTimeString(); // ex: '10:31:22' // adiciona a data e hora aos dados do formulário const formData = new FormData(form); formData.append('data', date); formData.append('hora', time); // envia os dados do formulário para a API do Google Sheets const url = form.action; fetch(url, { method: 'POST', body: formData }).then(response => { // faz algo após o envio dos dados do formulário, se necessário }).catch(error => { console.error(error); }); // impede o envio normal do formulário e.preventDefault(); }); </script>