templates/Informations/contactus.html.twig line 1

Open in your IDE?
  1. {% extends "layout/layout.html.twig" %}
  3. {% block title %}GFS::Contact Us
  4. {% endblock %}
  6. {% block content %}
  9.     <!--Start Main Slider-->
  10.     <section class="main-slider-section contact-slider-sec contactus-section-slider">
  11.         <div class="container container-lg">
  12.             <div class="custom-slider main-slider contact-slider">
  13.                 <div class="slide">
  14.                     <div class="slide-media slide-media-desktop">
  15.                         <video poster="/static/assets/images/Contact_us_desktop.jpg"></video>
  16.                     </div>
  18.                     <div class="slide-media slide-media-mobile">
  19.                         <video poster="/static/assets/images/Contact_us_mobile.jpg"></video>
  20.                     </div>
  21.                     <div class="silde-content-box">
  22.                         <div class="slide-content">
  23.                             {% if not editmode  %}
  24.                                 <h1>
  25.                                     <span class="title-sm d-block">{{pimcore_input('heading1')}}</span>
  26.                                     <span class="title-lg underline-end">{{pimcore_input('heading2')}}</span>
  27.                                 </h1>
  29.                             {% endif %}
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </section>
  36.     {% if editmode  %}
  37.         {{pimcore_input('heading1')}}
  38.         {{pimcore_input('heading2')}}
  40.     {% endif %}
  41.     <!--End Main Slider-->
  43.     <!--BreadCrumb Sec Start -->
  44.     <section class="bread-crumbs-section">
  45.         <div class="container container-lg">
  46.             <div class="bread-crumbs-section-box">
  47.                 <div class="breadcrumb-holder">
  48.                     <ol class="breadcrumb">
  49.                         <li class="breadcrumb-item">
  50.                             <a href="/{{app.request.locale}}">{{'Home'|trans}}</a>
  51.                         </li>
  52.                         <li class="breadcrumb-item">
  53.                             <a href="javascript:void(0);">{{'Contact Us'|trans}}</a>
  54.                         </li>
  55.                     </ol>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.     </section>
  60.     <!--Bread Crumb Sec End -->
  62.     <!--Contact Page Info Start -->
  63.     <section class="contact-info-sec">
  64.         <div class="container container-lg">
  65.             <div class="contact-info-box">
  66.                 <h2 class="text-center contact-info-box-head">
  67.                     {{'Partner with us now'|trans}}
  68.                 </h2>
  69.                 <p>
  70.                     {{'Intro_contact_uc'|trans}}
  71.                 </p>
  72.             </div>
  73.         </div>
  74.     </section>
  75.     <!--Contact Page Info End -->
  76. <script type="text/javascript">
  77.     /** This section is only needed once per page if manually copying **/
  78.     if (typeof MauticSDKLoaded == 'undefined') {
  79.         var MauticSDKLoaded = true;
  80.         var head            = document.getElementsByTagName('head')[0];
  81.         var script          = document.createElement('script');
  82.         script.type         = 'text/javascript';
  83.         script.src          = 'https://c2.goodycs.com/media/js/mautic-form.js?v3955f520';
  84.         script.onload       = function() {
  85.             MauticSDK.onLoad();
  86.         };
  87.         head.appendChild(script);
  88.         var MauticDomain = 'https://c2.goodycs.com';
  89.         var MauticLang   = {
  90.             'submittingMessage': "Please wait..."
  91.         }
  92.     }else if (typeof MauticSDK != 'undefined') {
  93.         MauticSDK.onLoad();
  94.     }
  95. </script>
  96. <script type="text/javascript">
  97.     function verifyCallback_a7935921bb730468414c0fdb3163543d( response ) {
  98.         document.getElementById("mauticform_input_goodycscontactusform_captcha").value = response;
  99.     }
  100.     function onLoada7935921bb730468414c0fdb3163543d() { 
  101.         grecaptcha.execute('6Le5OcAgAAAAANCPxYj-Tufd8ooE9d92HvhQNyac', {action: 'form'}).then(function(token) {
  102.             verifyCallback_a7935921bb730468414c0fdb3163543d(token);
  103.          }); 
  104.     }
  105. </script>
  106. <script src="https://www.google.com/recaptcha/api.js"></script>
  110. <style type="text/css" scoped>
  111.     .mauticform_wrapper { max-width: 600px; margin: 10px auto; }
  112.     .mauticform-innerform {}
  113.     .mauticform-post-success {}
  114.     .mauticform-name { font-weight: bold; font-size: 1.5em; margin-bottom: 3px; }
  115.     .mauticform-description { margin-top: 2px; margin-bottom: 10px; }
  116.     .mauticform-error { margin-bottom: 10px; color: red; }
  117.     .mauticform-message { margin-bottom: 10px;color: green; }
  118.     .mauticform-row { display: block; margin-bottom: 20px; }
  119.     .mauticform-label { font-size: 1.1em; display: block; font-weight: bold; margin-bottom: 5px; }
  120.     .mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline; }
  121.     .mauticform-helpmessage { display: block; font-size: 0.9em; margin-bottom: 3px; }
  122.     .mauticform-errormsg { display: block; color: red; margin-top: 0px; }
  123.     .mauticform-selectbox, .mauticform-input, .mauticform-textarea { width: 100%; padding: 0.5em 0.5em; border: 1px solid #CCC; background: #fff; box-shadow: 0px 0px 0px #fff inset; border-radius: 4px; box-sizing: border-box; }
  124.     .mauticform-checkboxgrp-row {}
  125.     .mauticform-checkboxgrp-label { font-weight: normal; }
  126.     .mauticform-checkboxgrp-checkbox {}
  127.     .mauticform-radiogrp-row {}
  128.     .mauticform-radiogrp-label { font-weight: normal; }
  129.     .mauticform-radiogrp-radio {}
  130.     .mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default { color: #5d6c7c;background-color: #ffffff;border-color: #dddddd;}
  131.     .mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak { display: inline-block;margin-bottom: 0;font-weight: 600;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 13px;line-height: 1.3856;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
  132.     .mauticform-button-wrapper .mauticform-button.btn-default[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default[disabled] { background-color: #ffffff; border-color: #dddddd; opacity: 0.75; cursor: not-allowed; }
  133.     .mauticform-pagebreak-wrapper .mauticform-button-wrapper {  display: inline; }
  134. </style><style type="text/css" scoped>
  135.     .mauticform-field-hidden { display:none }
  136. </style>
  139.     <!-- Contact Form Map Start -->
  140.     <section class="contact-form-map-sec position-bg-img">
  141.     
  142.             <div class="mauticform-error alert-success" id="mauticform_goodycscontactusform_error"></div>
  143.             <div class="mauticform-message alert-success" id="mauticform_goodycscontactusform_message"></div>
  144.                 
  145.         <div class="container container-sm">
  146.             <div class="contact-form-map-wrap">
  147.                 <div class="contact-form-wrap">
  148.                     <div class="contact-form-wrap-content">
  149.                         <h4>{{pimcore_input('SectionTitle',{
  150.                             "placeholder":"Get in touch with us"
  151.                             })}}
  152.                         </h4>
  153.                         <p>
  154.                             {{ pimcore_textarea("description",{
  155.                                 "nl2br": true,
  156.                                 "height": 200,
  157.                                 "placeholder": "Description ...press enter for new line..."
  158.                             }) }}
  159.                         </p>
  160.                     </div>
  161.                     <div class="contact-form-wrap-form">
  162.                         {# <form method="POST" action="/contact-form" id="submitForm"> #}
  163.                             <form autocomplete="false" role="form" method="post" action="https://c2.goodycs.com/form/submit?formId=1" id="mauticform_goodycscontactusform" data-mautic-form="goodycscontactusform" enctype="multipart/form-data">
  164.                             <div class="row">
  165.                                 <div class="col-md-6">
  166.                                      <div id="mauticform_goodycscontactusform_first_name" data-validate="first_name" data-validation-type="text" class="first-last mauticform-row mauticform-text mauticform-field-1 mauticform-required">
  167.                                         <input id="mauticform_input_goodycscontactusform_first_name" name="mauticform[first_name]" value="" placeholder="{{"First Name" | trans}}*" class="mauticform-input" type="text">
  168.                                            <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>
  169.                                     </div>    
  170.                                 </div>
  171.                                 <div class="col-md-6">
  172.                                     <div id="mauticform_goodycscontactusform_last_name" data-validate="last_name" data-validation-type="text" class="first-last mauticform-row mauticform-text mauticform-field-2 mauticform-required">
  173.                                         <input id="mauticform_input_goodycscontactusform_last_name" name="mauticform[last_name]" value="" placeholder="{{"Last Name" | trans}}*" class="mauticform-input" type="text">
  174.                                         <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>
  175.                                     </div>
  176.                                 
  177.                                 </div>
  178.                                 <div class="col-md-6">
  179.                                     <div id="mauticform_goodycscontactusform_number" data-validate="number" data-validation-type="number" class="first-last mauticform-row mauticform-number mauticform-field-3 mauticform-required">
  180.                                         <input id="mauticform_input_goodycscontactusform_number" name="mauticform[number]" value="" placeholder="{{"Number" | trans}}*" class="mauticform-input" type="number">
  181.                                         <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>
  182.                                     </div>
  183.                                 </div>
  184.                                 <div class="col-md-6">
  185.                                     <div id="mauticform_goodycscontactusform_email" data-validate="email" data-validation-type="email" class="first-last mauticform-row mauticform-email mauticform-field-4 mauticform-required">
  186.                                         {# <input type="email" placeholder="{{'Email'|trans}}*" name="email" required/> #}
  187.                                         <input id="mauticform_input_goodycscontactusform_email" name="mauticform[email]" value="" placeholder="{{"Email" | trans}}*" class="mauticform-input" type="email">
  188.                                         <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>
  189.                                     </div>
  190.                                 </div>
  191.                                 <div class="col-md-6">
  192.                                     <div id="mauticform_goodycscontactusform_country" data-validate="country" data-validation-type="country" class="first-last mauticform-row mauticform-select mauticform-field-5 mauticform-required">
  193.                                     <select id="mauticform_input_goodycscontactusform_country" name="mauticform[country]" value="" placeholder="{{"Country" | trans}}*" class="mauticform-selectbox">                    
  194.                                         <option value="">{{"Country" | trans}}</option> 
  195.                                         {% for countries in countries %}
  196.                                             <option value="{{countries}}">{{countries}}</option>
  197.                                         {% endfor %}
  198.                                     </select>
  199.                                     <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>    
  200.                                     </div>
  201.                                 </div>
  202.                                 <div class="col-md-6">
  203.                                     <div id="mauticform_goodycscontactusform_nationality" data-validate="nationality" data-validation-type="country" class="first-last mauticform-row mauticform-select mauticform-field-6 mauticform-required">
  204.                                         <select id="mauticform_input_goodycscontactusform_nationality" name="mauticform[nationality]" value="" placeholder="{{"Nationality" | trans}}*" class="mauticform-selectbox">                    
  205.                                         <option value="">{{"Nationality" | trans}}</option>
  206.                                         {% for countries in countries %}
  207.                                             <option value="{{countries}}">{{countries}}</option>
  208.                                         {% endfor %}
  209.                                         </select>
  210.                                         <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>
  211.                                     </div>
  212.                                 </div>
  213.                                 <div class="col-md-12">
  214.                                      <div id="mauticform_goodycscontactusform_comments" data-validate="comments" data-validation-type="textarea" class="first-last mauticform-row mauticform-text mauticform-field-7 mauticform-required">
  215.                                         {# <textarea name="comments" placeholder="{{'Comments'|trans}}*" required id="comments" cols="100" rows="4"></textarea> #}
  216.                                          <textarea id="mauticform_input_goodycscontactusform_comments" name="mauticform[comments]" class="mauticform-textarea" placeholder="{{"Comments" | trans}}*"></textarea>
  217.                                         <span class="text-danger error-color mauticform-errormsg" style="display: none;">{{ "This is required." | trans }}</span>
  218.                                     </div>
  219.                                 </div>
  220.                                 <span class="alert-message text-dark"></span>
  221.                             </div>
  222.                             <div class="first-last ">
  223.                                 {# <h3>SPACE LEFT FOR RECAPTCHA</h3> #}
  224.                             <div id="mauticform_goodycscontactusform_captcha" class="mauticform-row mauticform-div-wrapper mauticform-field-8">
  225.                                 <div class="g-recaptcha" data-sitekey="6Le5OcAgAAAAANCPxYj-Tufd8ooE9d92HvhQNyac" data-callback="verifyCallback_a7935921bb730468414c0fdb3163543d"></div>        <input id="mauticform_input_goodycscontactusform_captcha" name="mauticform[captcha]" value="" class="mauticform-input" type="hidden">
  226.                                 <span class="mauticform-errormsg" style="display: none;"></span>
  227.                             </div>
  228.                             </div>
  229.                             <div class="first-last">
  230.                             
  231.                                 <div class="btn-holder">
  232.                                     <div class="btn-holder btn-border btn-border-black">
  233.                                         
  234.                                         <button type="submit" name="mauticform[submit]" id="mauticform_input_goodycscontactusform_submit" value="" class="mauticform-button btn btn-default btn btn-custom btn-green w-100">{{'Submit '|trans}}</button>
  235.                                     </div>
  236.                                     <input type="hidden" name="mauticform[formId]" id="mauticform_goodycscontactusform_id" value="1">
  237.                                 <input type="hidden" name="mauticform[return]" id="mauticform_goodycscontactusform_return" value="">
  238.                                 <input type="hidden" name="mauticform[formName]" id="mauticform_goodycscontactusform_name" value="goodycscontactusform">
  239.                                 </div>
  240.                                 <div class="follow-links">
  241.                                     <h5>{{'Follow us'|trans}}
  242.                                         @</h5>
  243.                                     <ul
  244.                                         class="follow-links-icons">
  245.                                 
  246.                                         <li>
  247.                                             <a href="https://twitter.com/gfs_ksa?s=11" target="_blank" rel="noopener noreferrer"><img src="/static/assets/images/twitter-follow.svg" alt="Twitter"/></a>
  248.                                         </li>
  249.                                         <li>
  250.                                             <a href="https://www.instagram.com/goodyculinarysolutions/" target="_blank" rel="noopener noreferrer"><img src="/static/assets/images/instagram-follow.svg" alt="Instagram"/></a>
  251.                                         </li>
  252.                                         <li class="d-none">
  253.                                             <a href="https://www.youtube.com/channel/UCohd1ZEJbFo1bSLnPf-RA3A" target="_blank" rel="noopener noreferrer"><img src="/static/assets/images/youtube.svg" alt="Youtube"/></a>
  254.                                         </li>
  255.                                         <li class="">
  256.                                             <a href="https://www.linkedin.com/company/goody-professional-solutions" target="_blank" rel="noopener noreferrer"><img src="/static/assets/images/Icon-zocial-linkedin.svg" alt="LinkedIn"/></a>
  257.                                         </li>
  258.                                     </ul>
  259.                                 </div>
  260.                             </div>
  261.                         </form>
  262.                     </div>
  263.                 </div>
  264.                 <div class="contact-map-wrap">
  265.                     <div class="contact-map-content">
  266.                         <div class="mapouter">
  267.                             <div
  268.                                 class="gmap_canvas">
  269.                                 {# <iframe width="100%" height="100%" id="gmap_canvas"
  270.                                                                                                                                                                                                                                                                                                                                                                                                                     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14932250.13730393!2d36.03708020739908!3d23.975680578701084!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15e7b33fe7952a41%3A0x5960504bc21ab69b!2sSaudi%20Arabia!5e0!3m2!1sen!2s!4v1639398984806!5m2!1sen!2s" frameborder="0"
  271.                                                                                                                                                                                                                                                                                                                                                                                                                     scrolling="no" marginheight="0" marginwidth="0"></iframe> #}
  272.                                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3710.823643355619!2d39.16952211425474!3d21.553750075025775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x15c3d0171467aca7%3A0x7f483ca02d8ae3e9!2sAl%20Dousari%2C%20Al%20Andalus%2C%20Jeddah%2023326%2C%20Saudi%20Arabia!5e0!3m2!1sen!2s!4v1642159647708!5m2!1sen!2s" width="100%" height="100%" id="gmap_canvas"></iframe>
  273.                                 {# <iframe width="100%" height="100%" id="gmap_canvas"
  274.                                                                                                                                                                                                                                                                                                                                                                                                                     src="https://www.google.com/maps/place/Al+Dousari,+Al+Andalus,+Jeddah+23326,+Saudi+Arabia/@21.5537501,39.1695221,17z/data=!3m1!4b1!4m8!1m2!2m1!1sUnit+%231,+Ad+Dawsari+%E2%80%93+Al+Andalus+P.O.+Box+3813+Jeddah+23326+Kingdom+of+Saudi+Arabia!3m4!1s0x15c3d0171467aca7:0x7f483ca02d8ae3e9!8m2!3d21.5537451!4d39.1717108!5m1!1e1" frameborder="0"
  275.                                                                                                                                                                                                                                                                                                                                                                                                                     scrolling="no" marginheight="0" marginwidth="0"></iframe> #}
  277.                             </div>
  278.                         </div>
  279.                     </div>
  280.                 </div>
  281.             </div>
  282.         </div>
  283.         {% include "layout/baseimage.html.twig" %}
  284.     </section>
  285.     {{ pimcore_areablock("content") }}
  286.     {% if (app.request.locale =='ar') %}
  287.         {% set topMenu ="/en/contact-us" %}
  288.     {% else %}
  289.         {% set topMenu ="/ar/contact-us" %}
  290.     {% endif %}
  291.     <!-- Contact Form Map End -->
  292.     <script>
  293.         $("#submitForm").submit(function (event) {
  294.             event.preventDefault();
  295.             var post_url = $(this).attr("action"); // get form action url
  296.             var request_method = $(this).attr("method"); // get form GET/POST method
  297.             console.log(post_url);
  298.             console.log(request_method);
  299.             form_data = new FormData(this);
  300.             $.ajax({
  301.             url: post_url,
  302.             type: request_method,
  303.             data: form_data,
  304.             contentType: false,
  305.             cache: false,
  306.             processData: false,
  307.             success: function (response) {
  308.             if (response.success == 2) {
  309.                     
  310.             document.getElementById('submitForm').reset();
  311.             
  312.             $('.alert-message').html('{{ "Thank you for your query. Our representatives will respond to your query very soon."|trans }}');
  313.             $('#submitForm').trigger("reset");
  314.             $(".alert-message").delay(5000).slideUp(500);
  315.             }else if (response.success == 1){
  316.             $('.alert-message').html('{{ "Please check the the captcha form."|trans }}');
  317.             $('#submitForm').trigger("reset");
  318.             $(".alert-message").delay(5000).slideUp(500);
  320.             } else {
  321.             $('.alert-message').html('Oops! Please try again');
  322.             }
  323.             }
  324.             });
  326.             });
  327. var _TopMenuLink = "{{ topMenu }}";
  328.     </script>
  329. {% endblock %}
  330. {% block footer %}
  331.     {% include "includes/footer.html.twig" %}
  332. {% endblock %}