homepage/homepage/home/templates/kontakt.html

{% load static %}

    <div id="kontakt" class="bg-petrol-100 grid grid-cols-1 gap-12 md:px-12 md:px-4 sm:pl-0 px-4 py-4 text-lg">
      <div class="text-2xl">
        Kontaktanfrage
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 24" fill="currentColor"
          class="w-24 h-6 text-main-icon mr-4">
          <path fill-rule="evenodd" d="M0 11 L100 11 L100 13 L0 13 Z" clip-rule="evenodd" />
        </svg>
        <div class="leading-relaxed mt-2 text-base">
          Ich freue mich über Ihre Nachricht.<br>
          Egal ob per Telefon, Mail oder hier.
        </div>
      </div>
    
      <div class="space-y-4">
        <p class="flex flex-nowrap items-center text-petrol-500">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 mr-4">
            <path
              d="M19.5 22.5a3 3 0 003-3v-8.174l-6.879 4.022 3.485 1.876a.75.75 0 01-.712 1.321l-5.683-3.06a1.5 1.5 0 00-1.422 0l-5.683 3.06a.75.75 0 01-.712-1.32l3.485-1.877L1.5 11.326V19.5a3 3 0 003 3h15z" />
            <path
              d="M1.5 9.589v-.745a3 3 0 011.578-2.641l7.5-4.039a3 3 0 012.844 0l7.5 4.039A3 3 0 0122.5 8.844v.745l-8.426 4.926-.652-.35a3 3 0 00-2.844 0l-.652.35L1.5 9.59z" />
          </svg>
          <span class="text-slate-800">
            <a href="mailto:mail@tobias-gerwin.de?subject=Hallo Tobias, ich war auf deiner Homepage">
              mail@tobias-gerwin.de
            </a>
          </span>
        </a>
        <p class="flex flex-nowrap items-center text-petrol-500">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 mr-4">
            <path fill-rule="evenodd"
              d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
              clip-rule="evenodd" />
          </svg>
          <span class="text-slate-800">
            <a href="tel:+4917657817451">+49&nbsp;176&nbsp;57&nbsp;81&nbsp;74&nbsp;51</a>
          </span>
        </p>
      </div>
    
      <fieldset id="fieldset">
        <div class="grid grid-cols-1 gap-4 text-base">
          <div class="w-full">
            <label for="name" class="hidden">Dein Name</label>
            <input id="name" type="text" placeholder="Name" class="p-2 w-full">
            <p id="errorName" class="text-red-700 hidden"></p>
          </div>
          <div class="w-full">
    
            <label for="email" class="hidden">E-Mail-Adresse</label>
            <input id="email" type="email" name="email" value=""
              placeholder="E-Mail-Adresse" class="p-2 w-full">
            <p id="errorEmail" class="text-red-700 hidden"></p>
          </div>
          <div class="w-full">
    
            <label for="message" class="hidden">Nachricht</label>
            <textarea id="message" name="message" placeholder="Nachricht"
              class="p-2 w-full h-32"></textarea>
            <p id="errorMessage" class="text-red-700 hidden"></p>
          </div>
    
          <div id="myCheckbox" class="flex flex-nowrap items-center cursor-pointer" onclick="toggleCcMyself()">
            <label id="labelCheckbox" for="cc_myself" class="mr-4 cursor-pointer">cc an mich?</label>
    
            <svg id="ccMyself_false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke-width="1.5" stroke="currentColor" class="w-4 h-4 bg-white text-[#ccc] hover:text-agpgreen-medium">
              <!-- class="w-6 h-6"> -->
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
    
            <svg id="ccMyself_true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
              stroke="currentColor" class="w-4 h-4 bg-petrol-500 text-white hidden">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
            </svg>
          </div>
    
          <label for="send" class="hidden">absenden</label>
          <button id="send" type="button" name="button"
            class="bg-petrol-500 text-white py-2 px-6 w-fit hover:scale-105 transition hover:bg-main-icon"
            onclick="sendForm()">Absenden</button>
        </div>
      </fieldset>
      <div id="loadingAnimation" class="text-petrol-500 p-2 hidden">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="animate-spin w-6 h-6 mx-auto">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
        </svg>
      </div>
      <p id="feedback" class="hidden text-center">
        Danke für Ihre Nachricht! Ich werde mich schnellstmöglich bei Ihnen melden.<br>
        Besten Gruß <br>
        Tobias Gerwin
      </p>
    </div>

<script>

  let ccMyself = false;
  document.getElementById('name').addEventListener("focus", removeError)
  document.getElementById('email').addEventListener("focus", removeError)
  document.getElementById('message').addEventListener("focus", removeError)

  function removeError(event) {
    let el = event.target
    el.classList.remove('border-2');
    el.classList.remove('border-red-700');
    el.classList.remove('bg-red-200');

    document.getElementById('error' + el.id.charAt(0).toUpperCase() + el.id.slice(1)).classList.add('hidden');
    document.getElementById('error' + el.id.charAt(0).toUpperCase() + el.id.slice(1)).innerHTML = null;
  }

  function toggleCcMyself() {
    document.getElementById('ccMyself_false').classList.toggle('hidden');
    document.getElementById('ccMyself_true').classList.toggle('hidden');
    ccMyself = !ccMyself;
  }

  function sendForm() {
    let params = {
      form: {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        message: document.getElementById('message').value,
        cc_myself: ccMyself,
      },
    };
    let options = {
      method: 'POST',
      body: JSON.stringify(params),
      headers: {
        'X-CSRFToken': getCookie('csrftoken'),
      },
    };

    document.getElementById('fieldset').disabled = true;
    document.getElementById('send').classList.add('hidden');
    document.getElementById('loadingAnimation').classList.remove('hidden');
   
    
    fetch('/kontakt/', options)
    .then(response => response.json())
      .then(data => {
        document.getElementById('loadingAnimation').classList.add('hidden');
        if (data.errors) {
          console.log('error', data.errors);
          document.getElementById('fieldset').disabled = false;
          document.getElementById('send').classList.remove('hidden');

          if (data.errors.name) {
            document.getElementById('name').classList.add('border-2');
            document.getElementById('name').classList.add('border-red-700');
            document.getElementById('name').classList.add('bg-red-200');
            document.getElementById('errorName').classList.remove('hidden');
            document.getElementById('errorName').innerHTML = data.errors.name[0].message;
          };
          if (data.errors.email) {
            document.getElementById('email').classList.add('border-2');
            document.getElementById('email').classList.add('border-red-700');
            document.getElementById('email').classList.add('bg-red-200');
            document.getElementById('errorEmail').classList.remove('hidden');
            document.getElementById('errorEmail').innerHTML = data.errors.email[0].message;
          };
          if (data.errors.message) {
            document.getElementById('message').classList.add('border-2');
            document.getElementById('message').classList.add('border-red-700');
            document.getElementById('message').classList.add('bg-red-200');
            document.getElementById('errorMessage').classList.remove('hidden');
            document.getElementById('errorMessage').innerHTML = data.errors.message[0].message;
          };
        } else {
          document.getElementById('feedback').classList.remove('hidden');
          document.getElementById('myCheckbox').classList.remove('cursor-pointer');
          document.getElementById('myCheckbox').removeEventListener('click', toggleCcMyself)
          document.getElementById('labelCheckbox').classList.remove('cursor-pointer');
        }
      });
  }

  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
      const cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim();
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === (name + '=')) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }
    return cookieValue;
  }

</script>