Build a sign-up page with Bootstrap 3

Newsletter sign-up form

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;
}

Contact us form

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!

• 10 web design trends that will change everything in 2015
• Free adaptive web design ebook available now
• The best free WordPress themes