shopPRO/templates/site/contact.php

<? global $settings, $lang, $config;?>
<? if (  $settings['google_maps'] and $settings['firm_adress'] ):?>
    <script class="footer" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&key=<?=$settings['google_map_key']?>"></script>
    <script class="footer" type="text/javascript">
      google.maps.event.addDomListener(window, 'load', init);
      function init() {
        var mapOptions = {
          zoom: 14,
          scrollwheel: false,
          styles: [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}]
        };
        var mapElement = document.getElementById('google-map');
        var map = new google.maps.Map(mapElement, mapOptions);

        var geocoder = new google.maps.Geocoder();
        var address = '<?= preg_replace( '/\s+/', ' ', $settings['firm_adress'] );?>';
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
    </script>
  <div id='google-map'></div>
<? endif;?>
<div class="row">
  <div class="col-12 col-md-6">
    <div id="contact-additional-info"><?= $settings['additional_info'];?></div>
  </div>
  <div class="col-12 col-md-6">
    <? if ( $settings['contact_form'] ):?>
      <form class="form-horizontal" id="contact-form">
        <div id="contact-form">
          <div class="form-group row">
            <div class="col-12">
              <input type='email' id="email" name="email" class="form-control" placeholder="<?= ucfirst( $lang['email'] );?> *" />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-12">
              <input type='text' id="phone" name="phone" class="form-control" placeholder="<?= ucfirst( $lang['nr-telefonu'] );?> *" />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-12">
              <input type='text' id="subject" name="subject" placeholder="<?= ucfirst( $lang['temat'] );?>" value="Zapytanie ze strony <?= preg_replace( '#^(http(s)?://)?w{3}\.#', '$1', $_SERVER['SERVER_NAME'] );?>" class="form-control" />
            </div>
          </div>
          <div class="form-group row">
            <div class="col-12">
              <textarea id="text" name="text" class="form-control" placeholder="<?= ucfirst( $lang['wiadomosc'] );?>"></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-12 small">
              <input type="checkbox" id="agreement" name="agreement" required="required" style="position: relative; top: 2px;" /> <?= $lang['kontakt-zgoda-checkbox'];?>
            </div>
          </div>
          <div class="form-group">
            <div class="col-xs-12">
              <a href="#" class='btn btn-success' id="contact-form-send" onclick="send_message(); return false;"><span class="text"><?= $lang['wyslij'];?></span></a>
            </div>
          </div>
        </div>
      </form>
    <? endif;?>
  </div>
</div>
<script type="text/javascript">
  function send_message()
  {
    var email   = $.trim( $( '#contact-form #email' ).val() );
    var phone   = $.trim( $( '#contact-form #phone' ).val() );
    var subject = $.trim( $( '#contact-form #subject' ).val() );
    var text    = $.trim( $( '#contact-form #text' ).val() );

    if ( email === '' && phone === '' )
    {
      $.alert(
      {
        title: '<?= ucfirst( $lang['blad'] );?>',
        content: '<?= $lang['prosze-uzupelnic-email-i-telefon'];?>',
        type: 'orange',
        closeIcon: true,
        closeIconClass: 'fas fa-close',
        typeAnimated: true,
        animation: 'opacity',
        useBootstrap: false,
        theme: 'modern',
        autoClose: 'confirm|10000',
        icon: 'fas fa-exclamation',
        buttons:
        {
          confirm:
          {
            text: '<?= $lang['zamknij'];?>',
            btnClass: 'btn-blue',
            keys: ['enter'],
            action: function() {}
          }
        }
      });
      return false;
    }

    if ( !$( '#contact-form #agreement' ).is( ':checked' ) )
    {
      $.alert(
      {
        title: '<?= ucfirst( $lang['blad'] );?>',
        content: '<?= $lang['prosze-zaznaczyc-zgode'];?>',
        type: 'orange',
        closeIcon: true,
        closeIconClass: 'fas fa-close',
        typeAnimated: true,
        animation: 'opacity',
        useBootstrap: false,
        theme: 'modern',
        autoClose: 'confirm|10000',
        icon: 'fas fa-exclamation',
        buttons:
        {
          confirm:
          {
            text: '<?= $lang['zamknij'];?>',
            btnClass: 'btn-blue',
            keys: ['enter'],
            action: function() {}
          }
        }
      });
      return false;
    }

    $.ajax(
    {
      type: 'POST',
      cache: false,
      url: 'ajax.php',
      data:
      {
        a: 'contact_form',
        email: email,
        phone: phone,
        subject: subject,
        text: text
      },
      beforeSend: function()
      {
        alert1 = $.alert(
        {
          title: '<?= ucfirst( $lang['informacja'] );?>',
          content: '<?= $lang['prosze-czekac'];?>',
          type: 'orange',
          closeIcon: true,
          closeIconClass: 'fas fa-close',
          typeAnimated: true,
          animation: 'opacity',
          useBootstrap: false,
          theme: 'modern',
          autoClose: 'confirm|10000',
          icon: 'fas fa-info',
          buttons:
          {
            confirm:
            {
              text: '<?= $lang['zamknij'];?>',
              btnClass: 'btn-blue',
              keys: ['enter'],
              action: function() {}
            }
          }
        });
      },
      success: function( data )
      {
        response = jQuery.parseJSON( data );

        if ( response.status === 'ok' )
          var msg = '<?= $lang['wiadomosc-zostala-wyslana'];?>';
        else
          var msg = '<?= $lang['wiadomosc-niezostala-wyslana'];?>';

        alert1.close();

        $( '#contact-formp-big #email, #contact-form-big #text' ).val( '' );

        $.alert(
        {
          title: '<?= ucfirst( $lang['informacja'] );?>',
          content: msg,
          type: 'orange',
          closeIcon: true,
          closeIconClass: 'fas fa-close',
          typeAnimated: true,
          animation: 'opacity',
          useBootstrap: false,
          theme: 'modern',
          autoClose: 'confirm|10000',
          icon: 'fas fa-info',
          buttons:
          {
            confirm:
            {
              text: '<?= $lang['zamknij'];?>',
              btnClass: 'btn-blue',
              keys: ['enter'],
              action: function() {}
            }
          }
        });
      }
    });
  }
</script>