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!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.