Contact Us Section

1.555.555.5555 info@test.com 123 Main Str Toronto, ON A1A 1A1

Send Us a Message

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_us_section">
	<div class="wrapper">
		<address>
			<a href="tel:<?= $CPhone ?>">
				<?= svg('iconTel', '') ?>
				<?= $CPhone ?>
			</a>
			<a href="mailto:<?= $CEmail ?>">
				<?= svg('iconChat2', 'mail') ?>
				<?= $CEmail ?>
			</a>
			<a href="<?= $CLink ?>" target="_blank" class="address_text"><?= svg('iconLocation4', '') ?> <?= $CAddress ?></a>
		</address>
		
		<form action="" method="POST" class="contact_form || validate_form" autocomplete="off" novalidate>
			<h3 class="modal_title"><?=(isset($modal_title) ? $modal_title : 'Send Us a Message')?></h3>
			
			<?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="row_f">
				<div class="col_6">
					<div class="form_item">
						<label>
							<input type="text" name="name" class="input || validate" placeholder="Your Name *" autocomplete="off">
						</label>
					</div>
					
					<div class="form_item">
						<label>
							<input type="tel" name="phone" class="input || phone_us || validate_tel" placeholder="Your Phone *" inputmode="numeric" autocomplete="off">
						</label>
					</div>
					
					<div class="form_item">
						<label>
							<input type="email" name="email" class="input || validate_email" placeholder="Your Email *" autocomplete="off">
						</label>
					</div>
					
					<div class="form_item">
						<label>
							<input type="text" name="city" class="input || validate" placeholder="City *" autocomplete="off">
						</label>
					</div>
					
					<div class="form_item">
						<label>
							<input type="number" name="a" class="input || validate_cap" inputmode="numeric" placeholder="Please Answer: <?= $firstCaptchaNumber ?>+<?= $secondCaptchaNumber ?>= *" autocomplete="off">
						</label>
					</div>
				</div>
				
				<div class="col_6">
					<div class="form_item">
						<label>
							<textarea name="message" class="input || validate" placeholder="Your Message" autocomplete="off"></textarea>
						</label>
					</div>
				</div>
				
				<div class="col_12 || tc">
					<button type="submit" class="button">Submit</button>
				</div>
			</div>
		</form>
	</div>
