1. Home
  2. Marco HTML
  3. Contact

Contact

We created contact page with page header, contact form with image and map. More information about page header you can find in “Elements” section.


Contact form

 
The contact form is structured with mail input, name input, phone input, message input and optionally image. If you want to have form without image, simply remove class “form-with-img”. To working form all you need to do is change email address in c-send.php.
 

...
   reservation.html

   CONTACT FORM
   <div class="form-container contact-container form-with-img"> 
       <div class="forms-style contact-form marco-form animate-text">
           <div class="form-wrapper">
	       <form name="c-form" id="c-form" action="c-send.php" method="POST">
		   <input type="hidden" name="action" value="contact_request">
		   <fieldset class="contact-details">
		       <div class="c-text email c-input mf-input">
			   <label for="c_email">Mail</label>
			   <input class="input-required" type="text" name="c[mail]" id="c_mail">
		       </div>
                   ...
   IMAGE FORM
   <div class="form-image">
       <div class="form-image-wrapper">
           <span class="img-wrapper">
	       <img src="image url" alt=""/>
	   </span>
	</div>
   </div>
   ...

   c-send.php
   /////////////////////////////////////
   // Change this email address ////////
   $email = "yourmail@mail.com";

   /////////////////////////////////////
...

Map settings

 
Marco offers the use of two different Google map implementations. The map you see in the demo is the google maps javascript API, which requires an API key but allows colour styling of the map, removal of obtrusive UI elements and specifying your own map marker, placed in multiple locations on the map but you can also use an iframe embedded map. More information about google map you can find here


javascript API map

 

API key

The first step is get API key, simply follow Google’s instructions here on how to obtain an API key.
 

...
   document.addEventListener('DOMContentLoaded', function () {
      if (document.querySelectorAll('#map').length > 0) {
	 if (document.querySelector('html').lang)
	     lang = document.querySelector('html').lang;
	 else
	     lang = 'pl';

	 var js_file = document.createElement('script');
	 js_file.type = 'text/javascript';
	 js_file.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&callback=initMap&language=' + lang;
	 document.getElementsByTagName('body')[0].appendChild(js_file);
	 document.getElementsByTagName('html')[0].classList += ' map-ready ';
       }
   });
...

 

Map set location and styles

 

...
     var markerPosition = new google.maps.LatLng(51.104411, 17.01300); <-- marker position
     var image = {
        path: 'M768 896q0 106 -75 181t-181 75t-181 -75t-75 -181t75 -181t181 -75t181 75t75 181zM1024 896q0 -109 -33 -179l-364 -774q-16 -33 -47.5 -52t-67.5 -19t-67.5 19t-46.5 52l-365 774q-33 70 -33 179q0 212 150 362t362 150t362 -150t150 -362z',
        fillColor: $('.mapMarkerColor').css('color'),
        fillOpacity: 1,
        scale: 0.03,
        strokeColor: 'black',
        strokeWeight: 0.2,
        rotation: 180
    };
    var mapOptions = {
        zoom: 17,
        center: new google.maps.LatLng(51.103994, 17.010588), <-- map position
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        disableDefaultUI: true,
        styles: [{stylers: [{saturation: -100}]}]
    };

    var map = new google.maps.Map(document.getElementById('map'),
            mapOptions);
    var marker = new google.maps.Marker({
    position: markerPosition,
    map: map,
    title:"Hello World!",
    icon: image
...

iframe embedded google map

 
To embed a simple map without requiring the use of a Google Maps API key, simply visit Google Maps and search for an address. When you have centered your map to your desired location and set the appropriate zoom level using the map controls, get the iframe embed code. At the bottom right-hand corner of the map, click the gear/cog symbol and choose Share or Embed Map. A new modal window appears – choose the tab at the top that says Embed Map and select the whole code in the given text box starting with <iframe … and ending with . Copy that to your to your clipboard with Ctrl+C (Windows) or Command+C (Mac) or right-click -> Copy on your mouse.
 
In Variant, click the pin icon at the top-right corner of the section containing the map and paste the code from Google Maps into the provided “Edit map Embed” box uaing Ctrl+V (Windows) or Command+V (Mac) or Right-click -> Paste on your mouse.
 
If editing HTML outside of Variant, simply replace the contents of the iframe src=” … ” attribute in the map section of your HTML markup with the contents of the src=” … ” attribute of the iframe you copied on Google Maps.

Was this article helpful to you? Yes No