Contact form

PHP

<form action="" method="POST" class="contact_form || validate_form" autocomplete="off" novalidate>
	<p class="sub_title">Contact Us Today</p>
	
	<div class="form_item">
		<span class="pre_input">Name</span>
		<label>
			<input type="text" name="name" class="input || validate" autocomplete="off">
		</label>
	</div>
	
	<div class="form_item">
		<span class="pre_input">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">Email</span>
		<label>
			<input type="email" name="email" class="input || validate_email" autocomplete="off">
		</label>
	</div>
	
	<div class="form_item">
		<span class="pre_input">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 || col_xs_12">
			<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 || col_xs_12 || button_right">
			<button type="submit" class="button">Submit</button>
		</div>
	</div>
</form>

<!-- Form with placeholders -->
<form action="" method="POST" class="contact_form || validate_form" autocomplete="off" novalidate>
	<p class="sub_title">Contact Us Today</p>
	
	<div class="form_item">
		<label>
			<input type="text" name="name" class="input_line || validate" placeholder="Name" autocomplete="off">
		</label>
	</div>
	
	<div class="form_item">
		<label>
			<input type="tel" name="phone" class="input_line || phone_us || validate_tel" placeholder="Phone" inputmode="numeric" autocomplete="off">
		</label>
	</div>
	
	<div class="form_item">
		<label>
			<input type="email" name="email" class="input_line || validate_email" placeholder="Email" autocomplete="off">
		</label>
	</div>
	
	<div class="form_item">
		<label>
			<textarea name="message" class="input_line || validate" placeholder="Message" autocomplete="off"></textarea>
		</label>
	</div>
	
	<div class="row_f || captcha_submit_block">
		<div class="col_4 || col_xs_12">
			<div class="form_item">
				<label>
					<input type="number" name="a" class="input_line || validate_cap" inputmode="numeric" placeholder="Please Answer <?= $firstCaptchaNumber ?>+<?= $secondCaptchaNumber ?>=" autocomplete="off">
				</label>
			</div>
		</div>
		
		<div class="col_8 || col_xs_12 || button_right">
			<button type="submit" class="button">Submit</button>
		</div>
	</div>
</form>

CSS

/* Styles for title */
.sub_title{font:700 2.4rem/1.2 'Nunito Sans',sans-serif;color:#31344b;position:relative;margin:1rem 0 2rem;text-transform:capitalize}

/* Styles for captcha and button */
.captcha_submit_block{-webkit-box-align:end;-webkit-align-items:flex-end;-moz-box-align:end;-ms-flex-align:end;align-items:flex-end}
.captcha_submit_block .form_item{margin:0}
.captcha_submit_block .button_right{text-align:right}

@media only screen and (max-width: 640px) {
	.captcha_submit_block .button_right {padding: 1.5rem 0 0;text-align: center}
}

SCSS

/* Vars */
$font:   'Nunito Sans', sans-serif;
$main:   #31344b;

/* Styles for title */
.sub_title {
	font: 700 2.4rem/1.2 $font;
	color: $main;
	position: relative;
	margin: 1rem 0 2rem;
	text-transform: capitalize;
}

/* Styles for captcha and button */
.captcha_submit_block {
	align-items: flex-end;
	
	.form_item {
		margin: 0;
	}
	
	.button_right {
		text-align: right;
	}
}

@media only screen and (max-width: 640px) {
	.captcha_submit_block {
		
		.button_right {
			padding: 1.5rem 0 0;
			text-align: center;
		}
	}
}