Clase Laboratorio Digital Diseño Web semana 12/12/2016

Ejercicio formulario de contacto

Códigos

Header

<script src="assets/vender/bootstrap/assets/js/html5shiv.js"></script>
<script src="assets/vender/bootstrap/assets/js/respond.min.js"></script>

Body - script

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="assets/vender/intl-tel-input/js/intlTelInput.min.js"></script>
<script src="assets/js/contact-form.js"></script>

Body - formulario contacto

<div class="container">
      <div id="contact_form" class="row">
        <div class="col-md-12">
          <h2>Contáctenos</h2>
          <form role="form" id="feedbackForm">
            <div class="form-group">
              <label class="control-label" for="name">Nombres *</label>
              <div class="input-group">
                <input type="text" class="form-control" id="name" name="name" placeholder="Introduzca su nombre" />
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div>
              <span class="help-block" style="display: none;">Por favor, escriba su nombre.</span>
            </div>
         
         

            <div class="form-group">
              <label class="control-label" for="email">Dirección de Correo Electrónico *</label>
              <div class="input-group">
                <input type="email" class="form-control" id="email" name="email" placeholder="Introduzca su correo electrónico" />
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div>
              <span class="help-block" style="display: none;">Por favor, introduzca una dirección de correo electrónico válida.</span>
            </div>
            <div class="form-group">
              <label class="control-label" for="message">Mensaje *</label>
              <div class="input-group">
                <textarea rows="5" cols="30" class="form-control" id="message" name="message" placeholder="Introduzca su mensaje" ></textarea>
                <span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
              </div>
              <span class="help-block" style="display: none;">Por favor, introduzca un mensaje.</span>
            </div>
         
            <button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" data-loading-text="Enviando..." style="display: block; margin-top: 10px;">Enviar comentarios</button>
          </form>
        </div>
      </div>
      <hr>
    </div>

CSS

.form-group {

        margin-bottom: 8px;

      }

 

 #feedbackForm {

        font-size: 12px;

      }

Link de descarga archivos base