Formulário dinâmico do Interago inserido por JS - Atualizado
Ao colocar no HTML o script ele montará o formulário padrão com o evento de disparo
Novidades: form.js (form_current4.js)
Agora o formulário criado dinamicamente contém campos com um código exclusivo, o que permite a criação de vários formulários na mesma página. Exemplificando, um o campo formNome agora é criado formNome_5323, onde 5323 é um número aleatório. No atributo idata os valores são os campos com o número aleatório.
Novidades: Versão Visits 2.2
*Opção para escolher um e-mail de destino ao invés do e-mail cadastrado na extensão de visitas.
-Para escolher um e-mail de destino basta adicionar o atributo "sendMail" dentro do script form.js, segue exemplo:
<script sendMail="example@email.com" src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js"></script>
Apresentação
O formulário via JS visa burlar os spans, visto que não é um formulário convencional e tornar mais prático sua inserção com garantia de funcionamento em várias páginas com mais agilidade.
Pré-requisitos
👉🏻 Script de Acompanhamento de Visitas (Extensão #1)
👉🏻 O script de visitas precisa estar após o script do formulário
👉🏻 O script do formulário precisa ficar no DOM, exatamente onde ele será montado.
✉️ O formulário pegará o id de cada input com idata e o nome do campo exibido no e-mail está em name. Pode usar espaços, por exemplo<input class="formInput inputName" type="text" name="Responsável Comercial da Empresa" id="formName" placeholder="Nome"/>
No idata precisa ter formName e o cliente receberá esse campo com o nome Responsável Comercial da Empresa
Customização
👉🏻 Via CSS
👉🏻 A mensagem de obrigado possui: id=formSuccessfullSend
para customização e o bloqueio de click tem a classe no botãoclass=needCheck
Validação ✋✋✋
O formulário padrão valida somente campos em branco, os quais são: Nome, DDD e Celular. Para outros campos ou validações, precisa copiar o código e aplicar a customização .
Como usar
Adicione o código exatamente no HTML onde quer que ele seja exibido:<script src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js"></script>
Para aceitar anexos, utilize
<script src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js" files maxSize="1" filesRequire="1"></script>
💡 Somente o atributo files é obrigatório; os opcionais:
maxSize = quantos arquivos podem ser enviados;
filesRequire = quantos arquivos são obrigatórios para passar na checagem
💡O arquivo é processado no frontend, nos testes, foi enviado com sucesso onde o total é igual a 20MB
Como ele é exibido:
Como o Interago coleta os dados:
👉🏻 Os inputs precisam de um id
👉🏻 Ao invés de um botão de submit, é utilizado um link com tag a
👉🏻 O link não precisa de href, mas precisa do atributo idata
👉🏻 No atributo idata precisam ter todos os ids dos campos separados por vírgula
👉🏻 A soma dos dados do formulário, para ser classificado como lead precisa ter mais do que 150 caracteres
Veja uma demonstração neste link
Veja uma demonstração com arquivos neste link
✉️ Adicione seu e-mail em Extensões > Relatórios > Recebimento de Leads para ver como os e-mails do Interago chegam.
Quer utilizar o formulário manualmente? Veja o código abaixo
HTML simples<div class="row" id="formContainer"><div class="col-12"><label for="formName">Nome:</label><input class="formInput inputName" type="text" name="Nome" id="formName" placeholder="Nome" style="border: 1px solid rgb(229, 135, 135);"></div><div class="col-12"><input class="formInput formOrigin" type="hidden" name="origem" id="formOrigin" value="Formulário automático para captação de leads"></div><div class="col-12"><label for="formMail">E-mail:</label><input class="formInput inputMail" type="email" name="E-mail" id="formMail" placeholder="E-mail"></div><div class="col-12"><label for="formPhone">Telefone:</label></div><div class="col-3"><input class="formInput inputDDD" type="number" name="DDD" id="formDDD" placeholder="DDD" style="border: 1px solid rgb(229, 135, 135);"></div><div class="col-9"><input class="formInput inputPhone" type="number" name="Celular" id="formPhone" placeholder="Celular" style="border: 1px solid rgb(229, 135, 135);"></div><div class="col-12"><label for="formMessage">Mensagem:</label><textarea class="formTextArea textAreaMessage" name="Mensagem" id="formMessage"></textarea></div><div class="col-12"><a class="formLink submitLink needCheck" idata="formOrigin, formName, formMail, formDDD, formPhone, formMessage" id="formSendButton">Enviar</a></div></div>
HTML com exemplo de campos com variáveis, para ser usado mais de um formulário por página (o valor CODIGO precisa ser exclusivo para cada formulário) - lembre-se que os ids sempre precisam ser exclusivos, inclusive, do botão de enviar para validação. Não altere o atributo name.
<div class="row" id="formContainer"><div class="col-12"><label for="formName">Nome:</label><input class="formInput inputName" type="text" name="Nome" id="formName_CODIGO" placeholder="Nome" style="border: 1px solid rgb(229, 135, 135);"></div><div class="col-12"><input class="formInput formOrigin" type="hidden" name="origem" id="formOrigin_CODIGO" value="Formulário automático para captação de leads"></div><div class="col-12"><label for="formMail">E-mail:</label><input class="formInput inputMail" type="email" name="E-mail" id="formMail_CODIGO" placeholder="E-mail"></div><div class="col-12"><label for="formPhone">Telefone:</label></div><div class="col-3"><input class="formInput inputDDD" type="number" name="DDD" id="formDDD_CODIGO" placeholder="DDD" style="border: 1px solid rgb(229, 135, 135);"></div><div class="col-9"><input class="formInput inputPhone" type="number" name="Celular" id="formPhone_CODIGO" placeholder="Celular" style="border: 1px solid rgb(229, 135, 135);"></div><div class="col-12"><label for="formMessage">Mensagem:</label><textarea class="formTextArea textAreaMessage" name="Mensagem" id="formMessage_CODIGO"></textarea></div><div class="col-12"><a class="formLink submitLink needCheck" idata="formOrigin_CODIGO, formName_CODIGO, formMail_CODIGO, formDDD_CODIGO, formPhone_CODIGO, formMessage_CODIGO" id="formSendButton_CODIGO">Enviar</a></div></div>
Estilo padrão<style>#formContainer{grid-gap:10px;}.formInput::placeholder{font-family: Arial, FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;}.formInput, .formTextArea, .formLink{ width:100%; display:block; font-family:arial; padding:10px;} .formLink {text-align:center; cursor:pointer; background-color:#15785c; color:white;} .needCheck{ pointer-events:none; background-color:#6c6c6c;}</style>
JS com as validaçõeslet formSendButton = document.getElementById("formSendButton");let formName = document.querySelector('#formName');let formDDD = document.querySelector('#formDDD');let formPhone = document.querySelector('#formPhone');formName.addEventListener('focusout', checkEmpty);formDDD.addEventListener('focusout', checkEmpty);formPhone.addEventListener('focusout', checkEmpty);//send form main eventformSendButton.addEventListener("click", (e) => { if (checkEmpty() != false) { //all cool to send document.querySelector('#formSendButton').innerHTML = 'Enviando...'; document.querySelector('#formSendButton').classList.add('needCheck'); setTimeout(function () { document.getElementById("formContainer").innerHTML = '<div class="col-12"><p id="formSuccessfullSend">Sua mensagem foi enviada com sucesso. Obrigado! Em breve retornaremos seu contato.</p></div>'; }, 1500); }});//simple check emptyfunction checkEmpty() { let errorBorderColor = "1px solid #e58787"; let okBorderColor = "1px solid #dedede"; let nome = document.getElementById("formName"); let ddd = document.getElementById("formDDD"); let phone = document.getElementById("formPhone"); let valid = true; if (nome.value === "") { nome.style.border = errorBorderColor; valid = false; } else { nome.style.border = okBorderColor; console.log("ok"); } if (ddd.value === "") { ddd.style.border = errorBorderColor; valid = false; } else { ddd.style.border = okBorderColor; } if (phone.value === "") { phone.style.border = errorBorderColor; valid = false; } else { phone.style.border = okBorderColor; } if(valid == true) { document.querySelector('#formSendButton').classList.remove('needCheck'); } else { if(document.querySelector('#formSendButton').classList.contains('needCheck') == false) { document.querySelector('#formSendButton').classList.add('needCheck'); } } return valid;}
Código do script com arquivos (form_current3.js) - o script de produção é minificado
//get element outsidevar scriptTag = document.querySelectorAll( '[src="https://www.interago.com.br/App/Extensions/1/tag/components/form.js"]' )[0]; var parentTag = scriptTag.parentNode; var iDataFiles = ''; //render form let render = '<div class="row" id="formContainer"><div class="col-12 formContainerName"><label for="formName">Nome:</label><input class="formInput inputName" type="text" name="Nome" id="formName" placeholder="Nome"/></div>'; render += '<div class="col-12 formContainerOrigin"><input class="formInput formOrigin" type="hidden" name="origem" id="formOrigin" value="Formulário automático para captação de leads"/></div>'; render += '<div class="col-12 formContainerEmail"><label for="formMail">E-mail:</label><input class="formInput inputMail" type="email" name="E-mail" id="formMail" placeholder="E-mail"/></div>'; render += '<div class="col-12 formContainerDDD"><label for="formPhone">Telefone:</label></div><div class="col-3"><input class="formInput inputDDD" type="number" name="DDD" id="formDDD" placeholder="DDD"/></div>'; render += '<div class="col-9 formContainerPhone"><input class="formInput inputPhone" type="number" name="Celular" id="formPhone" placeholder="Celular"/></div>'; render += '<div class="col-12 formContainerMessage"><label for="formMessage">Mensagem:</label><textarea class="formTextArea textAreaMessage" name="Mensagem" id="formMessage"></textarea></div>'; if(scriptTag.hasAttribute('files')) { let maxFiles = 1; let filesRequire =0; let filesRequireMsg = ''; let mime = "png,jpg,jpeg,webp,pdf,heic,docx,"; if(scriptTag.hasAttribute('maxSize')) { maxFiles = parseInt(scriptTag.getAttribute('maxSize')); if(maxFiles > 5) { maxFiles = 5}; } if(scriptTag.hasAttribute('filesRequire')) { filesRequire = parseInt(scriptTag.getAttribute('filesRequire')); filesRequire == 1 ? filesRequireMsg = '<p id="requireFileMsg">É obrigatório enviar 1 arquivo</p>' : filesRequireMsg = '<p id="requireFileMsg">É obrigatório enviar '+filesRequire+' arquivos</p>'; } if(maxFiles == 1) { render += '<div class="col-12" id="formFilesContainer"><label id="formFilesLabel">Enviar arquivo (imagem ou pdf)</label>'; } else { render += '<div class="col-12" id="formFilesContainer"><label id="formFilesLabel">Enviar arquivos (imagens, pdfs ou word)</label>'; } render += filesRequireMsg; for(i = 0; i < maxFiles; i++) { render += '<input class="formFilesInputs" id="formFilesInput_'+i+'" type="file" accept="image/png, image/jpeg, image,jpg, application/pdf, application/msword, image/heic" name="file_'+i+'" />\ <input type="hidden" name="file64_'+i+'" id="file64_'+i+'"/>'; iDataFiles += ', file64_'+i; } render += '</div>'; } else { //console.log('not have files'); } render += '<div class="col-12 formContainerButton"><a class="formLink submitLink needCheck" idata="formOrigin, formName, formMail, formDDD, formPhone, formMessage '+iDataFiles+'" id="formSendButton">Enviar</a></div></div>'; //basic styles render += "<style>#formContainer{grid-gap:10px;}.formInput::placeholder{font-family: Arial, FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;}.formInput, .formTextArea, .formLink{ width:100%; display:block; font-family:arial; padding:10px;} .formLink {text-align:center; cursor:pointer; background-color:#15785c; color:white;} .needCheck{ pointer-events:none; background-color:#6c6c6c;}.formFilesInputs{display:flex; margin:3px;}</style>"; parentTag.insertAdjacentHTML("afterbegin", render); //refresh container with message let formSendButton = document.getElementById("formSendButton"); let formName = document.querySelector('#formName'); let formDDD = document.querySelector('#formDDD'); let formPhone = document.querySelector('#formPhone'); formName.addEventListener('keyup', checkEmpty); formDDD.addEventListener('keyup', checkEmpty); formPhone.addEventListener('keyup', checkEmpty); var filesCheck = document.getElementsByClassName('formFilesInputs'); if(filesCheck.length > 0) { for(var j = 0; j < filesCheck.length; j++) { let element = filesCheck[j]; if (typeof(element) != 'undefined' && element != null) { filesCheck[j].addEventListener('change', checkEmpty); } } } //send form main event formSendButton.addEventListener("click", (e) => { if (checkEmpty() != false) { //all cool to send document.querySelector('#formSendButton').innerHTML = 'Enviando...'; document.querySelector('#formSendButton').classList.add('needCheck'); setTimeout(function () { document.getElementById("formContainer").innerHTML = '<div class="col-12"><p id="formSuccessfullSend">Sua mensagem foi enviada com sucesso. Obrigado! Em breve retornaremos seu contato.</p></div>'; }, 2000); } }); //simple check empty function checkEmpty() { let errorBorderColor = "1px solid #e58787"; let okBorderColor = "1px solid #dedede"; let nome = document.getElementById("formName"); let ddd = document.getElementById("formDDD"); let phone = document.getElementById("formPhone"); let valid = true; if (nome.value === "") { nome.style.border = errorBorderColor; valid = false; } else { nome.style.border = okBorderColor; console.log("ok"); } if (ddd.value === "") { ddd.style.border = errorBorderColor; valid = false; } else { ddd.style.border = okBorderColor; } console.log(phone.value.length); if(phone.value.length < 7) { phone.style.border = errorBorderColor; valid = false; } else { phone.style.border = okBorderColor; } var filesCheck = document.getElementsByClassName('formFilesInputs'); if(filesCheck.length > 0) { let aux = 0; for(var j = 0; j < filesCheck.length; j++) { if(filesCheck[j].files.length != 0) { let reader = new FileReader(); reader.readAsDataURL(filesCheck[j].files[0]); filesCheck[j].setAttribute('processing', j); reader.onload = function(e) { document.getElementById('file64_'+aux).value = reader.result; aux++; } } } if(scriptTag.hasAttribute('filesRequire')) { filesRequire = parseInt(scriptTag.getAttribute('filesRequire')); if(filesRequire != 0) { inputWithFiles = 0; for(var j = 0; j < filesCheck.length; j++) { let element = filesCheck[j]; if (typeof(element) != 'undefined' && element != null) { if(filesCheck[j].files.length === 0) { } else { inputWithFiles++; } } } /* }*/ if(inputWithFiles >= filesRequire) { document.getElementById('formFilesContainer').style.border = 'none'; } else { valid = false; document.getElementById('formFilesContainer').style.border = errorBorderColor; } } } } if(valid == true) { document.querySelector('#formSendButton').classList.remove('needCheck'); } else { if(document.querySelector('#formSendButton').classList.contains('needCheck') == false) { document.querySelector('#formSendButton').classList.add('needCheck'); } } return valid; }