3

Tengo un formulario en HTML, y mi pregunta es, ¿Cómo podría enviar la información del formulario a un correo electrónico?

<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 class="well form-horizontal" action=" " method="post"  id="contact_form">
<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="submit" class="btn btn-warning" onclick="cerrar()">Registrarse<span class="glyphicon glyphicon-send"></span></button>
</center>

<script>
    function cerrar() { 
        $("body").html('<div alignt="center"><h1>Enviado Exitosamente!!!</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>

6
  • Pues depende del leguaje que vayas a utilizar para el envio, pero por ejemplo en PHP es muy sencillo, este enlace te puede ayudar w3schools.com/php/func_mail_mail.asp
    – M. Gress
    Commented el 6 jun. 2017 a las 20:55
  • Que estas usando por el lado del servidor? :) Commented el 6 jun. 2017 a las 20:57
  • Estuve leyendo, y me dice que php es bastante sencillo pero, es que no soy muy experto creando códigos y eso creo q la solucion seria agregando al codigo que ejecute otro archivo php q haga el envio pero no tengo ni idea de como hacer esto.. =(
    – Mabf
    Commented el 6 jun. 2017 a las 21:09
  • Estas trabajando con PHP? para enviar un email debes crear una funcion, que como bien te comentan, puedes utilizar la libreria PHPMailer, tiene muchas opciones y te facilita el trabajo
    – sioesi
    Commented el 7 jun. 2017 a las 3:06
  • Lo mejor es que utilices la funcion mail de php o la libreria PHPMailer como bien dice @sioesi
    – user45237
    Commented el 7 jun. 2017 a las 7:15

4 respuestas 4

2

Otra opción que tienes es enviar el formulario por correo desde el servidor utilizando la librería PHPMailer que es la recomendada para estos casos.

Paso 1

Descarga la librería PHPMailer desde aquí: https://github.com/PHPMailer/PHPMailer

A la derecha del todo tienes el botón Clone or Download y dentro la opción de bajarlo como ZIP. Descomprime dicho zip en la carpeta donde tienes tu código PHP.

Paso 2

Modifica la funcion cerrar() que tienes en javascript dentro del HTML que has puesto.

function cerrar() {

    $.ajax({
      method: "POST",
      url: "enviar.php",
      data: $('#contact_form").serialize()
    }).done(function( msg ) {
       if ( msg == 'ok' ) {
           $("body").html('<div alignt="center"><h1>Enviado Exitosamente!!!</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
       } else {
           $("body").html(msg);
       }
    });
}

Paso 3

Crea un fichero nuevo llamado enviar.php con el siguiente contenido. En la parte de arriba tienes una serie de variables que debes de modificar indicando los datos de tu servidor de correo, la cuenta desde la que quieres que se envíe el mensaje, .....

<?php

$smtp_user  = 'usuario del servidor SMTP';
$smtp_pass  = 'clave del usuario del servidor SMTP';
$smtp_server = 'servidor_smtp.es';
$email_remitente = '[email protected]'; // email del remitente, quien manda el correo'
$nombre_remitente = 'Manolito Gafotas'; // Nombre del remitente
$email_destinatario = '[email protected]'; // email del destinatario del correo
$nombre_destinatario = 'Pedrito Gafotas'; // Nombre del destinatario

function ddie($txt) {
    die( utf8_encode($txt) );
}

$nombre =   isset( $_POST['first_name'] ) ? utf8_decode($_POST['first_name']) : '';
$apellidos =    isset( $_POST['last_name'] ) ? utf8_decode($_POST['last_name']) : '';
$email =        isset( $_POST['email'] ) ? utf8_decode($_POST['email']) : '';
$telf =     isset( $_POST['phone'] ) ? utf8_decode($_POST['phone']) : '';
$direccion =    isset( $_POST['address'] ) ? utf8_decode($_POST['address']) : '';
$trabajo = isset( $_POST['state'] ) ? utf8_decode($_POST['state']) : '';

$regex_email = '/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,3})$/';

$err_nombre = ( trim($nombre) == '' );
$err_apellidos  = ( trim($apellidos) == '' );
$err_telf = ( trim($telf) == '' );
$err_email = ( trim($email) == '' );
$err_email_regex = !preg_match($regex_email, $email);
$err_direccion  = ( trim($direccion == '' ) );
$err_trabajo = ( trim($trabajo == '') );

if ( $err_nombre or ( $err_email and $err_telf) or $err_texto or $err_direccion or $err_trabajo ) {
    ddie('Por favor rellene todos los campos. Necesitamos un teléfono o su dirección de correo electrónico');
}

if ( ($email != '') and $err_email_regex ) {
    ddie('Dirección de correo incorrecta');
}


require_once('PHPMailer-master/PHPMailerAutoload.php');

$email_destino = array();
$email_destino[] = array($email_destinatario, $nombre_destinatario);
// Puedes añadir más destinatarios añadiendo más líneas como la anterior

$mail = new PHPMailer();

$mail->IsSMTP();
$mail->IsHTML(false);
$mail->Host = $smtp_server;
$mail->SMTPAuth = true;
$mail->SMTPSecure = false;
$mail->SMTPAutoTLS = false;
$mail->Username = $smtp_user;
$mail->Password = $smtp_pass;

$mail->Timeout = 15;

$mail->From = $smtp_from;
$mail->FromName = $smtp_from_name;
$mail->set("X-Sender", "<" . $smtp_from . ">");
$mail->set("X-Mailer", "PHP Mailer v" . $PHP_VERSION);

set_email_vars($mail, $email_remitente, $nombre_remitente);

$mail->CharSet = "UTF-8";

if ( is_array($email_destino ) ) {
    foreach ( $email_destino as $email_destino_txt ) {
        // Compruebo por si no has puesto nombre del destinatario
        if ( is_array($email_destino_txt) ) {
            $mail->AddAddress($email_destino_txt[0], $email_destino_txt[1]);
        } else {
            $mail->AddAddress($email_destino_txt);
        }

    }
} else {
    $mail->AddAddress($email_destino, '');
}
$mail->AddReplyTo($email, $nombre . " " . $apellidos);
$mail->Subject = "Asunto del correo";

$nombre =   utf8_encode($nombre);
$apellidos= utf8_encode($apellidos);
$direccion= utf8_encode($direccion);
$telf =     utf8_encode($telf);
$trabajo = utf8_encode($trabajo);

$cuerpo = 'Email: ' . htmlspecialchars($email, ENT_COMPAT, 'UTF-8') . "\n\n";
$cuerpo.= 'Nombre: ' . htmlspecialchars($nombre . " " . $apellidos, ENT_COMPAT, 'UTF-8') . "\n";
$cuerpo.= 'Telf: ' . htmlspecialchars($telf, ENT_COMPAT, 'UTF-8') . "\n\n";
$cuerpo.= 'Direccion: ' . htmlspecialchars($direccion, ENT_COMPAT, 'UTF-8') . "\n\n";
$cuerpo.= 'Trabajo: ' . htmlspecialchars($trabajo, ENT_COMPAT, 'UTF-8') . "\n\n";

$cuerpo.= htmlspecialchars($texto, ENT_COMPAT, 'UTF-8');

$mail->Body = $cuerpo;

if ( $mail->Send() ) {
    ddie('ok');
} else {
        ddie('Lo sentimos pero no hemos podido enviar el mensaje (' . $mail->ErrorInfo . '). Reintente pasados unos minutos');
}
?>
1
  • Me sirvió, no exactamente con tu código, pero si, ¡¡como una gran referencia!! Gracias! Commented el 20 feb. 2023 a las 19:19
1

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>

3
  • Buenas tardes gracias por contestar, ya coloque eso en el form pero cuando llego el formulario no me llega nada al correo :(
    – Mabf
    Commented el 7 jun. 2017 a las 18:45
  • Tienes bien configurado el cliente de correo?
    – NetVicious
    Commented el 8 jun. 2017 a las 7:31
  • Te he puesto un snipplet para que veas como funciona. Piensa que si esto es para algo público, esta forma no es la mejor para enviar los datos de un formulario.
    – NetVicious
    Commented el 8 jun. 2017 a las 7:52
0

Para enviar los datos escritos en tu formulario deberías indicar la dirección de correo a la que se envían los datos de la siguiente manera:

<form action="mailto:[email protected]" method="post" enctype="text/plain"></form>

Así debería quedar la etiqueta form.

Ahora dentro del form vas a poner los valores que quieres que se envíen por correo:

<form action="mailto:[email protected]" method="post" enctype="text/plain">

        Nombre:<br>
    <input type="text" name="nombre"><br>
    E-mail:<br>
    <input type="text" name="mail"><br>
    Comentario:<br>
    <input type="text" name="comentario" size="50"><br><br>
    <input type="submit" value="Send">
    <input type="reset" value="Reset">

    </form>

1
  • Buenas tardes gracias por contestar, ya coloque eso en el form pero cuando llego el formulario no me llega nada al correo :(
    – Mabf
    Commented el 7 jun. 2017 a las 18:45
-2

utiliza la libreria de phpMailer https://github.com/PHPMailer/PHPMailer/wiki/Tutorial, alli encontraras como enviar los datos del formulario y hasta los archivos adjuntos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.