Customising a Bootstrap 3 input-control

Question

I'm having a hard time trying to figure out how to build a contact form like this one in the image; whats the best way to get input-controls in Bootstrap 3?

I can't manage to make my form label squares and aligned like the ones in the picture.

This is my current code:

<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 sub-text">
                <h1>
                    Contato
                </h1>
                <hr>
                <p>
                    Se deseja falar conosco, envie uma mensagem
                </p>
            </div><!-- end col -->
            <div class="col-sm-1">
            </div>
            <div class="col-sm-4">
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="name"></label>
                        <input type="name" class="form-control" id="name" placeholder="Nome">
                    </div>
                </form>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="email"></label>
                        <input type="email" class="form-control" id="email" placeholder="Email">
                    </div>
                </form>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="phone"></label>
                        <input type="phone" class="form-control" id="phone" placeholder="Telefone">
                    </div>
                </form>
            </div>  
            <div class="col-sm-6">
                <fieldset class="form-group">
                    <label for="exampleTextarea"></label>
                    <textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Mensagem" ></textarea>
                </fieldset>
            </div>
            <div class="col-sm-1">
            </div>
        </div><!-- end row -->

        <div class="row">
            <div class="col-sm-12 footer-text">
            <p>
                    Copyright © 2015 . Todos os direitos reservados.
            </p>
            </div>
        </div><!-- end row -->
    </div><!-- end container -->
</footer>

JsFiddle

Answer 1

The best way to do that is create custom Class and extend them by boostrap classes , you should use grid system to make it easier , grid should look like this

<div class="col-md-12">
  <h1 class="text-center">TITLE</h1>
    <div class="col-md-4">
      <p>left box</p>
    </div>
    <div class="col-md-8">
      <p>right box</p>
    </div>
</div>

Remember about adding boostrap to your code ;)

Answer 2

Adjusted your code to try and replicate the output in the image.

1. Override the default border-radius applied to the Bootstrap form fields and text-area.
2. Use a custom margin class to create equal spacing and alignment.
3. Adjust the width of the input fields to occupy the exact space as shown in your output image. Instead of using col-sm-1 to create horizontal space, use col-sm-offset-* class to provide that.

footer .form-inline .form-control,
footer .form-group textarea {
  border-radius: 0;
}
.vertical-offset-15 {
  margin-top: 15px;
}
.vertical-offset-5 {
  margin-top: 5px;
}
input {
  min-width: 300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 sub-text">
        <h1>
                Contato
            </h1>
        <hr>
        <p>
          Se deseja falar conosco, envie uma mensagem
        </p>
      </div>
      <!-- end col -->

      <div class="col-sm-6 vertical-offset-5">
        <form class="form-inline" role="form">
          <div class="form-group vertical-offset-15">
            <label for="name"></label>
            <input type="name" class="form-control" id="name" placeholder="Nome">
          </div>
        </form>
        <form class="form-inline" role="form">
          <div class="form-group vertical-offset-15">
            <label for="email"></label>
            <input type="email" class="form-control" id="email" placeholder="Email">
          </div>
        </form>
        <form class="form-inline" role="form">
          <div class="form-group vertical-offset-15">
            <label for="phone"></label>
            <input type="phone" class="form-control" id="phone" placeholder="Telefone">
          </div>
        </form>
      </div>
      <div class="col-sm-6">
        <fieldset class="form-group">
          <label for="exampleTextarea"></label>
          <textarea class="form-control" id="exampleTextarea" rows="5" placeholder="Mensagem"></textarea>
        </fieldset>
      </div>

    </div>
    <!-- end row -->

    <div class="row">
      <div class="col-sm-12 footer-text">
        <p>
          Copyright © 2015 . Todos os direitos reservados.
        </p>
      </div>
    </div>
    <!-- end row -->
  </div>
  <!-- end container -->
</footer>