apicvcrmintegrated-v2.js

<main>
  <!-- sign-up section -->
  <section class="sign-up">
    <!-- the form itself -->
    <form class="sign-up__form" action="" method="post" novalidate>
      <div class="form__input">
        <input class="" type="text" name="nome" id="nome" placeholder="Nome" value="" required>
        <span class="warning-icon">!</span>
        <p class="warning">O campo não pode estar vazio</p>
      </div>

      <div class="form__input">
        <input class="" type="text" name="telefone" id="telefone" placeholder="Telefone" value="" required>
        <span class="warning-icon">!</span>
        <p class="warning">O campo não pode estar vazio</p>
      </div>

      <div class="form__input">
        <input class="" type="email" name="email" id="email" placeholder="Email" value="" required>
        <span class="warning-icon">!</span>
        <p class="warning">Parece que este não é um e-mail Valido</p>
      </div>

      <div class="form__input">
        <input class="" type="text" name="cidade" id="cidade" placeholder="Cidade" value="" required>
        <span class="warning-icon">!</span>
        <p class="warning">O campo não pode estar vazio</p>
      </div>
      <p id="sucesso" style="display:none;">Dados Enviados com sucesso !</p>
      <p id="falha" style="display:none;">Nao foi possivel enviar seus dados !</p>  
      <input class="submit-btn" type="submit" value="Enviar">
    </form>
    <!-- form ends -->
  </section>
  <!-- sign-up ends -->
</main>

<style>
        
        
:root {
  /* Primary */

  --Red: hsl(0, 100%, 74%);
  --Green: hsl(154, 59%, 51%);

  /* Accent */

  --Blue: hsl(248, 32%, 49%);

  /* Neutral */

  --Dark-Blue: hsl(249, 10%, 26%);
  --Grayish-Blue: hsl(246, 25%, 77%);
}

body {
  background-color: #D5AD8D;
}

main {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* separate styling */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-bottom: 3rem;
}

.hero__title {
  padding: 1rem;
  font-size: 1.75rem;
}

.sign-up {
  width: 90%;
  min-width: 90%;
}

.sign-up__desc {
  
  padding: 1rem 5rem;
  margin-bottom: 1.75rem;
  border-radius: 0.8rem;
  box-shadow: 0 8px 0px rgba(0 0 0/0.15);
  background-color: var(--Blue);
  text-align: center;
}

.sign-up__desc span {
  font-weight: bold;
}

.sign-up__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem;
  border-radius: 0.8rem;
  box-shadow: 0 8px 0px rgba(0 0 0/0.15);
  color: var(--Grayish-Blue);
  background-color: white;
}

.form__input {
  width: 100%;
  margin-bottom: 1em;
  position: relative;
  opacity: 0.7;
}

.form__input span {
  position: absolute;
  top: 22%;
  right: 2ch;
  padding: 0 0.65em;
  border-radius: 50%;
  background-color: var(--Red);
  color: white;
  display: none;
}

.form__input.warning span {
  display: inline-block;
}

.form__input input {
  width: 99%;
  padding: 1em;
  border: 2px solid hsla(246, 25%, 77%, 0.25);
  border-radius: 0.5em;
  font-weight: 600;
  color: var(--Dark-Blue);
}

.form__input input:focus {
  outline: none;
  border: 2px solid hsla(246, 25%, 77%, 1);
}

.form__input.warning input {
  border: 2px solid var(--Red);
}

.form__input p {
  margin: 0.2em 0.75em 0 0;
  display: none;
  font-size: 0.75rem;
  text-align: right;
  font-style: italic;
  color: var(--Red);
}

.form__input.warning p {
  display: block;
}

.submit-btn {
  cursor: pointer;
  width: 100%;
  padding: 1em;
  margin-bottom: 1em;
  border: 1px solid var(--Green);
  border-bottom: 5px solid hsl(154, 59%, 47%);
  border-radius: 0.5em;
  background-color: var(--Green);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2ch;
}

.submit-btn:hover {
  background-color: hsl(154, 59%, 60%);
  border-bottom: 5px solid hsl(154, 59%, 55%);
}

.form__terms {
  max-width: 35ch;
  margin-bottom: 0.75em;
  font-size: 0.8rem;
  text-align: center;
}

