¿Qué necesitamos?
Unos conocimientos básicos en html (con unos conocimientos de andar por casa nos es más que suficiente).
Un servidor que soporte PHP
Una base de datos en MySql y un mínimo control de las mismas.
El código del formulario.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formulario de prueba</title>
</head>
<body>
<div id="contenedor">
<form id="formulario" name="prueba" method="post" action="enviar.php" enctype="application_x-www-form-urlencoded">
<label>Nombre</label>
<input id="nombre" class="required" type="text" name="nombre" maxlength="60" />
<label>Apellidos</label>
<input id="apellidos" class="required" type="text" name="nombre" maxlength="60" />
<label>e-mail</label>
<input id="email" class="required email" type="text" name="nombre" maxlength="60" />
<input type="submit" name="enviar" id="enviar" value="Enviar Datos">
</form>
</div>
</body>
</html>
Este es un código para un formulario básico. Veamos el código con detenimiento. Primero declaramos el DOCTYPE y le damos un título al documento. Al “form” le damos el id=”formulario”. Puedes cambiar este id por el que estimes oportuno, pero ten en cuenta que este id va a ser necesario para la validación.
Este sencillo formulario tiene tres campos básicos: Nombre, apellidos y e-mail aunque se pueden utilizar tantos como necesitemos. A estos campos debemos darles un id y un name que les identifique en este caso: nombre, apellidos, email. Este id y el name también lo usaremos luego para hacer la conexión con la base de datos, tratadlos con cuidado. Además a cada campo que queramos que sea obligatorio le adjudicaremos la class=”required”, y si es un email class=”required email”. De esta forma comprobará que se han rellenado los campos antes de enviar el formulario y en el caso del e-mail verificará que es del tipo xxx@dominio.xx Esta validación nos da más posibilidades, pero antes vamos a ver como hacemos la validación
Validar el formulario:
<head>
<title>Formulario de Prueba</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$().ready(function() {
$("#formulario").validate();
});
// --></script>
</head>
Como la validación se hará por jquery lo primero que necesitamos serán los archivos js. Aquí os dejo el enlace para descargaros la última versión de jquery y la del plug-in de validación. Una vez que los hayamos descargados los guardamos en la carpeta js y los enlazamos a nuestro html como vemos en el código.
Ponemos en marcha la función a traves de la etiqueta “script” y definimos el id del formulario que vamos a validar. Como vemos en el ejemplo #formulario. Es importante que coincida con la que le dimos al form. Si queremos abrimos el archivo validate. js y buscamos las frases que aparecerán con la validación para traducirlas, ya que por defecto vienen en inglés. Es muy fácil. Además podremos ver todos los tipos de validaciones que nos permite este fantastico plug-in como por ejemplo por dígitos, url, etc.
Conexión a la base de datos MySql y envío de email.
Accede a la base de datos de MySql. Si no tienes muy claro como acceder, lo ideal es que lo hables con tu proveedor del alojamiento. Creas una nueva tabla llamada “prueba”, y en ella los campos que vamos a recojer, en nuestro caso nombre, apellidos, email. Yo además recomiendo crear un campo fecha, para saber con exactitud cuando se envió el formulario. Una vez que la base está hecha creamos nuestro archivo “enviar.php” para hacer la conexión. Veamos el código:
<?php
$fecha = date("d/m/Y H:i:s");
$nombre = $_REQUEST['nombre'] ;
$apellidos = $_REQUEST['apellidos'] ;
$email = $_REQUEST['email'] ;
$confirmacion = "Estos son los datos que has introducido. Muchas gracias por tu participación:<br /><br />Nombre: $nombre <br />Apellidos: $apellidos2";
mysql_connect ('servidor', 'usuario', 'contraseña') or die ('Error: ' . mysql_error());
mysql_select_db ('nombre_bd');
$query="INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES ('$fecha', '$nombre', '$apellidos', '$email')";
mysql_query($query) or die ('Error en la carga de datos');
mail($email, "Asunto del mensaje", $confirmacion, "From: correo@dominio.xx");
header("location:http://www.tudominio.es/respuesta.html")
?>
En primer lugar recojemos la información del formulario mediante la funcion REQUEST a las variables que deseemos. Lo más sencillo es llamar a la variable del mismo modo que hemos llamado a los id’s de cada campo. La variable “$nombre” recoje la información del campo con id “nombre”. Fácil, ¿verdad? Recogemos todos los datos y creamos una variable para el contenido del email de confirmacón: “$confirmacion”.
Ahora hacemos la conexión con la base de datos. Introducimos la dirección de nuestro servidor MySql, el usuario y la contraseña (estos datos os los dará vuestro proveedor de alojamiento), si falla nos aparecerá un error: mysql_connect (‘servidor’, ‘usuario’, ‘contraseña’) or die (‘Error: ‘ . mysql_error());
Seleccionamos la base de datos que queremos e introducirmos su nombre: mysql_select_db (‘nombre_bd’);
Luego hacemos el query para introducir los datos que hemos recogido en los campos que hemos creado en la base de datos. Para que entendais el código, le decimos que inserte en la tabla “prueba” en los campos que aparecen entre paréntesis los valores siguientes: $query=”INSERT INTO prueba (fecha, nombre, apellidos, email) VALUES (‘$fecha’, ‘$nombre’, ‘$apellidos’, ‘$email’)”; Cerramos la conexión con la base de datos.
Ahora enviamos un email de confirmación mediante la función mail. La función mail se construye en base a cuatro campos, que se ordenan de la siguiente manera: Dirección de destino, Asunto del mensaje, Contenido del mensaje y Dirección de envío. Así nuestra función quedaria de la siguiente manera: mail($email, “Asunto del mensaje”, $confirmacion, “From: correo@dominio.xx”); Como vemos en la dirección de destino tomamos la variable $mail, para que se envíe a la dirección que nos facilitaron. Para el contenido del mensaje utilizamos también la varibale $confirmación que habiamos declarado antes.
Para terminar yo utilizo la función “header” que me permite redirigir a una página de respuesta. Es una buena idea porque así informamos al cliente de que todo se ha procesado correctamente.
Y ya está. Fácil y muy útil.
Cualquier comentario o aportación será bienvenida.