[SOLUCIONADO] Formulario con Html5

danidg86 · #1 (**permalink**) 06/08/2014, 10:27

Hola.

No tengo conocimientos en PHP. He hecho una pagina con html5, css3 y un poco de Jquery.

He diseñado un formulario de contacto. ¿Como conseguir que, al pulsar submit, se mande un correo electronico a la direccion escogida con los datos rellenos en el formulario?.

Muchas gracias.

PHPeros · #2 (**permalink**) 06/08/2014, 11:29

HTML5 no ha implementado todavía esa característica

Eso tendrás que hacerlo con un lenguaje del lado del servidor como por ejemplo PHP, busca en Google.

danidg86 · #3 (**permalink**) 06/08/2014, 12:05

Entonces, sin saber php,

¿la unica solucion es:

method="post" action="mailto:[email protected]"

y que salga el Outlook?.

PHPeros · #4 (**permalink**) 06/08/2014, 13:03

Cita:

Iniciado por danidg86

Entonces, sin saber php,

¿la unica solucion es:

method="post" action="mailto:[email protected]"

y que salga el Outlook?.

danidg86 · #5 (**permalink**) 06/08/2014, 13:54

¿Y hay alguna manera de validar un formulario mediante javascript y expresiones regulares usando el action="mailto:[email protected]"?

He probado a hacer saltar una funcion onsubmit y entonces dejaba de salir el outlook. Quiero que solo aparezca el outlook si estan rellenas las casillas obligatorias.

uberalle · #6 (**permalink**) 06/08/2014, 16:32

El action se ejecuta siempre y cuando el 'onsubmit' no retorne falso. Si el action no se te ejecuta es que seguramente tengas puesto 'return false' en el 'onsubmit'.La manera de controlarlo es poniendo una condición, si la funcion que valida devuelve error al validar, que el onsubmit retorne falso para que el action no se ejecute; en caso de que se validen bien los datos, que retorne true.
Te recomiendo no añadir el JavaScript en el propio html, sino que todo el JavaScript lo incluyas en un archivo aparte. Es lo que se denomina JavaScript no Obstructivo o no molesto. Esto se haría generando los eventos en el documento aparte.

Un ejemplo de todo esto:

Código HTML:

<!DOCTYPE html>
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>Mi primer formulario</title>
		<script src="formulario.js"></script>
  	</head>
  	<body>
	       	<form id="formulario" action="enviar.php" >
                        <label for="nombre">Nombre</label><input id="nombre" name="nombre" type="text" />
			<input id="boton-aceptar" name="boton-aceptar"  type="submit" value="Aceptar" />
		</form>
    </body>
</html>

El documento JavaScript sería:

Código Javascript:

Ver originalfunction validaFormulario() {
    //Aquí van las condiciones que quieras añadir para que el formulario sea válido.
}
 
//Este es el evento load (cuando la página se carga); esto es necesario para que el javascript pueda reconocer los elementos del html. Si no se aplicara esta función, habría que añadir el código después del formulario.
window.onload = function() {
    var miFormulario = document.getElementById('formulario');
    // Este es el evento onsubmit del formulario, dentro de la función se añade lo mismo que se añadiría en el onsubmit que se escribe en html.
    miFormulario.onsubmit = function() {
        if (validaFormulario() == false) {
            return false;
        }
    }
    
}

Aunque para culminar quiero recordarte que lo más adecuado es que las condiciones para rellenar un formulario se evalúen en el servidor, ya sea con php o cualquier otro lenguaje. El motivo es que si un visitante no posee javascript, podrá enviar el formulario con los datos sin validar; o incluso, ya dependiendo como hayas desarrollado todo el formulario, podría no funcionarle correctamente. Comprendo que aún no sabes php y que deseas hacer un formulario de un modo sencillo, solo te comento esto para que sepas los pros y los contras de validar un formulario desde javascript y no desde el lenguaje del servidor. Un saludo.

Rafael · #7 (**permalink**) 06/08/2014, 18:43

No. El que no sepas php no implica que mágicamente se solucione de otra manera.

