Modal Contact

PHP

<!-- Modal Button -->
<a href="#" class="button" data-modals="modal_contact">Contact Us</a>

<!-- modal_contact -->
<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>

CSS

.dialog .contact_form .modal_text{margin:2rem 0}
.dialog .contact_form textarea.input{min-height:7.3rem}
.dialog .contact_form .button{display:block;width:100%;margin:2rem 0 0}
.dialog .contact_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)}

SCSS

.dialog {
	.contact_form {
		.modal_text {
			margin: 2rem 0;
		}
		
		textarea.input {
			min-height: 7.3rem;
		}
		
		.button {
			display: block;
			width: 100%;
			margin: 2rem 0 0;
		}
		
		.row_f [class*='col_'] {
			width: calc(100% / 1 - 3.01rem);
		}
	}
}

JavaScript

case 'modal_contact':
	var title = $(this).data('title');
	var ref = $(this).data('location-input');
	
	if (typeof title !== "undefined" && title !== "") {
		modalArray.modal_title = title;
	}
	
	if (typeof ref !== "undefined" && ref !== "") {
		modalArray.locationInput = ref;
	}
	break;

if (type == 'modal_contact') {
	validate_form();
	$('.phone_us').mask('000.000.0000');
}