templates/home/parts/contact_us.html.twig line 1

  1. <style>
  2.     .user-box {
  3.         position: relative;
  4.     }
  6.     .user-box input {
  7.         width: 100%;
  8.         font-size: 16px;
  9.         color: #fff !important;
  10.         margin-bottom: 30px;
  11.         border: none;
  12.         border-bottom: 1px solid white !important;
  13.         outline: none;
  14.         background: transparent;
  15.     }
  17.     .user-box .form-control:focus {
  18.         color: black !important;
  19.     }
  21.     .user-box label {
  22.         font-size: 16px;
  23.         color: white;
  24.     }
  26.     .user-box-radio {
  27.         color: white;
  28.     }
  30.     textarea {
  31.         width: 100%;
  32.     }
  34.     /* Popup style */
  35.     .popup {
  36.         display: none;
  37.         position: fixed;
  38.         top: 50%;
  39.         left: 50%;
  40.         transform: translate(-50%, -50%);
  41.         background: rgba(0, 0, 0, 0.8);
  42.         color: white;
  43.         padding: 20px;
  44.         border-radius: 8px;
  45.         text-align: center;
  46.     }
  48.     .popup.show {
  49.         display: block;
  50.     }
  51. </style>
  53. <div class="container bg-gradient-dark">
  54.     <div class="row">
  55.         <div class="col-12 col-md-4 mx-auto">
  56.             {{ form_start(form, {
  57.                 'attr': {'class': 'py-5'},
  58.                 'action': path('new_website_contact_from_contact_form')
  59.             }) }}
  61.             {{ form_widget(form._token) }}
  63.             <div class="user-box">
  64.                 {{ form_row(form.firstName) }}
  65.             </div>
  67.             <div class="user-box">
  68.                 {{ form_row(form.lastName) }}
  69.             </div>
  71.             <div class="user-box">
  72.                 {{ form_row(form.email) }}
  73.             </div>
  75.             <div class="user-box">
  76.                 {{ form_label(form.mobile, 'Phone', { 'label_attr': {'class': 'form-label'} }) }}<sup
  77.                         style="padding-left:5px">*</sup>
  78.                 {{ form_widget(form.mobile, { 'attr': {'class': 'form-control', 'required': 'required'} }) }}
  79.             </div>
  81.             {% if ProductService.getProductContactFormCount() > 1 %}
  82.                 <div class="user-box-radio products_requested">
  83.                     {{ form_row(form.productsRequested) }}
  84.                 </div>
  85.             {% endif %}
  87.             <div class="user-box">
  88.                 {{ form_label(form.notes, 'Message', { 'label_attr': {'class': 'form-label pr-5'} }) }}
  89.                 {{ form_widget(form.notes, { 'attr': {'class': 'form-control', 'style': 'width: 100%', 'rows': '7'} }) }}
  90.             </div>
  92.             <button class="btn btn-outline-success mt-3" type="submit" onclick="showThankYouMessage(event)">Submit</button>
  94.             {{ form_end(form) }}
  95.         </div>
  96.     </div>
  97. </div>
  99. <!-- Popup message -->
  100. <div id="thankYouPopup" class="popup">
  101.     <p>Thank you for your submission!</p>
  102. </div>
  104. <script>
  105.     function showThankYouMessage(event) {
  106.         event.preventDefault();  // Prevent form from submitting immediately
  108.         // Show the popup
  109.         document.getElementById('thankYouPopup').classList.add('show');
  111.         // Simulate form submission after a delay
  112.         setTimeout(function() {
  113.             // Here you can trigger the form submission after showing the popup
  114.             event.target.closest('form').submit();
  115.         }, 2000);  // Delay to allow popup to be visible for 2 seconds
  116.     }
  117. </script>