templates/page/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Kontakt{% endblock %}
  5. {% block body %}
  6.     <main>
  8.         <!-- =======================
  9.         Page Banner START -->
  10.         <section class="pt-5 pb-0" style="background-image:url(assets/images/element/map.svg); background-position: center left; background-size: cover;">
  11.             <div class="container">
  12.                 <div class="row">
  13.                     <div class="col-lg-8 col-xl-6 text-center mx-auto">
  14.                         <!-- Title -->
  15.                         <h1 class="mb-4">Chętnie Ci pomożemy!</h1>
  16.                     </div>
  17.                 </div>
  19.                 <div class="row g-4 g-md-5 mt-0 mt-lg-3 justify-content-md-center">
  20.                     <!-- Box item -->
  21.                     <div class="col-lg-6 mt-lg-0">
  22.                         <div class="card card-body shadow py-5 text-center h-100">
  23.                             <!-- Title -->
  24.                             <h5 class="mb-3">Dane Kontaktowe</h5>
  25.                             <ul class="list-inline mb-4">
  26.                                 <!-- Phone number -->
  27.                                 <li class="list-item mb-3 h6 fw-light">
  28.                                     <a href="tel:667-736-890"> <i class="fas fa-fw fa-phone-alt me-2"></i>+48 667 736 890 </a>
  29.                                 </li>
  30.                                 <!-- Email id -->
  31.                                 <li class="list-item mb-0 h6 fw-light">
  32.                                     <a href="mailto:bok@zatokakodu.pl"> <i class="far fa-fw fa-envelope me-2"></i>bok@zatokakodu.pl</a>
  33.                                 </li>
  34.                             </ul>
  36.                             <!-- Company data -->
  37.                             <h5 class="mb-3">Dane firmy</h5>
  38.                             <ul class="list-unstyled mb-0 text-start mx-auto" style="max-width: 600px;">
  39.                                 <li class="mb-2"><strong>Nazwa:</strong> PROGRAMMERS sp. z o. o.</li>
  40.                                 <li class="mb-2"><strong>Adres:</strong>Jastrzębie-Zdrój 44-335, Poznańska 13/9</li>
  41.                                 <li class="mb-2"><strong>NIP:</strong>6332244758</li>
  42.                             </ul>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.         </section>
  48.         <!-- =======================
  49.         Page Banner END -->
  51.         <!-- =======================
  52.         Image and contact form START -->
  53.         <section >
  54.             <div class="container">
  55.                 <div class="row g-4 g-lg-0 align-items-center">
  57.                     <div class="col-md-6 align-items-center text-center">
  58.                         <!-- Image -->
  59.                         <img src="assets/images/element/contact.svg" class="h-400px" alt="">
  60.                     </div>
  62.                     <!-- Contact form START -->
  63.                     <div class="col-md-6" id="mailBox">
  64.                         <!-- Title -->
  65.                         <h2 class="mt-4 mt-md-0">Napisz do Nas</h2>
  66.                         <form>
  67.                             <!-- Name -->
  68.                             <div class="mb-4 bg-light-input">
  69.                                 <label for="yourName" class="form-label">Imię i Nazwisko dziecka</label>
  70.                                 <input type="text" name="name" class="form-control form-control-lg" id="yourName">
  71.                             </div>
  72.                             <!-- Email -->
  73.                             <div class="mb-4 bg-light-input">
  74.                                 <label for="emailInput" class="form-label">Adres email *</label>
  75.                                 <input type="email" name="email" class="form-control form-control-lg" id="emailInput">
  76.                             </div>
  77.                             <div class="mb-4 bg-light-input">
  78.                                 <label for="phoneInput" class="form-label">Telefon *</label>
  79.                                 <input type="phone" name="phone" class="form-control form-control-lg" id="phoneInput">
  80.                             </div>
  81.                             <!-- Message -->
  82.                             <div class="mb-4 bg-light-input">
  83.                                 <label for="textareaBox" class="form-label">Wiadomość *</label>
  84.                                 <textarea name="message" class="form-control" id="textareaBox" rows="4"></textarea>
  85.                             </div>
  86.                             <!-- Button -->
  87.                             <div class="d-grid">
  88.                                 <button class="btn btn-lg btn-primary mb-0" id="send_button" type="button">Wyślij wiadomość</button>
  89.                             </div>
  90.                         </form>
  91.                     </div>
  92.                     <!-- Contact form END -->
  93.                 </div>
  94.             </div>
  95.         </section>
  96.         <!-- =======================
  97.         Image and contact form END -->
  99.     </main>
  100. {% endblock %}
  102. {%  block js %}
  103.     {{ parent() }}
  104.     <script src="{{ asset('./assets/js/jquery-3.6.4.min.js')  }}"></script>
  105.     <script>
  106.         function isValidEmail() {
  107.             var input = document.getElementById('emailInput')
  108.             var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  109.             return pattern.test(input.value);
  110.         }
  112.         function sendMessage() {
  113.             const data = {
  114.                 name: $('#yourName').val(),
  115.                 phone: $('#phoneInput').val(),
  116.                 email: $('#emailInput').val(),
  117.                 message: $('#textareaBox').val(),
  118.                 type: 'contact'
  119.             };
  121.             $.ajax({
  122.                 url: '/message',
  123.                 method: 'POST',
  124.                 data: data,
  125.                 success: function(response) {
  126.                     document.getElementById('mailBox').innerHTML = '<h2 class="mt-4 mt-md-0">Dziękujemy!</h2><h3>twoja wiadomość została wysłana</h3><h5>Jeden z naszych pracowników odpowie najszybciej jak to możliwe.</h5>';
  127.                 },
  128.                 error: function(jqXHR, textStatus, errorThrown) {
  129.                     console.error('Error sending message:', errorThrown);
  130.                 }
  131.             });
  132.         }
  133.         document.getElementById('send_button').addEventListener('click', function() {
  134.             var alert = document.createElement('div');
  135.             if(isValidEmail()) {
  136.                 sendMessage()
  137.             } else {
  138.                 alert.className = 'alert text-center alert-danger';
  139.                 alert.innerHTML = '<h4 class="alert-heading">Podaj prawidłowy adres email</h4>';
  140.             }
  141.             alert.style.position = 'fixed';
  142.             alert.style.left = '50%';
  143.             alert.style.top = '30%';
  144.             alert.style.transform = 'translate(-50%, -50%)';
  145.             alert.style.BorderRadius = "10px";
  146.             alert.style.zIndex = '10';
  147.             document.body.appendChild(alert);
  148.             setTimeout(function() {
  149.                 document.body.removeChild(alert);
  150.             }, 2000);
  152.         });
  153.     </script>
  154.     {{ parent() }}
  155. {%  endblock %}