.form__terms span {
  font-weight: 700;
  color: var(--Red);
}

/* attribution styling */

footer {
  position: absolute;
  top: 0;
}

.attribution {
  color: white;
  opacity: 0.7;
}

.attribution a {
  color: var(--Dark-Blue);
  text-decoration: underline;
}

.attribution a:hover {
  color: var(--Blue);
}

/* media queries */

@media (min-width: 1000px) {

  main {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
    min-height: 100vh;
  }

  .hero {
    align-items: flex-start;
    text-align: left;
    width: 45%;
    margin-right: 1rem;
  }

  .hero__title {
    max-width: 15ch;
    padding: 0;
    margin-bottom: 2rem;
    font-size: 3rem;
    line-height: 1.25em;
  }

  .hero__desc {
    max-width: 75ch;
  }

  .sign-up {
    min-width: 50%;
    width: 50%;
  }

  .sign-up__form {
    padding: 1.75rem;
    width: 100%;
  }

  .sign-up__form input {
    padding-left: 1.5em;
  }

  .form__terms {
    max-width: 55ch;
  }
}

</style>

<script>
  
  console.log('Start Script... ');

const form = document.querySelector(".sign-up__form");
const inputs = document.querySelectorAll(".form__input");

clearInputs(inputs);
form.addEventListener("submit", async (e) => {
  e.preventDefault();
    console.log('Enviando dados... ')
    const nome = document.getElementById("nome").value;
    const telefone = document.getElementById("telefone").value;
    const email = document.getElementById("email").value;
    const cidade = document.getElementById("cidade").value;
    
    console.log('nome -> ', nome);
    console.log('telefone -> ', telefone);
    console.log('email -> ', email);
    console.log('cidade -> ', cidade);
    
  inputs.forEach((input) => {
    let inputValue = input.firstElementChild;
    if (inputValue.getAttribute("id") === "email") {
      validateEmail(inputValue, input);
    } else {
      validateLength(inputValue, input);
    }
  });
  
  try {
	
	var myHeaders = new Headers();
    myHeaders.append("token", "fe779b2fefdde6ef718f575b79449be6724721bd");
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Cookie", "CVid=ijm3t8mnna1lo2jmrt77fcgjal");
    
    var raw = JSON.stringify({
      "nome": nome,
      "email": email,
      "telefone": telefone,
      "cidade": cidade,
      "permitir_alteracao": true
    });
    
    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };
    
    let response = await fetch("https://pontual.cvcrm.com.br/api/cvio/lead", requestOptions)
      .then(response => {
        console.log(' response.status -> ', response.status)
        console.log(response.text());
        if(response.status !== 200) { 
          throw new Error('Error 400 Bad Request')
        }
        response.text()
      })

    console.log('Dados Enviados com sucesso')
    const sucesso = document.getElementById("sucesso");
    sucesso.style.setProperty('display','block');
    sucesso.style.setProperty('color','blue');
    sucesso.style.setProperty('opacity','0.6');
	
    console.log('Limpando dados... ')
    document.getElementById("nome").value = '';
    document.getElementById("telefone").value = '';
    document.getElementById("email").value = '';
    document.getElementById("cidade").value = '';
    const falha = document.getElementById("falha");
    falha.style.setProperty('display','none');
      
  } 
  catch (error) {
      console.log('Razao do error ->', error);
      const falha = document.getElementById("falha");
      falha.style.setProperty('display','block');
      falha.style.setProperty('color','red');
      falha.style.setProperty('opacity','1');
  }
     
});

function clearInputs() {
  inputs.forEach((input) => {
    let inputValue = input.firstElementChild;
    inputValue.value = "";
  });
}

function validateEmail(email, parent) {
  const validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  if (!email.value.match(validRegex)) {
    parent.classList.add("warning");
    email.style.color = "var(--Red)";
  } else {
    parent.classList.remove("warning");
    email.style.color = "var(--Dark-Blue)";
  }
}

function validateLength(string, parent) {
  if (!string.value.length > 0) {
    parent.classList.add("warning");
    string.style.color = "var(--Red)";
  } else {
    parent.classList.remove("warning");
    string.style.color = "var(--Dark-Blue)";
  }
}

  
</script>