</section>
CSS
.contact_us_section address{margin:8.1rem 0 3rem;text-align:center}
.contact_us_section address p,.contact_us_section address a:not(.button){display:inline-block;position:relative;font-style:initial;font-size:2rem;line-height:1.2;font-weight:500;color:#000;margin:.5rem 2.5rem;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.contact_us_section address p svg,.contact_us_section address a:not(.button) svg{position:relative;color:#066978;left:0;top:-.1rem;display:inline-block}
.contact_us_section form .modal_title{display:none}
.contact_us_section form .input{padding:0;border:none;border-bottom:.1rem solid #cfcfcf;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:2.4rem 0}
.contact_us_section form textarea.input{min-height:28.2rem;margin:3.8rem 0 1.4rem;border:.1rem solid #cfcfcf;padding:1rem 0 0 1rem}
.contact_us_section form .input:focus,.contact_us_section form .input:active{border-bottom:.1rem solid #09a5be;-webkit-box-shadow:unset;-moz-box-shadow:unset;box-shadow:unset}
.contact_us_section form textarea.input:focus,.contact_us_section form textarea.input:active{border:.1rem solid #09a5be;-webkit-box-shadow:unset;-moz-box-shadow:unset;box-shadow:unset}
.contact_us_section form .button{margin:2rem 0 0}

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

@media only screen and (max-width: 1200px) {
	.contact_us_section address{margin:5rem 0 2rem}
	.contact_us_section address a{font-size:1.8rem;margin:0 1.5rem}
}

@media only screen and (max-width: 992px) {
	.contact_us_section address{margin:4rem 0 1rem}
	.contact_us_section address p,.contact_us_section address a:not(.button){font-size:1.8rem}
	.contact_us_section form .input{margin:1rem 0;font-size:1.4rem}
	.contact_us_section form .input::-webkit-input-placeholder{font-size:1.4rem}
	.contact_us_section form .input:-moz-placeholder{font-size:1.4rem}
	.contact_us_section form .input::-moz-placeholder{font-size:1.4rem}
	.contact_us_section form .input:-ms-input-placeholder{font-size:1.4rem}
	.contact_us_section form .input::-ms-input-placeholder{font-size:1.4rem}
	.contact_us_section form .input::placeholder{font-size:1.4rem}
	.contact_us_section form textarea.input{min-height:24.6rem;margin:2.4rem 0 1rem}
}

@media only screen and (max-width: 550px) {
	.contact_us_section address p,.contact_us_section address a:not(.button){display:block;width:100%;margin:0 0 2rem}
	.contact_us_section address a.address_text{max-width:30rem;margin:0 auto}
}

@media only screen and (max-width: 450px) {
	.contact_us_section form .row_f [class*='col_']{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
	.contact_us_section form textarea.input{min-height:10rem;margin:0}
	.contact_us_section form .button{margin:.5rem 0 0}
}
SCSS
/* Vars */
$cb:           #000000;
$dark:         #066978;
$main:         #09a5be;
$inputBorder:  #cfcfcf;

.contact_us_section {
	address {
		margin: 8.1rem 0 3rem;
		text-align: center;
		
		p, a:not(.button) {
			display: inline-block;
			position: relative;
			font-style: initial;
			font-size: 2rem;
			line-height: 1.2;
			font-weight: 500;
			color: $cb;
			margin: .5rem 2.5rem;
			transition: .3s linear;
			
			svg {
				position: relative;
				color: $dark;
				left: 0;
				top: -.1rem;
				display: inline-block;
			}
		}
	}
	
	form {
		.modal_title {
			display: none;
		}
		
		.input {
			padding: 0;
			border: none;
			border-bottom: .1rem solid $inputBorder;
			border-radius: 0;
			margin: 2.4rem 0;
		}
		
		textarea.input {
			min-height: 28.2rem;
			margin: 3.8rem 0 1.4rem;
			border: .1rem solid $inputBorder;
			padding: 1rem 0 0 1rem;
		}
		
		.input:focus, .input:active {
			border-bottom: .1rem solid $main;
			box-shadow: unset;
		}
		
		textarea.input:focus, textarea.input:active {
			border: .1rem solid $main;
			box-shadow: unset;
		}
		
		.button {
			margin: 2rem 0 0;
		}
	}
}

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

@media only screen and (max-width: 1200px) {
	.contact_us_section address {margin: 5rem 0 2rem}
	.contact_us_section address a {font-size: 1.8rem;margin: 0 1.5rem}
}

@media only screen and (max-width: 992px) {
	.contact_us_section address {margin: 4rem 0 1rem}
	.contact_us_section address p, .contact_us_section address a:not(.button) {font-size: 1.8rem}
	.contact_us_section form .input {margin: 1rem 0;font-size: 1.4rem}
	.contact_us_section form .input::placeholder {font-size: 1.4rem}
	.contact_us_section form textarea.input {min-height: 24.6rem;margin: 2.4rem 0 1rem}
}

@media only screen and (max-width: 550px) {
	.contact_us_section address p, .contact_us_section address a:not(.button) {display: block;width: 100%;margin: 0 0 2rem}
	.contact_us_section address a.address_text {max-width: 30rem;margin: 0 auto}
}

@media only screen and (max-width: 450px) {
	.contact_us_section form .row_f [class*='col_'] {width: calc(100% / 1 - 3.01rem)}
	.contact_us_section form textarea.input {min-height: 10rem;margin: 0}
	.contact_us_section form .button {margin: .5rem 0 0}
}

Please, enter a valid value