src/AppBundle/Resources/views/Form/contact_form.html.twig line 1

Open in your IDE?
  1. <script src="https://www.google.com/recaptcha/api.js?render=6LdaY_oUAAAAADsCTi-gD5HqFwDTQzpeIhAjqZWL"></script>
  2. <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-hidden="true">
  3.   <form id="contact-form" class="meeting-form card modal-dialog modal-lg" method="post" action="{{ url('create-lead') }}" onsubmit="return validateMeeting()" data-toggle="validator">
  4.     <div class="meeting-form__body card-body theme-styled-text modal-content">
  5.       <div class="meeting-form__close-btn" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i></div>
  6.       <div class="meeting-form__header form-header blue accent-1">
  7.         <h2 class="mt-2">{% trans %}onlineRequestForMeeting{% endtrans %}</h2>
  8.         <span class="meeting-form__text--subheading">{% trans %}hereYouCanSetUpMeeting{% endtrans %}</span>
  9.       </div>
  10.       <div class="row">
  11.         <div class="col-lg-6 meeting-form__col">
  12.           {# Not needed. Leaving here for future posible use #}
  13. {#          <div class="form-group">#}
  14. {#            <span>{% trans %}meetingSuggestedDate{% endtrans %}</span>#}
  15. {#            <input type="text" id="form-date" name="datepicker" required class="form-control meeting-form__input" placeholder="{% trans %}meetingSuggestedDatePlaceholder{% endtrans %}" autocomplete="off">#}
  16. {#          </div>#}
  17.           <div class="form-group">
  18.             <span>{% trans %}meetingYourName{% endtrans %}</span>
  19.             <input type="text" id="form-name" name="first_name" required class="form-control meeting-form__input" placeholder="{% trans %}meetingYourNamePlaceholder{% endtrans %}">
  20.           </div>
  21.           <div class="form-group">
  22.             <span>{% trans %}meetingYourSurname{% endtrans %}</span>
  23.             <input type="text" id="form-surname" name="last_name" required class="form-control meeting-form__input" placeholder="{% trans %}meetingYourSurnamePlaceholder{% endtrans %}">
  24.           </div>
  25.           <div class="form-group">
  26.             <span>{% trans %}meetingYourEmail{% endtrans %}</span>
  27.             <input type="text" id="form-email" name="email" class="form-control meeting-form__input" placeholder="{% trans %}meetingYourEmailPlaceholder{% endtrans %}">
  28.             <span class="text-danger meeting-form__alert meeting-form__alert--fill-one hidden">{% trans %}meetingFillAtLeastOne{% endtrans %}</span>
  29.           </div>
  30.           <div class="form-group">
  31.             <span>{% trans %}meetingYourPhone{% endtrans %}</span>
  32.             <input type="text" id="form-phone" name="phone" class="form-control meeting-form__input" placeholder="{% trans %}meetingYourPhonePlaceholder{% endtrans %}">
  33.             <span class="text-danger meeting-form__alert meeting-form__alert--fill-one hidden">{% trans %}meetingFillAtLeastOne{% endtrans %}</span>
  34.           </div>
  35.           <div class="form-group hidden">
  36.             <input type="hidden" id="form-Referral" name="referral" value="16">
  37.             <input type="hidden" id="form-ProjectId" name="projectid" value="{{ projectId }}">
  38.             <input type="hidden" id="form-InternalId" name="internalid" value="{{ internalId }}">
  39.             <input type="hidden" id="form-RecaptchaToken" name="recaptcha_token" value="">
  40.           </div>
  42.         </div>
  43.         <div class="col-lg-6 meeting-form__col">
  44.           <span>{% trans %}meetingMessage{% endtrans %}</span>
  45.           <textarea id="form-text" name="message" class="hidden"></textarea>
  46.           <textarea id="form-text-without-date" name="message-without-date" class="form-control md-textarea meeting-form__input meeting-form__text-area" placeholder="{% trans %}meetingMessagePlaceholder{% endtrans %}" rows="3">Dobrý den, mám zájem o jednotku {{ internalId }}, kontaktujte mě prosím.</textarea>
  47.           <div class="meeting-form__text--gdpr">{% trans %}meetingGDPR{% endtrans %}</div>
  48.           <button class="btn red-button btn--meeting-form">{% trans %}meetingSubmit{% endtrans %}</button>
  49.         </div>
  50.       </div>
  51.     </div>
  52.   </form>
  53. </div>
  55. <script>
  56.   let dateEl = $("#form-date");
  57.   let textNoDateEl = $("#form-text-without-date");
  58.   let textEl = $("#form-text");
  59.   let emailEl = $("#form-email");
  60.   let phoneEl = $("#form-phone");
  62.   let alerts = $(".meeting-form__alert");
  63.   let fillOneAlerts = $(".meeting-form__alert--fill-one");
  65.   $( function() {
  66.     dateEl.datepicker({
  67.       dateFormat: 'dd.mm.yy'
  68.     });
  69.   } );
  71.   textNoDateEl.on("change", function () {
  72.     updateMessage();
  73.   });
  75.   dateEl.on("change", function () {
  76.     updateMessage();
  77.   });
  79.   function updateMessage() {
  80.     textEl.text(textNoDateEl.val() + (dateEl.val() != null ? ("\nPožadované datum schůzky:\n" + dateEl.val()) : ""));
  81.   }
  83.   function validateMeeting() {
  84.     if ($('#form-RecaptchaToken').val() !== '') {
  85.       return true;
  86.     }
  87.     alerts.hide();
  88.     if (emailEl.val().trim() !== "" || phoneEl.val().trim() !== "") {
  89.       grecaptcha.ready(function() {
  90.         grecaptcha.execute('6LdaY_oUAAAAADsCTi-gD5HqFwDTQzpeIhAjqZWL', {action: 'submit'}).then(function(token) {
  91.           $('#form-RecaptchaToken').val(token);
  92.           $('#contact-form').submit();
  93.         });
  94.       });
  95.     } else {
  96.       fillOneAlerts.show();
  97.     }
  98.     return false;
  99.   }
  100. </script>