Problema Envío de Email

[miguelangel23]

Hola muchachos de Foros del Web, espero se encuentren muy bien. Paso a contarles mi situación. Estoy realizando un formulario de contáctanos. Las validaciones de cada uno de los campos están en jQuery y el envío del email está en php. El problema que tengo es que al momento de que el email llega a mi bandeja de correo, de los 4 campos que tengo (Nombre, Email, Teléfono, Mensaje) sólo me llega el email :( Los otros campos aparecen vacíos.

A continuación adjunto el código:
Formulario:

Código HTML:

<form class="form-inline" role="form" action="envio.php" method="post" id='contactus' name='contactus'>
                <div id="alerta" style=" color: red;"></div>
                 <div class="form-group">
                      <label class="sr-only" for="exampleInputEmail2">Nombre</label>
                       <input type="text" name="name" class="form-control" id="name" placeholder="Nombre:">
                  </div>
                  <div class="form-group">
                       <label class="sr-only" for="exampleInputPassword2">Email</label>
                        <input type="text" name="email" class="form-control" id="email" placeholder="Email:" >
                   </div>
                   <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword2">Tel&eacute;fono</label>
                         <input type="text" name="phone" class="form-control" id="phone" placeholder="Tel&eacute;fono:" >
                    </div>
                    <textarea class="form-control" id="message" name="message" cols="40" rows="10" placeholder="Mensaje:" ></textarea>
                     <br />
                     <p class="botones" id="btncontacto"><input type="reset" value="Limpiar" class="btn btn-primary">&nbsp;<input type="submit" value="Enviar" class="btn btn-primary"></p>
</form> 

Script:

Código:

<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
        <script type='text/javascript' src='js/jquery-validation-1.13.1/dist/jquery.validate.js'></script>
        <script type="text/javascript">
        <!--
        $(document).ready(function(){
            $("#contactus").validate({
                errorElement: "div",
                errorPlacement: function(error, element) {
                    error.appendTo("div#alerta");
                }, 
                
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },

                    phone: {
                        required: true,
                        number: true
                    },

                    message: {
                        required: true,
                    }
                },

                messages: {
                    name: {
                        required: 'Debes ingresar tu nombre'
                    },
                    email: {
                        required: 'Debes ingresar tu direccion de correo electronico', email: 'El formato de email es incorrecto'
                    },

                    phone: {
                        required: 'Debes ingresar tu telefono', number: 'Solo se aceptan digitos'
                    },

                    message: {
                        required: 'Debes ingresar un mensaje'
                    }
      
                },

                debug: true,errorElement: "label",
                submitHandler: function(form){
                    $("#alerta").html("<strong>Enviando mensaje...</strong>");
                    $.ajax({
                        type: "POST",
                        url:"envio.php",
                        contentType: "application/x-www-form-urlencoded",
                        processData: true,
                        data: "nombre="+escape($('#name').val())+"&email="+escape($('#email').val())+"&telefono="+escape($('#phone').val())+"&mensaje="+escape($('#message').val()),
                        success: function(msg){
                            $("#alerta").html("<strong>Mensaje enviado correctamente. En breve recibir&aacute;s mi respuesta. Gracias!</strong>");
                            document.getElementById("name").value="";
                            document.getElementById("email").value="";
                            document.getElementById("phone").value="";
                            document.getElementById("message").value="";
                            setTimeout(function() {$('#alerta').fadeOut('fast');}, 3000);

                        }
                    });
                }
            });
        });
            // -->
        </script>

Envío de email:

Código PHP:

  <?php 
$remitente = $_POST['email']; 
$destinatario = '[email protected]'; 
$asunto = 'Consulta';  
if (!$_POST){ 
?> 
 
<?php 
}else{ 
      
    $cuerpo = "Nombre: " . $_POST["name"] . "\r \n";  
    $cuerpo .= "Email: " . $_POST["email"] . "\r \n"; 
    $cuerpo .= "Telefono: " . $_POST["phone"] . "\r\n"; 
    $cuerpo .= "Mensaje: " . $_POST["message"] . "\r\n"; 
 
    $headers  = "MIME-Version: 1.0\n"; 
    $headers .= "Content-type: text/plain; charset=utf-8\n"; 
    $headers .= "X-Priority: 3\n"; 
    $headers .= "X-MSMail-Priority: Normal\n"; 
    $headers .= "X-Mailer: php\n"; 
    $headers .= "From: \"".$_POST['name']."\" <".$remitente.">\n"; 
 
    mail($destinatario, $asunto, $cuerpo, $headers); 
 
} 
?>   

¿Qué podrá estar pasando? Espero su ayuda. Saludos.

[diurno10]

Por lo que veo estas concatenando mal los parametros, es decir vos haces esto

Código:

data: "nombre="+escape($('#name').val())+"&email="+escape($('#email').val())+"&telefono="+escape($('#phone').val())+"&mensaje="+escape($('#message').val()),

pero los parametros estimo que deben ser separados por coma, ej

Código:

data: "nombre="+escape($('#name').val())+",email="+escape($('#email').val())+",telefono="+escape($('#phone').val())+",mensaje="+escape($('#message').val()),

probalo y me contas

[GeekGirl]

Lo más fácil para enviar la data de un formulario con jQuery es usando serialize(). Resumís todo el código en una sola función y te vas a ahorrar problemas de concatenación y demás.

En la línea donde definís la data, simplemente usá:

Código jQuery:

data: $('#contactus').serialize(),
 

Saludos :)

[miguelangel23]

Hola diurno10, probé separando por "comas" pero no funciona :(

[diurno10]

proba asi con todos los demas parametros
[JSFIDDLE="data: { nombre: escape($('#name').val()), email: escape($('#email').val()) },"][/JSFIDDLE]

[miguelangel23]

Probé con serialize() y si funcionó :) Muchas gracias GeekGirl por tu ayuda.