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>
  74.             {% if CompanyDetailsService.companyDetails.contactFormIncludeTelNumber ==1 %}
  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>
  80.             {% endif %}
  82.             {% if ProductService.getProductContactFormCount() > 1 %}
  83.                 <div class="user-box-radio products_requested">
  84.                     {{ form_row(form.productsRequested) }}
  85.                 </div>
  86.             {% endif %}
  88.             {% if CompanyDetailsService.companyDetails.contactFormIncludeMessage ==1 %}
  89.                 <div class="user-box">
  90.                     {{ form_label(form.notes, 'Message', { 'label_attr': {'class': 'form-label pr-5'} }) }}
  91.                     {{ form_widget(form.notes, { 'attr': {'class': 'form-control', 'style': 'width: 100%', 'rows': '7'} }) }}
  92.                 </div>
  93.             {% endif %}
  95.             <button class="btn btn-outline-success mt-3" type="submit" onclick="showThankYouMessage(event)">Submit
  96.             </button>
  98.             {{ form_end(form, { 'render_rest': false }) }}
  100.         </div>
  101.     </div>
  102. </div>
  104. <!-- Popup message -->
  105. <div id="thankYouPopup" class="popup">
  106.     <p>Thank you for submitting your details</p>
  107.     {% if CompanyDetailsService.companyDetails.WebsiteContactsAutoReply == 'Auto' %}
  108.         <p>Please check your email.</p>
  109.     {% else %}
  110.         <p>We will be in contact shortly.</p>
  111.     {% endif %}
  112. </div>
  114. <script>
  115.     function showThankYouMessage(event) {
  116.         event.preventDefault();  // Prevent form from submitting immediately
  118.         // Show the popup
  119.         document.getElementById('thankYouPopup').classList.add('show');
  121.         // Simulate form submission after a delay
  122.         setTimeout(function () {
  123.             // Here you can trigger the form submission after showing the popup
  124.             event.target.closest('form').submit();
  125.         }, 2000);  // Delay to allow popup to be visible for 2 seconds
  126.     }
  127. </script>