Formulario de contacto HTML5

[MindPaniC]

Hola a todos,

Tengo un formulario de contacto en HTML5, la cuestion es que funciona bien el hecho de las casillas "required" pero no consegui que me enviase los emails y tuve que usar otro metodo de otro formulario que tenia y que muestra la obligatoriedad de los campos con jQuery. La cuestion es que yo quiero que funciona sin tener que recurrir a jQuery y que muestre esos fallos tan esteticos y multilenguaje de HTML5.

Este es mi formulario, copio tambien la seccion jQuery:

Código HTML:

<form action="process.php" id="formulario" method="post"  autocomplete="on">
        <p> <label for="username" class="iconic user" > Nombre <span class="required">*</span></label> <input type="text" name="nombre" id="username"  required="required" placeholder="¿Cómo te llamas?" autofocus /> </p>
        <p> <label for="usermail" class="iconic mail-alt"> E-mail <span class="required">*</span></label> <input type="email" name="email" id="usermail" placeholder="Nunca te enviaremos spam" required  /> </p>
        <p> <label for="message" class="iconic comment"> Mensaje  <span class="required">*</span></label> <textarea placeholder="Contestaremos lo antes posible" name="comentario"  required="required" ></textarea> </p>
        <p class="indication"> Todos los campos marcados con <span class="required">*</span> son obligatorios</p>
        <input type="submit" value="Enviar" />
        </form>
<!-- Códigos de validación para el formulario -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.form.js"></script>
<!-- Script que llama a la validación del formulario -->
    <script>
        $(function(){
            $('#formulario').validate({
                submitHandler: function(form) {
                    $(form).ajaxSubmit({
                        url: 'process.php',
                        success: function() {
                            
                            $('#textoContacto h3').hide();
                            $('#formulario').hide();
                            $('#caja').append("<p>Mensaje enviado, <strong>gracias por contactar con nosotros</strong>, responderemos lo antes posible.</p>")
                        }
                    });
                }
            });         
        });
    </script>
<!-- Fin códigos de validación del formulario -->
 

He probado a quitar el jQuery y procesar el formulario con un archivo externo en PHP pero envia los mensajes y la pagina queda en blanco cosa que con el jQuery no sucede ya que entrega un mensa tipo "su mensaje ha sido enviado gracias"

Este es el php:

Código PHP:

<?php
 
//Correo de destino; donde se enviará el correo.
$correoDestino = "[email protected]";
$correoDestino2 = "[email protected]";
 
//Texto emisor; sólo lo leerá quien reciba el contenido.
$textoEmisor = "MIME-VERSION: 1.0\r\n";
$textoEmisor .= "Content-type: text/html; charset=UTF-8\r\n";
 
/*
    Recopilo los datos vía POST
    Con strip_tags suprimo etiquetas HTML y php para evitar una posible inyección.
    Como no gestiona base de datos no es necesario limpiar de inyección SQL.
*/
$nombre = strip_tags($_POST['nombre']);
$correo = strip_tags($_POST['email']);
$comentario = strip_tags($_POST['comentario']);
$fecha = date('j/n/Y');
 
//Formateo el asunto del correo
$asunto = "Mensaje desde el formulario de Bipolar Station";
 
//Formateo el cuerpo del correo
 
$cuerpo = "<b>Enviado por:</b> " . $nombre . "<br />";
$cuerpo .= "<b>E-mail:</b> " . $correo . "<br />";
$cuerpo .= "<b>Fecha:</b> " . $fecha . "<br />";
$cuerpo .= "<b>Comentario:</b> " . $comentario;
 
// Envío el mensaje
mail( $correoDestino, $asunto, $cuerpo, $textoEmisor);
mail( $correoDestino2, $asunto, $cuerpo, $textoEmisor);
?>
 

¿¿Cómo puedo hacer con HTML5 para que envie el mensaje y devuelva un mensaje de agradecimiento desde la misma página??


SAludos

[pzin]

Iniciado por MindPaniC

¿¿Cómo puedo hacer con HTML5 para que envie el mensaje y devuelva un mensaje de agradecimiento desde la misma página??

¿Sin usar AJAX? No puedes.

Claro que la página queda en blanco, porque no estás imprimiendo nada en tu archivo PHP.

Respecto a cómo lo haces usando jQuery, si en process.php causa un error, seguirá mostrando que el mensaje ha sido enviado. Así que, y esto responde también a tu pregunta, deberías de poner algo en tu archivo PHP si el mensaje se ha enviado a o no —con una comprobación. Y una vez hecho, puedes o bien que se cargue el archivo PHP y muestre el mensaje, o recoger con jQuery mediante response el mensaje y meterlo dentro de append.

[emprear]

Primero hay que tener varias cosas a tener en cuenta
No todos los navegadores reconocen esos nuevos atributos de html5 para los inputs.
Validar un form de envío de emails con javascript tiene como único propósito mejorar la usabilidad por parte del usuario, presentar mensajes y evitar que el form redirija al action innecesariamente. Una validación seria, además debe hacerse en el lenguaje del servidor (php en tu caso), ya que javascript puede ser manipulado por el cliente, ó deshabiltado, incluso, el propio DOM puede ser facilmente modificado.

Ajax, de alguna forma te permite hacer ambas cosas a la vez, jquery te simplifica, aunque también es viable hacerlo con javascript puro.
Dado el tipo de validación que usa tu form, que es bastante básica, yo ni usaría jquery.

Saludos

[marmol]

WOU impresionante respuesta emprear. por favor sos un groso papa, tendria que haber dado, como minimo las gracias la perosna que solicito ayuda pero bueno, en fin. Te felicito saludoss