Next to our carousel we'll place our sign-up form. Creating responsive forms is simple with Bootstrap, as it automatically adds global styles for you. Start by wrapping your form in a grid column of col-md-4 and a class name of sign-up-form for styling purposes.
<form class="form-horizontal" role="form">
<fieldset>
<legend>Sign up to our newsletter</legend>
<input class="form-control" placeholder="Name" name="name" type="text" required>
<input class="form-control" placeholder="Email" name="email" type="email" required>
<input class="form-control" placeholder="Business Name" name="business" type="text" required>
The class form-horizontal is a predefined grid that aligns labels and groups of form controls together in a horizontal layout. Here, the checkbox class will provide the appropriate padding and margin for our checkboxes.
<div class="checkbox">
<label>
<input type="checkbox"> Daily News
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</fieldset>
</form>
Within the style.css some basic styling has been applied to our sign-up form.
.sign-up-form {
padding: 1em;
background:rgba(255,255,255,0.3);
border-radius:5px
}
.sign-up-form legend {
color: #efefef;
}
.sign-up-form input {
margin-bottom: 1em;
}
Now let's set up a contact form. Start by creating a section tag. Within this we will again need our container div followed by a row div. Below this, we want to add a heading.
Using a span tag we can now incorporate a comment-icon using the glyphicon, simply by referencing the class name.
<h2><span class="glyphicon glyphicon-comment"></span> Get in touch with us</h2>
Following our heading, open a form tag and set up a grid column of col-md-6. To create optimum spacing between form controls we can use a predefined class called form-group .
<div class="form-group">
<label for="contact-name">Name</label>
<input type="text" class="form-control" id="contact-name" placeholder="Enter Name" required>
</div>
<div class="form-group">
<label for="contact-company">Company</label>
<input type="text" class="form-control" id="contact-company" placeholder="Enter your company name">
</div>
Repeat this process again so that we'll have our form controls sitting side by side. Beneath this we can add in a <textarea> wrapped in a full-width row of col-md-12, followed by a submit button.
<label for="contact-message">Message</label>
<textarea class="form-control" rows="3" id="contact-message"></textarea>
<button type="submit" class="btn btn-default">Submit</button>
Styling
Open up the style.css and you will find styles applied to the contact form, with a photographic background image. Further down this stylesheet is a media query that ensures our navigation has some top padding, but only for larger screen sizes, and for our sign-up form. You can finish off this landing page by adding in your own footer.
There you have it: a simple sign-up landing page. With minimal work, by utilising Bootstrap's responsive framework, we can quickly build a production-ready website for any device.
Words: Steven Wu
Steven Wu is an expert in Magento, WordPress, Frontend web development. Follow him on Twitter at @designtodevelop. This article appeared originally in net magazine issue 259.
Like this? Read this!
