Divto Web Design Blog

Web Form Design With Bootstrap

I will start this article by stating that using a framework is not always the solution to designing web forms. However, the Bootstrap css framework makes the process of building intuitive web form design simple. High conversion rates are mandatory on the web nowadays. Keep your web forms 100% responsive, short and simple with the help of the Bootstrap css framework.

Real world examples of web form design

Login Forms

A login form in Bootstrap is just an inline form with a few input groups inside. To create an inline form, we add the ‘form-inline’ class to the <form> tag.

Inside this form, each separate field will need to be declared inside a form group

Form groups usually contain a label and input field. However, you can place single items such as buttons inside a form group as well.

Below is an example layout of a horizontal web form.

form
  form-group
    label (Email)
    input
  form-group
    label (Password)
    input
  form-group
    button (Login)

Please excuse the pseudo-code…

Great web form design with Bootstrap is a breeze with the help of its simple to use form classes.

In order for Bootstrap to recognize each input as a form input, we must include the ‘form-control‘ class in each text field and button.

Most forms will have a submit button. These should have the ‘btn’ class added to them in order for Bootstrap to recognize them as form buttons. Additionally, they should contain a ‘btn-default‘ or ‘btn-primary‘ class to style your forms’ buttons according to either the default Bootstrap theme or a custom bootswatch.

Additonally, adding the ‘sr-only‘ class to any element will cause it to only be rendered for screen readers.

Example:

  <form class="inline-form">
    <label class="sr-only">Email</label>
    <input class="form-control" placeholder="Email" type="email">
  </form>

Vertical web form design with Bootstrap

Let us create a common registration form using Bootstrap’s column classes.

Below is an example layout of a vertical web form.

form
  form-group
    label (Email)
    input
  form-group
    label (Name)
    input
  form-group
    label (Password)
    input
  form-group
    button (Register)

As you can tell, it is created with the same layout as horizontal forms. However, you do not add the ‘inline-form’ class to the form tag. Simply create a form with labels, inputs and a submit button. Each of these fields will also go inside a div with the ‘form-group row‘ class.

However, in order for vertical forms to be displayed correctly we must declare the column sizes for the field elements.

Example:

<form>
<div class="form-group row">
  <div class="col-xs-12 col-sm-4"><label class="for="name">Name *</label></div>
  <div class="col-xs-12 col-sm-8"><input class="form-control" id="name" placeholder="Your Name" type="text"></div>
</div>
<div class="form-group row">
  <div class="col-xs-12 col-sm-4"><label for="email">Email *</label></div>
  <div class="col-xs-12 col-sm-8"><input class="form-control" id="email" placeholder="[email protected]" type="email"></div>
</div>
<div class="form-group row">
  <div class="col-xs-12 col-sm-4"><label for="password">Password *</label></div>
  <div class="col-xs-12 col-sm-8"><input class="form-control" id="password" placeholder="Password" type="password"></div>
</div>
<div class="form-group row">
  <div class="col-xs-12 col-sm-offset-4"><input class="btn btn-success" type="submit" value="Register"></div>
</div>
</form>

Try using the Bootstrap css framework for your web forms. It has saved so many hours of my time in web form creation. Hopefully, I have inspired you to utilize it for your future web form designs.

Please leave a comment if you have any questions regarding Bootstrap web form creation. I will be happy to answer them when I get a chance!

Flask Web Development – An Introduction

Flask websites are built using the Flask microframework. Wikipedia defines Flask as one of many “minimalistic web application frameworks.” In this article I will be giving an introduction to Flask web development, along with resources to get started developing with the flask framework.

What makes Flask web development so magical?

The Flask microframework is backed by Python. Python is a very stable, powerful, aged and most importantly… Legible programming language. So legible in fact, I usually forego code comments.

For example, writing the comment:

For each user in the followers list, display the user’s name

above this ↓
for user in followers:
print user.name
serves no purpose. In fact, it makes my code harder to scan through later on. Which brings me to my next key point…

Websites built in Flask are scalable

Scalability is defined by the effort it takes to come back to a site and build from it at a later point in time. The Flask web framework allows you to build sites kind of like lego blocks. You mix and match and install only the modules you need using pip.

Python code is easy to read and write

Due to the legibility of Python, Flask websites becomes much more easy to structure. You could start with a simple app and not have to worry about coming back to it months from now to extend it’s functionality. It’s amazing how easy it is to pick up where you left off in Python programming. Therefore, allowing websites written in Flask to achieve the same benefit.

Flask for Web Development and Web Apps

Flask utilizes simple routing, paired with a great templating engine and a built-in local server for rapid design and development.
App structure is as basic or complex as needed.

For example, a basic Flask web app or website is laid out as follows:

  • app
    • /static
    • /templates
    • __init__.py

Flask website folder structure

The Static folder is for images, stylesheets, sass/ stylus files, and other static media required for your site.

The Templates folder holds pieces of the website such as the header, sidebar, content, menu, forms and footer. Template files aren’t necessary, however they do provide greater organization and more of a manageable site structure.

init.py can be named other things such as app.py or name.py. This file contains the code necessary to launch the website or app. There is no mandatory naming convention for this file. This file is initialized with python typing python __init__.py in a terminal window. Depending on how you structured your app, it should start a local server with the following message returned:
* Running on http://127.0.0.1:5000/

Recommended reading

Finally, here are a couple websites I recommend to get started with Flask web development:

  • flask.pocoo.org — Site created by Armin Ronacher (the creator of the Flask microframework). This site is a great resource to have when starting out when using Flask for web development. In other words, it will help teach you the foundations in flask web development, along with some more advanced features of the Flask web framework.
  • exploreflask.com — Founded from a Kickstarter campaign, this is an online guidebook for the Flask web framework. In addition, the Explore Flask website gives an introduction to common coding conventions, configuration, extensions, security, deployment and even some design tips. Most noteworthy, it’s a free online book and a great resource if you ever get stuck on something in your Flask development.

Furthermore, I will soon be publishing tutorials on the Flask microframework on this site.