"Bootstrap 3.x Contact Form Layout"
Bootstrap 3.0.0 Snippet by fernandomondo

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Form usuario --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Usuario</legend> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Nome</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Senha</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Repetir Senha</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Nivel de Acesso</label> <div class="col-md-6"> <select class="form-control"> <option>Aluno Formando</option> <option>Membro Comissão</option> <option>Administrador</option> </select> </div> </div> <!-- <div class="form-group"> <label class="col-md-3 control-label" for="message">Your message</label> <div class="col-md-9"> <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea> </div> </div>Message body --> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Formatura --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Formatura</legend> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Nome do Curso</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Faculdade</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Form Evento de formatura --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Evento de Formatura</legend> <div class="form-group"> <label class="col-md-3 control-label" for="email">Tipo do Evento</label> <div class="col-md-6"> <select class="form-control"> <option>Prova de Toga</option> <option>Cerimônia</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Data</label> <div class="col-md-6"> <table class="table-condensed table-bordered table-striped"> <thead> <tr> <th colspan="7"> <span class="btn-group"> <a class="btn"><i class="icon-chevron-left"></i></a> <a class="btn active">Julho 2014</a> <a class="btn"><i class="icon-chevron-right"></i></a> </span> </th> </tr> <tr> <th>Dom</th> <th>Seg</th> <th>Ter</th> <th>Qua</th> <th>Qui</th> <th>Sex</th> <th>Sab</th> </tr> </thead> <tbody> <tr> <td class="muted">29</td> <td class="muted">30</td> <td class="muted">31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td class="btn-primary"><strong>20</strong></td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td class="muted">1</td> <td class="muted">2</td> <td class="muted">3</td> </tr> </tbody> </table> </div> </div> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Horário de Início</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="00:00" class="form-control"> </div> </div> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Tempo estimado</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="00:00" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Empresa Promotora</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Comissão de Formatura--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Comissão de Formatura</legend> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-6"> <select class="form-control"> <option>ADS - 2014/1</option> <option>ADS - 2014/2</option> <option>PG - 2014/1</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Aluno</label> <div class="col-md-6"> <select class="form-control"> <option>Manuela</option> <option>Fernando</option> <option>Rodrigo</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Papel</label> <div class="col-md-6"> <select class="form-control"> <option>Lider</option> <option>Integrante</option> <option>Tesoureiro</option> </select> </div> </div> <div class="form-group"> <div class="col-md-12 text-right"> <button class="btn btn-second">Adicionar</button> </div> </div> <table class="table"> <thead> <tr> <th> Aluno </th> <th> Papel </th> </tr> </thead> <tbody> <tr class="active"> <td> Rodrigo Navares </td> <td> Lider </td> </tr> <tr class="success"> <td> Fernando Mondo </td> <td> Integrante </td> </tr> </tbody> </table> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Form Empresa de Evento --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Empresa de Evento</legend> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Nome</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Telefone</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Endereço</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Form Proposta de Orçamento --> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Proposta de Orçamento</legend> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-6"> <select class="form-control"> <option>ADS - 2014/1</option> <option>ADS - 2014/2</option> <option>PG - 2014/1</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Forma de Pagamento</label> <div class="col-md-6"> <select class="form-control"> <option>Cartão</option> <option>Boleto</option> <option>A vista</option> </select> </div> </div> <!-- Name input--> <div class="form-group"> <label class="col-md-3 control-label" for="name">Número de Parcelas</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Data</label> <div class="col-md-6"> <table class="table-condensed table-bordered table-striped"> <thead> <tr> <th colspan="7"> <span class="btn-group"> <a class="btn"><i class="icon-chevron-left"></i></a> <a class="btn active">Julho 2014</a> <a class="btn"><i class="icon-chevron-right"></i></a> </span> </th> </tr> <tr> <th>Dom</th> <th>Seg</th> <th>Ter</th> <th>Qua</th> <th>Qui</th> <th>Sex</th> <th>Sab</th> </tr> </thead> <tbody> <tr> <td class="muted">29</td> <td class="muted">30</td> <td class="muted">31</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> <tr> <td>19</td> <td class="btn-primary"><strong>20</strong></td> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>26</td> <td>27</td> <td>28</td> <td>29</td> <td class="muted">1</td> <td class="muted">2</td> <td class="muted">3</td> </tr> </tbody> </table> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Valor Base</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="R$0,00" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Desconto</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="%" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Aluno</label> <div class="col-md-6"> <select class="form-control"> <option>Manuela</option> <option>Fernando</option> <option>Rodrigo</option> </select> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Form Despesa de Formatura--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Despesa de Formatura</legend> <div class="form-group"> <label class="col-md-3 control-label" for="name">Descrição</label> <div class="col-md-9"> <input id="name" name="name" type="text" placeholder="" class="form-control"> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Valor</label> <div class="col-md-6"> <input id="email" name="email" type="text" placeholder="R$0,00" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-6"> <select class="form-control"> <option>ADS - 2014/1</option> <option>ADS - 2014/2</option> <option>PG - 2014/1</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Evento</label> <div class="col-md-6"> <select class="form-control"> <option>Cerimônia</option> <option>Prova de Toga</option> <option>Outro</option> </select> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Form Receita--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Receita</legend> <div class="form-group"> <label class="col-md-3 control-label" for="email">Aluno</label> <div class="col-md-6"> <select class="form-control"> <option>Manuela</option> <option>Fernando</option> <option>Rodrigo</option> </select> </div> </div> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Valor</label> <div class="col-md-6"> <input id="email" name="email" type="text" placeholder="R$0,00" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Tipo da Receita</label> <div class="col-md-6"> <select class="form-control"> <option>Rifa</option> <option>Festa</option> <option>Outro</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-6"> <select class="form-control"> <option>ADS - 2014/1</option> <option>ADS - 2014/2</option> <option>PG - 2014/1</option> </select> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Form Formando--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Formando</legend> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Nome</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Endereço</label> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Fone Residencial</label> <div class="col-md-6"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Fone Comercial</label> <div class="col-md-6"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Celular</label> <div class="col-md-6"> <input id="email" name="email" type="text" placeholder="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-6"> <select class="form-control"> <option>ADS - 2014/1</option> <option>ADS - 2014/2</option> <option>PG - 2014/1</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="email">Contrato Assinado</label> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-addon beautiful"> <input type="checkbox"> </span> <input type="text" class="form-control" value="Sim"> </div> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Salvar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Relatório de Descontos das Fontes de Receita--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Relatório de Descontos das Fontes de Receita</legend> <!-- Email input--> <div class="form-group"> <label class="col-md-3 control-label" for="email">Aluno</label> <div class="col-md-6"> <select class="form-control"> <option>Manuela</option> <option>Fernando</option> <option>Rodrigo</option> </select> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Listar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Relatório de Eventos de Formatura--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Relatório de Eventos de Formatura</legend> <div class="form-group"> <label class="col-md-3 control-label" for="email">Formatura</label> <div class="col-md-6"> <select class="form-control"> <option>ADS - 2014/1</option> <option>ADS - 2014/2</option> <option>PG - 2014/1</option> </select> </div> </div> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Listar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Relatório de Eventos de Formatura--> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="well well-sm"> <form class="form-horizontal" action="" method="post"> <fieldset> <legend class="text-center">Relatório de Eventos de Formatura</legend> <table class="table"> <thead> <tr> <th> Tipo </th> <th> Data </th> <th> Tempo Estimado </th> </tr> </thead> <tbody> <tr class="active"> <td> Prova de Toga </td> <td> 24/04/2014 </td> <td> 2:00H </td> </tr> <tr class="success"> <td> Cerimônia </td> <td> 29/07/2014 </td> <td> 4:00H </td> </tr> </tbody> </table> <!-- Form actions --> <div class="form-group"> <div class="col-md-12 text-right"> <button type="submit" class="btn btn-primary btn-lg">Voltar</button> </div> </div> </fieldset> </form> </div> </div> <!-- Final --> </div> </div>

Related: See More


Questions / Comments: