Contact Section

Contact Us Today

Your Name
Your Phone
Your Email
Your Message
Please Answer
PHP
<?php
	$CPhone = '1.888.622.5296';
	$CEmail = 'info@lazylawn.ca';
	$CLink = 'https://goo.gl/maps/Q7YZRntkfE1D7D6v9';
	$CAddress = '1530 Drew Rd. Unit #18 Mississauga, ON L5S 1W8';
?>
						
<section class="contact_section">
	<div class="wrapper">
		<aside>
			<p class="sub_title">Contact Info</p>
			<address>
				<p><a href="tel:<?= $CPhone ?>"><?= svg('iconTel', '') ?><?= $CPhone ?></a></p>
				<p><a href="mailto:<?= $CEmail ?>"><?= svg('iconChat2', 'mail') ?><?= $CEmail ?></a></p>
				<p><?= svg('iconLocation4', '') ?> <?= $CAddress ?></p>
				<a href="<?= $CLink ?>" target="_blank" class="button">Directions</a>
			</address>
		</aside>
		<main>
			<div class="image_wrap">
				<?= svg('iconChat2','zoomIn') ?>
			</div>
			
			<form action="" method="POST" class="contact_form || validate_form" autocomplete="off" novalidate>
				<div class="modal_text">
					<h3 class="modal_title"><?=(isset($modal_title) ? $modal_title : 'Contact Us Today')?></h3>
				</div>
				
				<?php if(isset($data['locationInput']) && !empty($data['locationInput'])):?>
					<input type="hidden" name="location_url" value="<?= $data['locationInput']?>" >
				<?php elseif(isset($locationInput) && !empty($locationInput)):?>
					<input type="hidden" name="location_url" value="<?= $locationInput?>" >
				<?php endif;?>
				
				<div class="form_item">
					<span class="pre_input">Your Name</span>
					<label>
						<input type="text" name="name" class="input || validate" autocomplete="off">
					</label>
				</div>
				
				<div class="form_item">
					<span class="pre_input">Your Phone</span>
					<label>
						<input type="tel" name="phone" class="input || phone_us || validate_tel" inputmode="numeric" autocomplete="off">
					</label>
				</div>
				
				<div class="form_item">
					<span class="pre_input">Your Email</span>
					<label>
						<input name="email" type="email" class="input || validate_email" autocomplete="off">
					</label>
				</div>
				
				<div class="form_item">
					<span class="pre_input">Your Message</span>
					<label>
						<textarea name="message" class="input || validate" autocomplete="off"></textarea>
					</label>
				</div>
				
				<div class="row_f || captcha_submit_block">
					<div class="col_4">
						<div class="form_item">
							<span class="pre_input">Please Answer</span>
							<label>
								<input type="number" name="a" class="input || validate_cap" inputmode="numeric" placeholder="<?= $firstCaptchaNumber ?>+<?= $secondCaptchaNumber ?>=" autocomplete="off">
							</label>
						</div>
					</div>
					<div class="col_8">
						<button type="submit" class="button">Submit</button>
					</div>
				</div>
			</form>
		</main>
	</div>
