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çãoO 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=needCheckValidaçã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 usarAdicione 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 20MBComo 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 caracteresVeja 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 abaixoHTML 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; }