HTML CSS Sections
Posted in
4838
4:59 am, August 31, 2022
Inline Contact Form Formatting
Responsive inline contact form generic block, replace with your form code and submit, google recapture etc. Usually used on home page or near footer of page.
Stacks the form on mobile screens. Requires foundation for the grid.
replace action="#" with your form submit page
replace ****your... recapture key**** with your google recapture key
This is more for the design than the form function.
Full Width Format Example
Mobile View Example
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;">
</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" />Related Tags
Add Comment
Other Items in HTML CSS Sections
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript
Random Quote
