В этом уроке мы научим вас, как создать страницу контактов на вашем веб-сайте, которая конвертирует. С таким количеством страниц с контактными данными в Интернете трудно выделиться, а в такой конкурентной онлайн-среде выделение имеет решающее значение. Иногда это мелочи, детали, которые отличают одну страницу контактов от другой. В этом случае интеграция с Google Maps и предоставление страницы контактов с нами на основе местоположения — это та разница, которая произведет впечатление на посетителей вашего сайта, а не утомит их.
Ниже приведены HTML, JavaScript и CSS, необходимые для создания впечатляющей страницы контактов с нами на вашем веб-сайте, которая конвертируется. Наслаждаться.
Шаг 1
Добавьте приведенный ниже HTML-код на страницу, на которую вы хотите добавить страницу «Свяжитесь с нами».
<div class="container paddingContact-container">
<div class="row">
<div class="col-md-12">
<h1 class="white">
Let's Get Started!
</h1>
<p>
Contact us today to discuss your next online project.
</p>
</div>
</div>
</div>
<div class="parallax texture" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/hero-slider/slide1.jpg);">
</div>
<!-- contact-form -->
<div class="container form">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="form-group col-md-12">
<h2>Tell us About Yourself</h2>
<p style="color: #000000">Contact us today to discuss how Big Data can help your company!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control-group">
<label>First Name</label>
<input type="text" class="demo-default form-control" placeholder="First Name">
</div>
<div class="control-group">
<label>Last Name</label>
<input type="text" class="demo-default form-control" placeholder="Last Name">
</div>
<div class="control-group">
<label>Company</label>
<input type="text" class="demo-default form-control" placeholder="Company">
</div>
<div class="control-group">
<label>Phone #</label>
<input type="text" class="demo-default form-control" placeholder="Phone #">
</div>
<div class="control-group">
<label>Email</label>
<input type="text" class="demo-default form-control" placeholder="[email protected]">
</div>
<div class="control-group">
<label for="select-beast">I'm Interested In:</label>
<select id="select-beast" class="demo-default" placeholder="Select a service...">
<option value="">Select a service...</option>
<option value="4">Digital Marketing</option>
<option value="1">Social Media</option>
<option value="3">E-Commerce</option>
<option value="5">Mobile Advertising</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-12 text-center">
<input type="submit" class="btn btn-primary" value="Contact Us">
</div>
</div>
</div>
<div class="col-md-5 contact-right-info">
<h3>ORLANDO OFFICE</h3>
<p style="color: #000000">123 Open Door Road Suite 1200<br />
Orlando, FL 30030<br />
<a href="tel:4078981961">407.555.1961</a>
</p>
<h3>EMAIL ADDRESS</h3>
<a href="[email protected]">[email protected]</a>
<h3>SUPPORT</h3>
<a href="tel:8005551656">800.555.1656</a><br />
<a href="[email protected]">[email protected]</a>
</div>
</div>
</div>
<!-- contact-map -->
<div class="container">
<div class="map-overlay">
<h3>Changing the digital landscape one client at a time.</h3>
<p>WebCorpCo specializes in taking your businesses data and turning it into a wide range of insights that help drive intelligent business decisions.</p>
<a href="https://www.google.com/maps/place/800+N+Magnolia+Ave,+Orlando,+FL+32803/@28.5556405,-81.3775403,17z/data=!3m1!4b1!4m2!3m1!1s0x88e77af15a1459a5:0xa114b20cc1cdb19d" style="color: #d2282e;" target="_blank">Directions to WebCorpCo</a>
</div>
</div>
<div class="map-area">
<div id="map-canvas" style="height: 750px; width: 100%;">
</div>
</div>
Шаг 2
Добавьте приведенный ниже CSS в таблицу стилей вашего веб-сайта.
.paddingContact-container {
padding: 68px 15px 72px !important;
}
.container h1.white, .company-heading h1 {
font-family: "proxima-nova", sans-serif;
font-weight: 100 !important;
text-transform: capitalize;
font-size: 65px;
margin-bottom: 20px;
}
.control-group {
margin-bottom: 15px;
}
.form {
margin-top: 25px;
margin-bottom: 25px;
}
.white {
color: #fff;
}
.container p {
font-style: normal !important;
color: #fff;
font-size: 20px;
letter-spacing: 0px;
}
.theme-selector {
display: none;
}
.contact-page-form h3 {
font-size: 26px;
font-weight: bold;
text-transform: capitalize;
}
.parallax {
background-attachment: inherit !important;
}
.parallax {
background-attachment: inherit !important;
background-repeat: repeat;
background-size: cover;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
z-index: -10;
height: 300px
}
h3 {
font-size: 20px;
margin: 35px 0px 25px;
font-weight: 800;
color: #3d3d3d;
text-transform: uppercase;
}
.map-overlay h3 {
color: #fff;
border-bottom: 2px solid #d2282e;
padding-bottom: 15px;
}
.map-overlay {
background: #000;
-webkit-box-shadow: 0px 1px 10px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 10px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 10px rgba(50, 50, 50, 0.75);
width: 500px;
height: 320px;
position: relative;
float: left;
z-index: 300;
left: 0px;
top: 675px;
padding: 25px;
margin-top: -550px;
border: 3px solid #fff;
}
.marginBottom40 {
margin-bottom: 40px;
}
.map-overlay p {
color: #fff;
}
.btn-primary {
width: 100%;
}
.contact-right-info {
margin-bottom: 25px;
}
@media only screen and (max-width: 991px) {
.contact-right-info {
text-align: center;
}
}
@media only screen and (min-width: 992px) {
.contact-right-info {
text-align: left;
}
.map-overlay {
left: 0px;
}
}
Шаг 3
Зарегистрируйте свою компанию в Google, чтобы получить бесплатный ключ API Карт Google.
Перейдите по этой ссылке и зарегистрируйте свою компанию, чтобы получить необходимый ключ API, чтобы включить нашу пользовательскую интеграцию с Google Maps на вашей веб-странице Свяжитесь с нами.
Шаг 4
Измените приведенный ниже код JavaScript (служебный адрес, ключ API) и укажите ссылку на код JavaScript на странице контактов с нами.
$('#select-beast').selectize({
create: true,
sortField: {
field: 'text',
direction: 'asc'
},
dropdownParent: 'body'
});
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(28.9913522, -85.4145614),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false
};
var styles = [
{
stylers: [
{saturation: -100}
]
}
];
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapType = new google.maps.StyledMapType(styles, {name: "Grayscale"});
map.mapTypes.set('grayMap', mapType);
map.setMapTypeId('grayMap');
var myLatlng = new google.maps.LatLng(28.5556405, -81.3775403);
var imgWebCorpCo = {
url: '/_resources/images/content/marker.png',
size: new google.maps.Size(244, 182),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(24, 54)
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'WebCorpCo',
icon: imgWebCorpCo
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
//script.src = 'http://maps.google.com/maps/api/js?sensor=false';
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAvNegdMhrApxE5o7jlPEHGS-gk03rxgUc&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
Шаг 5
Добавьте следующее в заголовок страницы «Свяжитесь с нами», чтобы подключиться к Bootstrap и API Google Maps.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/map.js"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/util.js"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/marker.js"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/onion.js"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/stats.js"></script> <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/controls.js"></script> <link href="https://www.solodev.com/assets/selectize/css/normalize.css"> <link href="https://www.solodev.com/assets/selectize/css/selectize.default.css"> <script src="https://www.solodev.com/assets/selectize/js/jquery.js"></script> <script src="https://www.solodev.com/assets/selectize/js/selectize.js"></script> <script src="https://www.solodev.com/assets/selectize/js/index.js"></script>
Первоначально опубликовано здесь, в блоге Солодева
Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.