El "malito" es engañarte a tí mismo de que estás haciendo un formulario... hasta validado y todo, para salir con el "malito". Puaj.

Algunos sistemas de hosting tienen preinstalado un mailer, que es bastante simple de preparar. Creo recordar que había algún servicio para enviar correos, pero lo dudo ya que seguro lo usarían para enviar spam.

Tienes 2 opciones.

Usar algo como google forms http://www.google.com/google-d-s/createforms.html, o contratar a alguien para que te instale un mailer. Uno clásico es este: http://www.scriptarchive.com/formmail.html pero también hay versión php.

Benderzuelo · #8 (**permalink**) 07/08/2014, 09:17

si quieres enviarlo es tan fácil como tener un archivo php con lo siguiente

Código PHP:

Ver original$nombre = $_POST['nombre'];
$teléfono = $_POST['telefono'];
// asi con todos los campos
 
y al final los montas asi:
 
$mensaje = 'Hola $nombre te envía el siguiente mensaje:$mensaje';// etc...
 
if(mail($email, $asunto,$mensaje)){
      echo 1;
}else{
      echo 0;
}

Bueno esto a lo bruto y sin validar nada si quieres saber mas te amplio...
después en tu HTML una funcion que haga esto:

Código Javascript:

Ver originalfunction enviaCorreo(){
     var url = 'ruta donde tengas el archivo php de arriba';
     var data = $('id del formulario').serialize();
     $.post(url, data, function(res){
            if (res == 1){
                // enviado
            }else{
                // fallo
            }
     });
}

Todo esto así a lo rápido y bruto es para que cojas el concepto

danidg86 · #9 (**permalink**) 07/08/2014, 10:14

Gracias a todos por la respuesta, pero sin ningun conocimiento de PHP, no me atrevo a hacer copia y pega de algo que no puedo abarcar.

Benderzuelo · #10 (**permalink**) 07/08/2014, 10:24

Yo si quieres te lo hago bien, dime los campos y te paso la programación, es poca cosa danig86

danidg86 · #11 (**permalink**) 07/08/2014, 14:15

Los campos son: nombre o empresa, e-mail, telefono, asunto y un text-area llamado consulta.

¿Php es un documento js, verdad?

¿La apariencia del formulario puedo modificarla con los estilos css igualmente, no?

¿Necesitas algun otro dato?

De verdad, muchisimas gracias.

Benderzuelo · #12 (**permalink**) 08/08/2014, 03:26

Cita:

Iniciado por danidg86

Los campos son: nombre o empresa, e-mail, telefono, asunto y un text-area llamado consulta.

¿Php es un documento js, verdad?

¿La apariencia del formulario puedo modificarla con los estilos css igualmente, no?

¿Necesitas algun otro dato?

De verdad, muchisimas gracias.

Hola de nuevo, el .js es JavaScript, lo que tendrías que tener es lo siguiente, en el documento HTML:

Código Javascript:

Ver originalfunction enviarMail(){
    var url = 'actions/enviarMail.php';//aquí la ruta donde pongas tu php
    var data = $('#id_del_formulario').serialize();
    $.post(url, data, function(res){
         if(res == 1){
              alert('Mensaje enviado con exito');
         }else{
              alert('Mensaje falló');
         }
    });
}

En el botón del formulario que tiene que ser tipo button para que no recargue la pagina poner el evento onClick="enviarMail()"

Después el PHP sería así:

Código PHP:

Ver original$nombre = $_POST['nombre'];//aquí no me ha quedado claro el nombre del campo pon el mismo que tenga el atributo name del campo
$email = $_POST['e-mail'];
$asunto = $_POST['asunto'];
$teléfono = $_POST['telefono'];
$consulta = $_POST['consulta'];
 
$mensaje = 'Nombre: '.$nombre.', ' Email: '.$email.', Telefono: '.$teléfono.' la consulta:' .$consulta;
 
if(mail($email, $asunto, $mensaje)){
     echo 1;
}else{
     echo 0;
}

Algo así debería de funcionarte