Inline Contact Form Formatting

Inline Contact Form Formatting Demo

View Demo Full Screen View Demo New Tab

Inline Contact Form Formatting Code

HTML

<!-- inline contact form section -->
<section class="contact-form-row">

	<div class='grid-container'>
		<div class="grid-x grid-padding-x grid-margin-x">

			<div class="large-12 cell">
				<div class="contact-form-title">
					Send us an Email
				</div>
			</div>

			<div class="large-12 cell">
				<script src='https://www.google.com/recaptcha/api.js'></script>
				<div class="contact-form-wrap">

					<form name="form" method="post" action="#"  id="form">

					<div class="grid-x grid-padding-x">
						<div class="large-auto cell">
							<div class="contact-form-item">
								<input name="firstname" type="text" id="firstname" placeholder="First Name*" class="validate" required>
							</div>
						</div>
						<div class="large-auto cell">
							<div class="contact-form-item">
								<input name="lastname" type="text" id="lastname" placeholder="Last Name*" class="validate" required>
							</div>
						</div>
						<div class="large-auto cell">
							<div class="contact-form-item">
								<input name="email" type="email" id="email"  placeholder="Email Address*" class="validate" required>
							</div>
						</div>
						<div class="large-auto cell">
							<div class="contact-form-item">
								<div class="g-recaptcha" data-sitekey="****your... recapture key****" style="transform:scale(0.8);transform-origin:0;-webkit-transform:scale(0.8);
transform:scale(0.8);-webkit-transform-origin:0 0;transform-origin:0 0;">
&nbsp;</div>
							</div>
						</div>
						<div class="large-auto cell">
							<div class="contact-form-item">
								<input type='submit' value='subscribe'>
							</div>
						</div>
					</div>

					</form>
				</div>
			</div>

		</div>
	</div>

</section>

CSS

.contact-form-row {
  padding:50px 0;
  background: #448EB9;
  color:#FFF;
}
.contact-form-title {
  margin-bottom:10px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #FFFFFF;
}
.contact-form-row input {
  border:0px;
  padding:30px 20px;
}
.contact-form-row input[type=submit] {
  font-family: 'Lato', sans-serif;
  padding:18px 40px;
  background:#FFF;
  color:#E32636;
  margin-left:40px;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 23px;
  text-align: center;
  color: #E32636;
  text-transform:uppercase;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css" />