</section>
CSS
.contact_section aside{width:25%;float:left;padding:2.7rem 4rem 0 0}
.contact_section aside .sub_title{margin-top:0;color:#09a5be;font-size:2rem;font-weight:700;text-transform:uppercase}
.contact_section aside address{margin-bottom:2rem}
.contact_section aside address p{display:block;position:relative;padding:0 0 0 2.5rem;font-style:initial;font-size:1.6rem;margin:.5rem 0;-webkit-transition:all .3s linear;-o-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
.contact_section aside address p svg{width:1.6rem;height:1.6rem;position:absolute;left:0;top:.4rem;color:#066978}
.contact_section aside address a:not(.button){-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.contact_section aside .button{max-width:25rem;margin:1rem 0}

.contact_section main{width:75%;float:right}
.contact_section main .image_wrap{display:none}
.contact_section main form{position:relative;padding:2.4rem 0 3rem 5rem;border-left:.1rem solid #09a5be}
.contact_section main form::after{content:'';position:absolute;bottom:0;left:0;display:block;width:50%;height:.1rem;background-color:#09a5be}
.contact_section main form .modal_title{font-size:2rem;font-weight:700;margin:0 0 1.9rem;text-transform:uppercase}
.contact_section main form .pre_input{color:#9299a9}
.contact_section main form .button{display:block;width:100%;max-width:25rem;margin:0 0 0 auto}
.contact_section main form .captcha_submit_block{-webkit-box-align:end;-webkit-align-items:flex-end;-moz-box-align:end;-ms-flex-align:end;align-items:flex-end}
.contact_section main form .captcha_submit_block .form_item{margin:0}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.contact_section aside address a:not(.button):hover{color:#066978}
}

@media only screen and (max-width: 992px) {
	.contact_section aside{width:35%;padding:2rem 2rem 0 0}
	.contact_section main{width:65%}
	.contact_section main form{padding:1.8rem 0 3rem 3rem}
}

@media only screen and (max-width: 767px) {
	.contact_section aside address p{font-size:1.4rem}
	.contact_section .button{font-size:1.4rem}
	.contact_section main form .input{height:3.5rem}
	.contact_section main form .input::-webkit-input-placeholder{font-size:1.4rem}
	.contact_section main form .input:-moz-placeholder{font-size:1.4rem}
	.contact_section main form .input::-moz-placeholder{font-size:1.4rem}
	.contact_section main form .input:-ms-input-placeholder{font-size:1.4rem}
	.contact_section main form .input::-ms-input-placeholder{font-size:1.4rem}
	.contact_section main form .input,.contact_section main form .input::placeholder{font-size:1.4rem}
	.contact_section textarea.input{min-height:8rem}
	.contact_section main form .button{max-width:15rem}
}

@media only screen and (max-width: 700px) {
	.contact_section aside,.contact_section main{display:block;width:100%;float:none;padding:0}
	.contact_section aside{text-align:center;margin:0 0 3rem}
	.contact_section aside address p{padding:0}
	.contact_section aside address p svg{position:relative;top:-.2rem}
	.contact_section aside address a:not(.button) svg{left:-.4rem}
	.contact_section main form{padding:0;border-left:none}
	.contact_section main form::after{display:none}
}

@media only screen and (max-width: 400px) {
	.captcha_submit_block [class*="col_"]{width:-webkit-calc(100% / 2 - 3.01rem);width:-moz-calc(100% / 2 - 3.01rem);width:calc(100% / 2 - 3.01rem)}
	.contact_section main form .captcha_submit_block .form_item{margin:0 0 2rem}
	.contact_section main form .button{margin:0 auto}
}
SCSS
/* Vars */
$dark:       #066978;
$main:       #09a5be;

.contact_section {
	aside {
		width: 25%;
		float: left;
		padding: 2.7rem 4rem 0 0;
		
		.sub_title {
			margin-top: 0;
			color: $main;
			font-size: 2rem;
			font-weight: 700;
			text-transform: uppercase;
		}
		
		address {
			margin-bottom: 2rem;
			
			p {
				display: block;
				position: relative;
				padding:0 0 0 2.5rem;
				font-style: initial;
				font-size: 1.6rem;
				margin: .5rem 0;
				transition: all .3s linear;
				
				svg {
					width: 1.6rem;
					height: 1.6rem;
					position: absolute;
					left: 0;
					top: 0.4rem;
					color: $dark;
				}
			}
			
			a:not(.button) {
				transition: .3s linear;
			}
		}
		
		.button {
			max-width: 25rem;
			margin: 1rem 0;
		}
	}
	
	main {
		width: 75%;
		float: right;
		
		.image_wrap {
			display: none;
		}
		
		form {
			position: relative;
			padding: 2.4rem 0 3rem 5rem;
			border-left: 0.1rem solid $main;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				display: block;
				width: 50%;
				height: 0.1rem;
				background-color: $main;
			}
			
			.modal_title {
				font-size: 2rem;
				font-weight: 700;
				margin: 0 0 1.9rem;
				text-transform: uppercase;
			}
			
			.pre_input {
				color: #9299a9;
			}
			
			.button {
				display: block;
				width: 100%;
				max-width: 25rem;
				margin: 0 0 0 auto;
			}
			
			.captcha_submit_block {
				align-items: flex-end;
				
				.form_item {
					margin: 0;
				}
			}
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.contact_section aside address a:not(.button):hover {color: $dark}
}

@media only screen and (max-width: 992px) {
	.contact_section aside {width: 35%;padding: 2rem 2rem 0 0}
	.contact_section main {width: 65%}
	.contact_section main form {padding: 1.8rem 0 3rem 3rem}
}

@media only screen and (max-width: 767px) {
	.contact_section aside address p {font-size: 1.4rem}
	.contact_section .button {font-size: 1.4rem}
	.contact_section main form .input {height: 3.5rem}
	.contact_section main form .input, .contact_section main form .input::placeholder {font-size: 1.4rem}
	.contact_section textarea.input {min-height: 8rem}
	.contact_section main form .button {max-width: 15rem}
}

@media only screen and (max-width: 700px) {
	.contact_section aside, .contact_section main {display: block;width: 100%;float: none;padding: 0}
	.contact_section aside{text-align: center; margin: 0 0 3rem}
	.contact_section aside address p {padding: 0}
	.contact_section aside address p svg {position: relative; top: -0.2rem}
	.contact_section aside address a:not(.button) svg {left: -0.4rem}
	.contact_section main form {padding: 0;border-left: none}
	.contact_section main form::after {display: none}
}

@media only screen and (max-width: 400px) {
	.captcha_submit_block [class*="col_"] {width: calc(100% / 2 - 3.01rem)}
	.contact_section main form .captcha_submit_block .form_item {margin: 0 0 2rem}
	.contact_section main form .button {margin: 0 auto}
}

Please, enter a valid value