Diseño Web PHP
Cuando hacemos nuestra página Web, un aspecto muy importante que nunca debemos dejar de lado es otorgarle a nuestros visitantes un medio de contacto con nosotros, en caso de que tengan consultas, comentarios, o bien esten interesados en algún bien o servicio que ofrezcamos.
Hay algunos que prefieren otorgar información a los usuarios sobre como ponerse en contacto con nosotros (Dirección, teléfono, correo electrónico, etc). Sin embargo, el método más efectivo es sin duda un formulario mediante el cual un usuario en particular puede contactarnos tan solo llenando unos campos y presionando un simple de botón. ¿Fácil y bonito eh?.
Como siempre, todo el detalle de esto, después del salto.
Antes de entrar de lleno, un par de explicaciones:
1.- Antiguamente, los formularios de contacto iban directamente relacionados a un envío de la información vía correo electrónico, desde la dirección de quien enviaba la información hacia la nuestra. Esto era bastante molesto e incómodo para muchos usuarios, ya que al estar vinculado el formulario a un link de tipo “mailto”, se activaba automáticamente el cliente de correo por defecto del usuario (Outlook, Outlook Express, Eudora, etc), el cual muchos usuarios no tenían configurado con una cuenta y por ende se perdía la oportunidad de contacto.
Con la salida de los lenguajes dinámicos de programación Web (PHP, JSP, ASP, etc), se empezó a implementar un envío de formularios vía correo electrónico pero a través del servidor Web donde estaba alojada la página. Esto logró que el usuario solo se preocupará de ingresar sus datos y enviarlos, dejando al servidor para que se encargara del resto, lo cual obviamente se tradujo en una mayor comodidad para los visitantes.
2.- Tomando eso en cuenta, hoy construiremos un sencillo formulario en PHP que haga justamente esa función, al cual le añadiremos una pequeña sentencia, la cual se encargará de validar la dirección de correo ingresada por el usuario.
Con eso claro, vamos a lo que utilizaremos:
Además, si nunca han trabajado con formularios, recomendamos leer este tutorial donde cubrimos el proceso de creación en forma detallada.
Con todo eso listo, vamos, manos a la obra:
1.- Lo primero que haremos, será crear en Dreamweaver, una nueva página en formato PHP, para esto vamos a Archivo > Nuevo > PHP. Esta página la guardaremos de inmediato con el nombre de contacto.php
2.- Una vez que lo creamos, procederemos a confeccionar nuestro formulario de contacto, el cual deberá contener los siguientes campos:
Además debemos agregar un botón más abajo dentro del mismo formulario que tenga un action de tipo Submit Form, al cual en su valor le pondremos “Enviar”. Opcionalmente pueden agregar un botón de tipo Reset Form para limpiar los datos.
Es conveniente además agregar un pequeño texto sobre el formulario que diga “Los campos con * son obligatorios” y consecuentemente agregar un asterisco al lado de Nombre, Correo electrónico y Mensaje. Luego validaremos que esos datos se hayan ingresado.
Ahora, hacemos click sobre el formulario y en el Inspector de propiedades modificamos los siguientes valores:
Al terminar deberiamos tener algo como esto:
Propiedades – Click para agrandar
3.- Con esto hemos terminado el diseño de nuestro formulario, ahora pasaremos a confeccionar el código que hará todo el proceso de envío de la información. Para esto, en la vista de diseño de Dreamweaver (en la que hemos estado trabajando hasta ahora) nos situamos antes del formulario y pasamos a la vista de código, donde debemos insertar el siguiente código:
Básicamente lo que le estamos diciendo es “Si no se ha enviado información desde el formulario, muestre lo siguiente”, con lo que mostrará el código que viene a continuación, o sea el correspondiente al formulario vacío.
4.- Luego del fin del código HTML correspondiente al formulario (luego de la etiqueta </form>), debemos agregar el siguiente código, el cual irá con comentarios entremedio en negrita, cursiva y entre /* y */ para ir entendiendo lo que vamos haciendo:
Y con eso tenemos nuestro formulario de contacto listo. Podemos subirlo a nuestro sitio Web y solo esperar que alguien nos contacte.
Algunas notas adicionales:
1.- Para el funcionamiento de este formulario, se requiere que el servidor donde alojemos la página permita el envío de correos electrónicos a través de el. En la mayoría de los alojamientos está activada la opción, pero en caso de que les presente algún problema, deben ponerse en contacto con el administrador de su servicio.
2.- Este formulario es relativamente básico. Pueden agregar más campos según sea su conveniencia, solo asegurandose de hacer el respectivo rescate de datos y la adición correspondiente al mensaje que se terminará enviando.
Como siempre, este tutorial ha sido desarrollado, probado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de Garantía.
Cualquier duda, consulta o problema, pueden dejarnos unas líneas en el área habilitada a continuación.
Esperamos que este tutorial haya sido de utilidad para Uds.
Muchas gracias por leer y será hasta una próxima oportunidad.
12:43:42 am
he tratado por miles de partes… pero me arroja error
quisiera me ayudaran a la brevedad plz
Nombre:
Pais:
E-mail:
Mensaje:
Limpiar
Enviar
<?php
(aqui) }
(aqui) else
}
$recipiente = “shuanito@gmail.com”;
$asunto = “Contacto Sitio Web”;
$error = 0;
$nombre = $_POST[’nombre’];
$email = $_POST[’email’];
$pais = $_POST[’pais’];
$comentario = $_POST[’mensaje’];
if($nombre == “” || $email == “” || $comentario == “”)
{
$error=1;
}
elseif(!eregi(”^[a-z0-9]+([_\\.-][a-z0-9]+)*” .”@”.”([a-z0-9]+([\.-][a-z0-9]+)*)+”.”\\.[a-z]{2,}”.”$”,$email)){
$error=2;
}
if($error==1){
echo “El siguiente error ha ocurrido:”;
echo “No ha rellenado todos los campos obligatorios. Por favor vuelva atras.”;
}
elseif($error==2){
echo “El siguiente error ha ocurrido:”;
echo “El correo electronico es invalido. Por favor vuelva atras.”;
}
else{
$message =”nombre: “.$nombre.””;
$message .=”email: “.$email.””;
$message .=”sitio web: “.$sitio.””;
$message .=”Mensaje: “.$comentario.””;
$message = stripslashes($message);
$headers = “MIME-Version: 1.0\r\n”;
$headers .= “Content-type:text/html; charset=iso-8859-1\r\n”;
$headers .= “From: $email\r\n”;
$headers .= “Repaly-to: $email\r\n”;
$headers .= “Cc: $email\r\n”;
mail($recipiente,$asunto,$message,$headers);
echo “El mensaje ha sido enviado.”;
echo “Nos contactaremos con Ud. a la brevedad.”;
}
}
?>
12:45:46 pm
@juan manzor: ¿Agregaste el código que va antes del formulario?
Saludos
5:44:51 pm
Hola, me gusto mucho esto, pero he modificado por todos lados el codigo donde dice el explorador que encuentra el error, pero no hay caso.
Una ayudta plis
No se si sera mucha patudez pero aca va el codigo a ver si le pueden pegar una miradita. Gracias
Documento sin título
Formulario de Contacto
Los campos marcados con * son obligatorios
Nombre del apoderado:
*
Nombre del alumno:
*
Correo eletronico del apoderado:
*
Mensaje:
<?php
}
t_else
{
$recipiente = “ebelg@ctcinternet.cl”;
$asunto = “Contacto desde Sitio Web”;
$error = 0;
$apoderado = $_POST[’apoderado’];
$alumno = $_POST[’alumno’];
$correo = $_POST[’correo’];
$mensaje = $_POST[’mensaje’];
if($nombre == “” || $email == “” || $comentario == “”)
{
$error=1;
}
elseif(!eregi(”^[a-z0-9]+([_\\.-][a-z0-9]+)*” .”@”.”([a-z0-9]+([\.-][a-z0-9]+)*)+”.”\\.[a-z]{2,}”.”$”,$email)){
$error=2;
}
if($error==1){
echo “El siguiente error ha ocurrido:”;
echo “No ha rellenado todos los campos obligatorios. Por favor vuelva atras.”;
}
elseif($error==2){
echo “El siguiente error ha ocurrido:”;
echo “El correo electronico es invalido. Por favor vuelva atras.”;
}
else{
$message =”Nombre del Apoderado: “.$apodeardo.””;
$message .=”Nombre del alumno: “.$alumno.””;
$message .=”Direccion de correo del apoderado: “.$correo.””;
$message .=”Mensaje: “.$mensaje.””;
$message = stripslashes($message);
$headers = “MIME-Version: 1.0\r\n”;
$headers .= “Content-type:text/html; charset=iso-8859-1\r\n”;
$headers .= “From: $email\r\n”;
$headers .= “Repaly-to: $email\r\n”;
$headers .= “Cc: $email\r\n”;
mail($recipiente,$asunto,$message,$headers);
echo “El mensaje ha sido enviado.”;
echo “Muchas gracias por comunicarse con nosotros.”;
}
}
?>
9:37:40 pm
@Marcos: Donde te lanza error?
Saludos
7:48:38 am
lo lanza en la linea 41
Al modificarlo el error cambia entre las lineas 40 y 44 aprox
Gracias
7:49:10 am
en el else
8:40:36 pm
@Marcos:
1.- ¿Por qué pusiste “t_else” ?
2.- ¿Agregaste el código antes del formulario?
Saludos
8:44:38 am
Hola, disculpa la demora
Puse t_else ya que cuando el explorador me arrojaba el error me decia error de sintaxis y me daba esa opcion, como te podras dar cuenta no cacho nada de php.
Con respecto al codigo del principio, si, lo agregue como decia el tutorial.
En todo caso me da error al poner “else” como al poner “t_else” y en la misma linea.
Gracias por tu ayuda
12:01:52 pm
@Marcos: ¿Puedes poner el código entero que utilizaste para poder detectar el error?
Saludos
2:00:41 pm
ACA VA TODO EL CODIGO
GRACIAS POR TU AYUDA
Documento sin título
Formulario de Contacto
Los campos marcados con * son obligatorios
Nombre del apoderado:
*
Nombre del alumno:
*
Correo eletronico del apoderado:
*
Mensaje:
<?php
{
else
}
/* Partimos por inicializar 3 variables: $recipiente, $asunto y $error, las cuales contendrán respectivamente el correo al que llegará la información (nuestro), el asunto del correo que nos llegará y una marca para definir los tipos de errores que se puedan dar dentro del proceso. Pueden editar los valores de $recipiente y $asunto según deseen */
$recipiente = “ebelg@ctcinternet.cl”;
$asunto = “Contacto desde Sitio Web”;
$error = 0;
/* A continuación, recogemos los campos enviados por el formulario en el vector $_POST y los almacenamos en variables */
$nombre = $_POST[’apoderado’];
$alumno = $_POST[’alumno’];
$email = $_POST[’correo’];
$comentario = $_POST[’mensaje’];
/* Luego verificamos si los campos obligatorios han sido llenados, de lo contrario, marcamos un 1 en la variable $error */
if($nombre == “” || $alumno == “” || $email == “”)
{
$error=1;
}
/* Luego validamos si el correo ingresado es valido mediante la siguiente sentencia. Si no es válido, le asignamos valor 2 a la variable $error */
elseif(!eregi(”^[a-z0-9]+([_\\.-][a-z0-9]+)*” .”@”.”([a-z0-9]+([\.-][a-z0-9]+)*)+”.”\\.[a-z]{2,}”.”$”,$email)){
$error=2;
}
/* A continuación, definimos nuestros mensajes de error en caso de que se haya caído en alguno de los pasos anteriores, mediante un if y luego mostrando el mensaje correspondiente. Además proveemos un enlace para que vuelva al formulario mediante la funcion back de Javascript */
if($error==1){
echo “El siguiente error ha ocurrido:”;
echo “No ha rellenado todos los campos obligatorios. Por favor vuelva atras.”;
}
elseif($error==2){
echo “El siguiente error ha ocurrido:”;
echo “El correo electronico es invalido. Por favor vuelva atras.”;
}
else
{
/* Definimos una variable $message , en la cual iremos agregando la información recogida en las variables y la iremos concatenando (uniendo) mediante un punto para dejar dentro de una sola variable toda la información */
$message =”nombre: “.$apoderado.””;
$message .=”alumno: “.$alumno.””;
$message .=”email: “.$correo.””;
$message .=”comentario: “.$mensaje.””;
/* Luego, dentro de la misma variable $message, guardamos el resultado de someterla a la función stripslashes pasandole como parametro el mismo mensaje. Lo que hará es retirar todas las ” \” existentes antes de las comillas simples o dobles. */
$message = stripslashes($message);
/* A continuación creamos una variable $headers, en la cual incluiremos todos las cabeceras necesarias para un envío de correo electrónico. El texto a continuación es por defecto así que es recomendable no modificarlo. */
$headers = “MIME-Version: 1.0\r\n”;
$headers .= “Content-type:text/html; charset=iso-8859-1\r\n”;
$headers .= “From: $email\r\n”;
$headers .= “Repaly-to: $email\r\n”;
$headers .= “Cc: $email\r\n”;
/* Y finalmente realizamos el envío del mensaje mediante la función mail de PHP, la cual nos solicita como parametro: el correo de destino ($recipiente), el asunto ($asunto), el mensaje ($message) y las cabeceras ($headers) */
mail($recipiente,$asunto,$message,$headers);
/* Si todo ha salido bien, presentamos un mensaje de éxito de envío. Pueden personalizarlo según quieran */
echo “El mensaje ha sido enviado.”;
echo “Nos contactaremos con Ud. a la brevedad.”;
}
}
?>