templates/uniqskills/contact-new/index.html.twig line 1

Open in your IDE?
  1. {% extends '/uniqskills/layout_order.html.twig' %}
  3. {% block title %}{{ 'uniqskills.metaTitle.contact'|trans }}{% endblock %}
  5. {% block content %}
  6.     <style>
  7.          .ui-tooltip-content {
  8.              display:none;
  9.          }
  10.         .error {
  11.             color: red;
  12.         }
  13.         textarea {
  14.             resize: vertical;
  15.         }
  16.     </style>
  18.      <div class="registrationForm">
  19.         <div class="container">
  20.             <div class="registrationForm-content">
  21.                 <h1 class="formTitle" style="margin-bottom: 15px;">
  22.                     {{ 'uniqskills.form.contact.title'|trans }}
  23.                 </h1>
  24.                 <div class="formContent">
  25.                     <div class="universalContentFormContainer">
  26.                         <span class="titleInput">{{ 'contactForm.label.category'|trans }}:</span>
  27.                         {% set firstElement = dataForm.list|first %}
  28.                         <select class="selectInput selectCategory" data-categoryId="{{ firstElement.id }}">
  29.                             {% for item in dataForm.list %}
  30.                                 <option data-id="{{ item.id }}"><span>{{ item.name }}</span></option>
  31.                             {% endfor %}
  32.                         </select>
  34.                         <div class="subcategoryBox">
  35.                             <span class="titleInput">{{ 'contactForm.label.subject'|trans }}:</span>
  36.                             {% for item in dataForm.list %}
  37.                                 <select class="selectInput selectSubcategory {{ item.id }}{% if loop.first %} defaultSelected{% endif %}" style="display:{% if loop.first %}block{% else %}none{% endif %};">
  38.                                     <option selected data-filed="">{{ 'contactForm.label.choose'|trans }}</option>
  39.                                     {% for option in item.subjectOptions %}
  40.                                         <option data-subcategoryId={{ option.id }} data-fields="{{ option.fields|join('|') }}">{{ option.title }}</option>
  41.                                     {% endfor %}
  42.                                 </select>
  43.                             {% endfor %}
  44.                         </div>
  46.                         <form id="universalContentForm" data-url="{{ path('ajaxExecuteContactForm') }}">
  47.                             {% for item in dataForm.fields|sort((a,b) => a.position <=> b.position) %}
  48.                                 <div style="display: none;" class="form-group" data-inputId="{{ item.id }}">
  49.                                     <label class="labelInput" for="{{ item.id }}">{{ item.name }}{% if item.required == true %}*{% endif %}</label>
  50.                                     <{% if item.type == 'textarea' %}textarea style="height: 150px;"{% else %}input{% endif %} {% if item.required == true %}required{% endif %}
  51.                                             class="inputForm" name="{{ item.id }}" type="{{ item.type }}"
  52.                                             id="input-{{ item.id }}">{% if item.type == 'textarea' %}</textarea>{% endif %}
  53.                                 </div>
  54.                             {% endfor %}
  56.                             <div class="form-group form-check show checkboxInput">
  57.                                 <input name="regulation" type="checkbox" class="form-check-input" id="checkboxInput">
  58.                                 <label class="form-check-label" for="checkboxInput"><span style="margin-left: 5px;">{{ regulation|raw }}</span></label>
  59.                             </div>
  60.                             <div class="g-recaptcha" data-sitekey="{{ recaptchaPublicKey }}"></div>
  61.                             <div class="messageBox"></div>
  62.                             <div style="text-align: center">
  63.                                 <button type="submit" class="btn">{{'uniqskills.form.contact.submit'|trans|upper }}</button>
  64.                             </div>
  65.                         </form>
  66.                         <div class="messageBoxSuccess"></div>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.      </div>
  72.     {% include '/uniqskills/footer.html.twig' %}
  73. {% endblock %}
  75. {% block customjs %}
  76.     <script>
  77.         $(document).ready(function(){
  79.             jQuery.extend(jQuery.validator.messages, {
  80.                 required: "{{ 'errors.validation.required'|trans }}",
  81.                 email: "{{ 'errors.validation.email'|trans }}"
  82.             });
  84.             $('body').on('change', '.universalContentFormContainer .selectCategory', function(){
  85.                 var categoryId = $(this).children("option:selected").attr('data-id');
  86.                 $('#universalContentForm').hide();
  87.                 $(this).attr('data-categoryId', categoryId);
  88.                 $('.messageBoxSuccess').text('');
  90.                 $('.selectSubcategory').each(function(){
  91.                     var _this = $(this);
  92.                     if (_this.hasClass(categoryId)) {
  93.                         _this.show();
  94.                     } else {
  95.                         _this.hide();
  96.                     }
  98.                     $(".selectSubcategory option").prop("selected", function () {
  99.                         return this.defaultSelected;
  100.                     });
  101.                 });
  102.             });
  104.             $('body').on('change', '.universalContentFormContainer .selectSubcategory', function(){
  106.                 $('.messageBox').text('');
  107.                 $('.messageBoxSuccess').text('');
  109.                 if ($(this).find(':selected').attr('data-fields') == undefined) {
  110.                     $('#universalContentForm').hide();
  111.                 } else {
  112.                     var fieldsId = $(this).children("option:selected").attr('data-fields');
  113.                     var subcategoryId = $(this).children("option:selected").attr('data-subcategoryId');
  114.                     var arrayFields = fieldsId.split('|');
  116.                     $('#universalContentForm .form-group').each(function(){
  117.                         var _this = $(this);
  118.                         if (_this.is('.show') == false) {
  119.                             if (jQuery.inArray(_this.attr('data-inputId'), arrayFields) !== -1){
  120.                                 _this.show();
  121.                             } else {
  122.                                 _this.hide();
  123.                             }
  124.                         }
  125.                     });
  127.                     $(this).attr('data-subcategoryId', subcategoryId);
  128.                     $('#universalContentForm').show();
  129.                 }
  130.             });
  132.             $('body').on('click','.universalContentFormContainer .btn', function(e){
  133.                 e.preventDefault();
  134.                 var form = $('#universalContentForm');
  135.                 var url = form.attr('data-url');
  137.                 if (form.valid()){
  138.                     var category = $(".selectCategory").val();
  139.                     var categoryId = $(".selectCategory").attr('data-categoryId');
  141.                     var subject = $('body').find(".selectSubcategory:visible").val();
  142.                     var subjectId = $('body').find(".selectSubcategory:visible").attr('data-subcategoryId');
  144.                     var formData = new FormData(form[0]);
  145.                     formData.set('category', category);
  146.                     formData.set('categoryId', categoryId);
  147.                     formData.set('subject', subject);
  148.                     formData.set('subjectId', subjectId);
  150.                     $.ajax({
  151.                         type: 'POST',
  152.                         url: url,
  153.                         processData: false,
  154.                         contentType: false,
  155.                         data: formData,
  156.                         success: function(data)
  157.                         {
  158.                             var message = data.message
  159.                             var color = data.error == true ? '#DC143C' : '#556B2F';
  160.                             if (data.error != true){
  161.                                 $('#universalContentForm').hide('slow');
  163.                                 $('#universalContentForm input').each(function() {
  164.                                     $(this).val('');
  165.                                 });
  166.                                 $('#universalContentForm textarea').each(function() {
  167.                                     $(this).val('');
  168.                                 });
  170.                                 $('.messageBoxSuccess').text(message).css('color', color);
  171.                             }
  172.                             else{
  173.                                 $('.messageBox').text(message).css('color', color);
  174.                             }
  175.                         }
  176.                     });
  177.                 }
  178.                 return false;
  179.             });
  180.         });
  181.     </script>
  182.     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  183. {% endblock %}