Skip to main content
2 de 2
se añadieron 6260 caracteres en el cuerpo
NetVicious
  • 1.2k
  • 9
  • 17

En los principios del HTML los form podían ser enviados vía email, mediante el cliente de correo electrónico que tuviera el usuario en su ordenador. Hoy en día está bastante en desuso porque a mucha gente le molestaba que se utilizase su correo electrónico para el envío. Además este sistema no funciona correctamente con la gente que utiliza el email mediante webmails como pueden ser Gmail, Hotmail o similar.

Depende de si lo que estás haciendo es algo interno podría servirte utilizar este modo antiguo de enviar formularios. En caso que no te guste tendrías que programar un poco en PHP u otro lenguage para enviar el formulario internamente desde el propio servidor.

<html >
<head>
  <meta charset="UTF-8">
  <title>Registro para Manual de Aguas Residuales</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css'>

      <link rel="stylesheet" href="css/style.css">

</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  <div class="container">

<form action="mailto:[email protected]" class="well form-horizontal" id="contact_form" method="post" enctype="text/plain">
<fieldset>

<!-- Form Name -->
<b><center><legend>Registro para Manual de Aguas Residuales</legend></center></b>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label">Nombre</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input  name="first_name" placeholder="Nombre Completo" class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label" >Apellidos</label> 
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input name="last_name" placeholder="Apellido Completo" class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- Text input-->
       <div class="form-group">
  <label class="col-md-4 control-label">Correo Electrónico</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="Correo @ Electronico" class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- Text input-->
       
<div class="form-group">
  <label class="col-md-4 control-label">Teléfono</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
  <input name="phone" placeholder="Fijo o Celular" class="form-control" type="text">
    </div>
  </div>
</div>

<!-- Text input-->
      
<div class="form-group">
  <label class="col-md-4 control-label">Empresa</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
  <input name="address" placeholder="Empresa donde Trabaja" class="form-control" type="text">
    </div>
  </div>
</div>

<!-- Text input-->

<!-- Select Basic -->
   
<div class="form-group"> 
  <label class="col-md-4 control-label">Segmento Laboral</label>
    <div class="col-md-4 selectContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
    <select name="state" class="form-control selectpicker" >
      <option value=" " >Selecciona Segmento Laboral</option>
      <option>Automotores</option>
      <option>Salud</option>
      <option >Restaurantes</option>
      <option >Hoteles</option>
      <option>Industriales</option>
      <option >Otros</option>
    </select>
  </div>
</div>
</div>

<!-- Text input-->
<b><center>Haz Like A nuestra pagina de Facebook Para Continuar con el Registro</center></b>  
<center><div class="fb-like" data-href="https://www.facebook.com/todoenaguaecu" data-width="200" data-layout="standard" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div></center>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">
<center>
    <button type="button" class="btn btn-warning" onclick="cerrar()">Registrarse<span class="glyphicon glyphicon-send"></span></button>
</center>

<script>
    function cerrar() {
    
    $('#contact_form').trigger('submit');
    
        $("body").html('<div alignt="center"><h1>Debería de haberse abierto su cliente de correo para enviar el formulario</h1></div>'); //Marca nuevo contenido con un mensaje que se envio exitosamente

        setTimeout(function(){
            window.close();
        },3000); //Dejara un tiempo de 3 seg para que el usuario vea que se envio el formulario correctamente

    }
</script>

<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Registro Exitoso <i class="glyphicon glyphicon-thumbs-up"></i> Gracias por registrarse para recibir el manual de aguas residuales, verificaremos sus datos y en breve le haremos envio</div>
</fieldset>
</form>
</div>
    </div><!-- /.container -->

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

NetVicious
  • 1.2k
  • 9
  • 17