templates/includes/contact_us_new_c2_form.html.twig line 1

Open in your IDE?
  1. <style type="text/css" scoped>
  2.   .mauticform-error {
  3.     margin-bottom: 10px;
  4.     color: red;
  5.   }
  6.   .mauticform-message {
  7.     margin-bottom: 10px;
  8.     color: green;
  9.   }
  10.   .mauticform-errormsg {
  11.     display: block;
  12.     color: red;
  13.     margin-top: 2px;
  14.   }
  15.   .mauticform-field-hidden {
  16.     display: none;
  17.   }
  18. </style>
  20. <!-- Row -->
  21. <div class="content-row full light-section change-header-color" data-bgcolor="#fff"></div>
  22. <!-- /Row -->
  24. <!-- Contact Form Start -->
  25. <div data-bgcolor="#fff" class="light-section row_padding_top row_padding_bottom change-header-color our-product-N contact-brew-wrapper" id = "lets-talk">
  26.   {# <hr />
  27.   <br />
  29.   <h2 class="has-mask-fill no-margins">Get</h2>
  30.   <h2 class="has-mask-fill">In Touch</h2> #}
  32.   <!-- Row -->
  33.   <!-- <h6 class="has-icon">Let's Talk</h6> -->
  35.   {# <br /> #}
  36.   <!-- /Row -->
  37.   <div class="contact-layout">
  38.     <div class="contact-cup">
  39.       <h3>
  40.         <svg id="Group_606" data-name="Group 606" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.519" height="22.46" viewbox="0 0 21.519 22.46">
  41.           <defs>
  42.             <clipPath id="clip-path">
  43.               <rect id="Rectangle_152" data-name="Rectangle 152" width="21.519" height="22.46" />
  44.             </clipPath>
  45.           </defs>
  46.           <g id="Group_605" data-name="Group 605" clip-path="url(#clip-path)">
  47.             <path id="Path_184" data-name="Path 184" d="M12.306,93.011H9.251a6.9,6.9,0,0,1-6.809-5.724L1.411,81.382A1.175,1.175,0,0,1,2.571,80H18.988a1.175,1.175,0,0,1,1.159,1.378l-1.03,5.905a6.9,6.9,0,0,1-6.81,5.724M2.785,81.361l.994,5.693a5.544,5.544,0,0,0,5.472,4.6h3.055a5.545,5.545,0,0,0,5.473-4.6l.993-5.693Z" transform="translate(-1.275 -73.176)" />
  48.             <path id="Path_185" data-name="Path 185" d="M200.519,98.918a2.36,2.36,0,0,1,3.343.009,3.091,3.091,0,0,1,.195,3.665,2.935,2.935,0,0,1-2.608,1.446,4.348,4.348,0,0,1-1.328-.221l.415-1.291a1.838,1.838,0,0,0,2.373-2.633,1.008,1.008,0,0,0-1.463.015Z" transform="translate(-183.04 -89.84)" />
  49.             <path id="Path_186" data-name="Path 186" d="M65.228,5.977a.674.674,0,0,1-.574-.321,3.1,3.1,0,0,1-.409-1.512,3.1,3.1,0,0,1,.409-1.512,1.761,1.761,0,0,0,.209-.8,1.759,1.759,0,0,0-.208-.8A.679.679,0,0,1,65.808.32a3.086,3.086,0,0,1,.411,1.513,3.075,3.075,0,0,1-.411,1.512,1.769,1.769,0,0,0-.207.8,1.762,1.762,0,0,0,.211.8.681.681,0,0,1-.584,1.028" transform="translate(-58.761 0)" />
  50.             <path id="Path_187" data-name="Path 187" d="M100.761,5.977a.673.673,0,0,1-.574-.321,3.077,3.077,0,0,1-.411-1.512,3.077,3.077,0,0,1,.411-1.512,1.765,1.765,0,0,0,.208-.8,1.759,1.759,0,0,0-.208-.8A.679.679,0,0,1,101.342.32a3.086,3.086,0,0,1,.411,1.513,3.075,3.075,0,0,1-.411,1.512,1.765,1.765,0,0,0-.208.8,1.765,1.765,0,0,0,.211.8.681.681,0,0,1-.584,1.028" transform="translate(-91.261 0)" />
  51.             <path id="Path_188" data-name="Path 188" d="M136.3,5.977a.673.673,0,0,1-.574-.321,3.077,3.077,0,0,1-.411-1.512,3.077,3.077,0,0,1,.411-1.512,1.764,1.764,0,0,0,.208-.8,1.758,1.758,0,    0,0-.208-.8A.679.679,0,0,1,136.883.32a3.086,3.086,0,0,1,.411,1.513,3.075,3.075,0,0,1-.411,1.512,1.765,1.765,0,0,0-.208.8,1.765,1.765,0,0,0,.211.8.681.681,0,0,1-.584,1.028" transform="translate(-123.768 0)" />
  52.             <path id="Path_189" data-name="Path 189" d="M18.329,248.611H.678a.678.678,0,1,1,0-1.357H18.329a.678.678,0,1,1,0,1.357" transform="translate(0 -226.151)" />
  53.           </g>
  54.         </svg>Contact us
  55.       </h3>
  57.       <img src="/assets/images/coffee_cup_2x.png" alt="coffee_cup_2x" />
  59.       <div class="cup-smoke" id="viewport"></div>
  61.       <p class="has-animation" data-delay="0">Spanning 8 cities worldwide and with partners in 100 more, we’re your local yet global agency.</p>
  62.       <p class="has-animation" data-delay="0">Fancy a coffee, virtual or physical? It’s on us – let’s connect!</p>
  63.     </div>
  65.     <div class="contact-main">
  66.       <!-- Row -->
  68.       <!-- Contact Formular -->
  69.       <div id="contact-formular">
  70.         <br />
  71.         <br />
  72.         <br />
  73.         <div id="message"></div>
  74.         <form autocomplete="false" role="form" method="post" action="https://c2.centricdxb.com/form/submit?formId=1" id="mauticform_centricv2contactform" data-mautic-form="centricv2contactform" enctype="multipart/form-data">
  75.           <div class="mauticform-innerform">
  76.             <div class="mauticform-page-wrapper mauticform-page-1" data-mautic-form-page="1">
  77.               <div id="mauticform_centricv2contactform_first_name" data-validate="first_name" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-1 mauticform-required input-box has-animation">
  78.                 <input id="mauticform_input_centricv2contactform_first_name" name="mauticform[first_name]" value="" placeholder="First Name" class="mauticform-input" type="text" />
  79.                 <span class="mauticform-errormsg" style="display: none">Please enter your first name</span>
  80.               </div>
  82.               <div id="mauticform_centricv2contactform_last_name" data-validate="last_name" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-2 mauticform-required input-box has-animation">
  83.                 <input id="mauticform_input_centricv2contactform_last_name" name="mauticform[last_name]" value="" placeholder="Last Name" class="mauticform-input" type="text" />
  84.                 <span class="mauticform-errormsg" style="display: none">Please enter your last name</span>
  85.               </div>
  87.               <div id="mauticform_centricv2contactform_company" data-validate="company" data-validation-type="text" class="mauticform-row mauticform-text mauticform-field-4 mauticform-required input-box has-animation">
  88.                 <input id="mauticform_input_centricv2contactform_company" name="mauticform[company]" value="" placeholder="Company" class="mauticform-input" type="text" />
  89.                 <span class="mauticform-errormsg" style="display: none">Please enter your company</span>
  90.               </div>
  92.               <div id="mauticform_centricv2contactform_email" data-validate="email" data-validation-type="email" class="mauticform-row mauticform-email mauticform-field-3 mauticform-required left-input-box has-animation">
  93.                 <input id="mauticform_input_centricv2contactform_email" name="mauticform[email]" value="" placeholder="Email" class="mauticform-input" type="email" />
  94.                 <span class="mauticform-errormsg" style="display: none">Please enter your email</span>
  95.               </div>
  97.               <div id="mauticform_centricv2contactform_contact" data-validate="contact" data-validation-type="tel" class="mauticform-row mauticform-tel mauticform-field-5 mauticform-required right-input-box has-animation">
  98.                 <input id="mauticform_input_centricv2contactform_contact" name="mauticform[contact]" value="" placeholder="Phone" class="mauticform-input" type="tel" />
  99.                 <span class="mauticform-errormsg" style="display: none">Please enter your Phone number</span>
  100.               </div>
  102.               <div class="input-box" data-delay="150">
  103.                 <!-- dropdown here -->
  104.                 <select id="mauticform_input_centricv2contactform_potential" name="mauticform[potential]" value="I am a Potential" class="mauticform-selectbox custom-dropdown">
  105.                   <option value="Null">I am a potential...</option>
  107.                   <option value="Customer">Customer</option>
  108.                   <option value="Supplier">Supplier</option>
  109.                   <option value="Job Seeker">Job Seeker</option>
  110.                 </select>
  111.               </div>
  113.               <div id="mauticform_centricv2contactform_f_message" data-validate="f_message" data-validation-type="textarea" class="mauticform-row mauticform-text mauticform-field-7 mauticform-required message-box has-animation">
  114.                 <textarea id="mauticform_input_centricv2contactform_f_message" placeholder="Message" name="mauticform[f_message]" class="mauticform-textarea"></textarea>
  115.                 <span class="mauticform-errormsg" style="display: none">Please enter your message</span>
  116.               </div>
  118.               <div id="mauticform_centricv2contactform_recaptcha" class="mauticform-row mauticform-div-wrapper mauticform-field-8 verify-box has-animation">
  119.                 <div class="g-recaptcha" data-sitekey="6Lc2TAslAAAAAJ5_ZDO6X_FSikn_4WAI4T7gO0rg" data-callback="verifyCallback_a52ce9c516ad1ac1f92be0b29b0831a5"></div>
  120.                 <input id="mauticform_input_centricv2contactform_recaptcha" name="mauticform[recaptcha]" value="" class="mauticform-input" type="hidden" />
  121.                 <span class="mauticform-errormsg" style="display: none"></span>
  122.               </div>
  124.               <div id="mauticform_centricv2contactform_submit" class="mauticform-row mauticform-button-wrapper mauticform-field-9 button-box has-animation">
  125.                 <div class="clapat-button-wrap parallax-wrap">
  126.                   <div class="clapat-button parallax-element">
  127.                     <div class="button-border outline parallax-element-second">
  128.                       <input type="submit" name="mauticform[submit]" id="mauticform_input_centricv2contactform_submit" value="Submit" class="mauticform-button send_message" />
  129.                     </div>
  130.                   </div>
  131.                 </div>
  132.               </div>
  133.             </div>
  134.           </div>
  135.           <div class="mauticform-error" id="mauticform_centricv2contactform_error"></div>
  136.           <div class="mauticform-message" id="mauticform_centricv2contactform_message"></div>
  137.           <input type="hidden" name="mauticform[formId]" id="mauticform_centricv2contactform_id" value="1" />
  138.           <input type="hidden" name="mauticform[return]" id="mauticform_centricv2contactform_return" value="" />
  139.           <input type="hidden" name="mauticform[formName]" id="mauticform_centricv2contactform_name" value="centricv2contactform" />
  140.         </form>
  141.       </div>
  142.       <hr />
  144.       <!-- /Contact Formular -->
  145.       <!-- /Row -->
  146.     </div>
  148.     <!-- Locations included here starts -->
  149.     {# {{ pimcore_inc(document.getProperty("location")) }} #}
  150.     <!-- Locations included here starts -->
  151.   </div>
  152. </div>
  153. <!-- Contact Form End -->
  155. <script type="text/javascript">
  156.   /** This section is only needed once per page if manually copying **/
  157.   if (typeof MauticSDKLoaded == 'undefined') {
  158.     var MauticSDKLoaded = true
  159.     var head = document.getElementsByTagName('head')[0]
  160.     var script = document.createElement('script')
  161.     script.type = 'text/javascript'
  162.     script.src = 'https://c2.centricdxb.com/media/js/mautic-form.js?v0c32cac9'
  163.     script.onload = function () {
  164.       MauticSDK.onLoad()
  165.     }
  166.     head.appendChild(script)
  167.     var MauticDomain = 'https://c2.centricdxb.com'
  168.     var MauticLang = {
  169.       submittingMessage: 'Please wait...'
  170.     }
  171.   } else if (typeof MauticSDK != 'undefined') {
  172.     MauticSDK.onLoad()
  173.   }
  174. </script>
  175. <script type="text/javascript">
  176.   function verifyCallback_a52ce9c516ad1ac1f92be0b29b0831a5(response) {
  177.     document.getElementById('mauticform_input_centricv2contactform_recaptcha').value = response
  178.   }
  179.   function onLoada52ce9c516ad1ac1f92be0b29b0831a5() {
  180.     grecaptcha
  181.       .execute('6Lc2TAslAAAAAJ5_ZDO6X_FSikn_4WAI4T7gO0rg', {
  182.         action: 'form'
  183.       })
  184.       .then(function (token) {
  185.         verifyCallback_a52ce9c516ad1ac1f92be0b29b0831a5(token)
  186.       })
  187.   }
  188. </script>
  190. <script>
  191.   ;(function () {
  192.     'use strict'
  193.   
  194.     var i = 0
  195.     for (; i < 5; i += 1) {
  196.       setTimeout(function addSmoke() {
  197.         var time = Math.random() * 1000 + 3000,
  198.           smoke = $('<div />', {
  199.             class: 'smoke',
  200.             css: {
  201.               opacity: 0,
  202.               left: $(window).width() > 620 ? Math.random() * 175 : Math.random() * 100
  203.             }
  204.           })
  205.   
  206.         $(smoke).append('<img src="/assets/images/smoke-effect.png" alt="smoke effect"/>')
  207.         // add to viewport
  208.         $(smoke).appendTo('#viewport')
  209.   
  210.         // animate
  211.         $.when(
  212.           // animate to 100% opacity in half the time (fade in)
  213.           $(smoke).animate(
  214.             {
  215.               opacity: 1
  216.             },
  217.             {
  218.               duration: time / 2,
  219.               easing: 'linear',
  220.               queue: false,
  221.   
  222.               // animate to 0% opacity in the remaining time (fade out)
  223.               complete: function () {
  224.                 $(smoke).animate(
  225.                   {
  226.                     opacity: 0
  227.                   },
  228.                   {
  229.                     duration: time / 2,
  230.                     easing: 'linear',
  231.                     queue: false
  232.                   }
  233.                 )
  234.               }
  235.             }
  236.           ),
  237.   
  238.           // animate movement
  239.           $(smoke).animate(
  240.             {
  241.               bottom: $('#viewport').height()
  242.             },
  243.             {
  244.               duration: time,
  245.               easing: 'linear',
  246.               queue: false
  247.             }
  248.           )
  249.   
  250.           // when all down, remove and add new random smoke
  251.         ).then(function () {
  252.           $(smoke).remove()
  253.           addSmoke()
  254.         })
  255.       }, Math.random() * 10000)
  256.     }
  257.   })()
  258. </script>
  260. <script src="https://www.google.com/recaptcha/api.js" defer></script>