│Archivo contacto.html │
Comenzaremos con la interfaz (lo que vera el visitante en nuestro sitio web).
<html> Abrimos la etiqueta que identificara nuestro codigo como HTML
<title> Formulario de Contacto </title> Titulo
<body> Comienzo del cuerpo de la pagina de contacto
<form action="enviar.php" method="post"> Abrimos el campo Form e indicamos que hacer al dar click en el boton "enviar" que es el campo del action, el nombre del archivo varia segun gusto, pero para este ejemplo usaremos el archivo "enviar.php"
<table width="360" align="left"> Creamos una tabla para mejor organizacion del contenido (estos datos pueden variar)<tr> <td colspan="2" align="center"> Contactese con nosotros Titulo que vera el visitante a nuestro sitio web.
</td></tr>
<tr>
<td colspan="2" align="center" >
Campos marcados con (*) son obligatorios Indicamos al usuario las condiciones del formulario
</td>
</tr>
Aqui comenzamos con los campos del Formulario
<tr><td width="159" >
<b>Nombre*:</b> Indicamos que lo que se debe llenar es el nombre (ponemos negrilla para mejor estetica)
</td>
<td >
<input type="text" name="nombre" maxlength="40" size=15 /> Creamos un campo de texto al cual le damos el nombre de "nombre", esa identificación es importante que la dejemos clara ya que sera usada en el siguiente archivo que recogera estos datos y los enviara por correo. Adicional, indicamos una capacidad máxima de 40 caracteres (letras) con la propiedad maxlenght="40" y finalizamos dando la propiedad size=5 que indicara el tamaño de la caja de texto.
</td>
</tr>
<tr><td width="159" >
<b>Asunto:</b> Indicamos que lo que se debe llenar es el Asunto del contacto (ponemos negrilla para mejor estetica)</td>
<td >
<input type="text" name="asunto" maxlength="40" size=15 /> Repetimos la operacion del campo de "nombre" pero cambiamos la identificacion a "asunto"
</td>
</tr>
<tr><td width="159">
<b>Correo Electronico*:</b> Indicamos que lo que se debe llenar es el correo electronico del contacto (ponemos negrita para mejor estetica)
</td>
<td width="189" >
<input type="text" name="correo" maxlength="50" size=15 /> Repetimos la operacion del campo de "nombre" y "asunto" pero ampliamos la propiedad "maxlength" debido a que muchos correos electronicos contienen muchos caracteres.
</td>
</tr>
</tr>
<td width="159">
<b>Mensaje*:</b> Indicamos que lo que se debe llenar es el mensaje (ponemos negrita para mejor estetica)
</td>
<td >
<textarea name="mensaje" cols="30" rows="5"> </textarea> Creamos el Area de Texto que sera el sitio donde nuestros visitantes podran poner sus comentarios, sugerencias etc. En este campo tenemos propiedades diferentes a las anteriores como son cols="30" indica el ancho en columnas del areade texto y la propiedad rows="5" indica la altura del area de texto en cantidad de Filas.
</td>
</tr>
<td></td>
<td width="189"><p align="left">
<input type="submit" value="Enviar!" title="Enviar" /> Creamos boton de Enviar, la propiedad value="Enviar!" es la que nos permite indicar el texto que tendra el boton.
<input type="reset" value="Borrar"/> Creamos un boton con el texto Borrar y la propiedad type="reset" que indica que al dar click borre la informacion del formulario.
</tr>
</table> Cerramos la etiqueta de Table que abrimos al inicio del formulario
</form> Cerramos la etiqueta form que indica el fin del campo.
</body>
</html>
• Hasta aqui nuestro formulario.
____________________________________________________________________________________________
│Archivo enviar.php │
• Ahora programaremos lo que nuestro visitante no vera, pero que se podria decir que es lo mas importante de nuestro formulario ya que es lo que hara que nos llegue la notificacion a nuestro correo electronico.
<?php Abrimos la etiqueta que indica que nuestro codigo sera PHP
$nombre_variable = $_POST['campo_a_recibir'] lo primero indica el nombre que daremos a los datos recogidos del campo identificado como "nombre" en el archivo contacto.html.
• Crearemos la variable "nombre" que sera la informacion recibida del campo de texto del archivo contacto.html el cual identificamos con la propiedad name="nombre", asi haremos con el resto de los datos o campos de texto creados anteriormente.
$nombres = $_POST['nombre'];
$correo = $_POST['correo'];
$asunto= $_POST['asunto'];
$mensaje = $_POST['mensaje'];
• Ahora vamos a verificar si los campos requeridos estan llenos, usaremos el condicional.
IF -ELSE │mas info en http://es.wikicode.org/index.php/Basics:Estructura_de_control_IF│ y haremos la siguiente consulta:
Si la variable nombre, correo y mensaje estan vacias, entonces muestre el "error 1" que definiremos mas adelante.
if($nombres == "" || $correo == "" || $mensaje == ""; ){
$error=1;
}
• Verificación si el email es correcto, si tiene el @ y el .algo (.com, .com.co, .co, etc.)
elseif(!eregi("^[a-z0-9]+([_.-][a-z0-9]+)*" ."@"."([a-z0-9]+([.-][a-z0-9]+)*)+".".[a-z]{2,}"."$",$correo)){
$error=2; Si el correo electronico no tiene un formato valido, mostrara el error numero 2
}
• Crearemos los mensajes de error.
if($error==1){ Si el error es el numero 1, esto sera lo que muestra.
echo "El siguiente error ha ocurrido!<BR>"; La funcion "echo" se usa para imprimir en pantalla.
echo "No ha llenado todos los campos obligatorios.<BR> Por favor vuelva <A> HREF="javascript:history.back()">atras</A>.<BR>";
exit;
}
elseif($error==2){ Esto mostrara el error numero 2
echo "El siguiente error ha ocurrido!<BR>";
echo "El correo electronico es invalido!<BR> Por favor vuelva <A HREF="javascript:history.back()">atras</A>.<BR>";
exit;
}
• Aqui definimos que si las condiciones anteriores no se cumplen (es decir, que no existen errores en el formulario), pasaremos a confirmar el envio al usuario y posteriormente a enviar el correo.
else{
print "<meta http-equiv="refresh" content="0;URL=gracias.html">";
}
• Aqui usamos la propiedad "refresh" que sera la encargada de "Refrescar" la pantalla por la pagina que indicamos posterior a ella que es "URL=gracias.html"
Ahora crearemos el correo que nos llegara a nuestra cuenta de correo. Todo debe ir en el mismo archivo enviar.php
$from = $correo ; Definimos la variable $from como remitente del mensaje el Correo electronico de nuestro visitante.
Crearemos los Header del correo electronico
$header = 'From: ' . $from . " rn";
Las siguientes 3 lineas no deben modificarse por ahora. El mensaje sera enviado en Textoplano para evitar inconvenientes de recepcion.
$header .= "X-Mailer: PHP/" . phpversion() . " rn";
$header .= "Mime-Version: 1.0 rn";
$header .= "Content-Type: text/plain";
• Ahora, vamos a construir el mensaje, el cual nos llevara: Nombres, Correo, Mensaje y la fecha del envio. Tenga en cuenta los . que se agregan al final de la variable $mensaje de la segunda linea, sera para concatenar la informacion en una sola variable.
$mensaje = "Este mensaje fue enviado por " . $nombres . " rn";
$mensaje .= "Su e-mail es: " . $correo . " rn";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " rn";
$mensaje .= "Enviado el " . date('d/m/Y', time());
• Ahora indicaremos la direccion de correo a la que seran enviados esos mensajes de Contacto, generalmente nuestro buzon de correo.
$para = '[email protected]';
• Ahora usaremos la funcion nativa de PHP llamada mail(), la cual sera la encargada de agrupar la informacion previamente recogida del formulario y enviarla a nuestros buzones de correo.
mail($para, $asunto, utf8_decode($mensaje), $header); Esta linea solo debe modificar las variables si han sido cambiadas por usted, pero deben mantener el orden.
?> Cerramos la etiqueta de PHP indicando la finalizacion de rutina de codigo.
• Con esto terminamos la creación del archivo enviar.php:
____________________________________________________________________________________________
│Archivo gracias.html │
• Vamos a crear la pagina que vera el usuario confirmando que el mensaje ha sido enviado con exito!
<html>
<title>Su mensaje ha sido enviado</title>
<body>
<table width="360" align="left">
<tr><td colspan="2" align="center">
<b>El Nombre de su empresa</b></td>
</tr>
<tr><td colspan="2" align="center">
Gracias por contactarnos, le responderemos en el menor tiempo posible</td>
</tr>
</table>
</body>
</html>
• Esto dándonos como resultado: