PHP

Ξ 55 comentarios

Cómo hacer un formulario de contacto

por Xabadu
Cómo hacer un formulario de contacto

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.

Cómo hacer un formulario de contacto

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:

Implementos necesarios:

  1. Un editor Web. Para este caso utilizaremos el clasico Adobe Dreamweaver CS3 (Pueden conseguir una versión de evaluación en el siguiente enlace).
  2. Un servidor Web que soporte PHP (pueden descargar Xampp desde este enlace), o bien un alojamiento Web que soporte el lenguaje (pueden encontrar algunos gratuitos en este enlace).

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:

Procedimiento:

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:

  1. Nombre – Textfield (campo de texto de largo 30) y le pondremos como nombre al textfield “nombre” (sin comillas).
  2. Correo Electrónico – Textfield (campo de texto de largo 30) y le pondremos como nombre al textfield “correo” (sin comillas).
  3. Sitio Web – Texfield (campo de texto de largo 30) y le pondremos como nombre al texfield “sitio” (sin comillas).
  4. Mensaje – Textarea (área de texto, largo y ancho pueden acomodarlo a su gusto) y le pondremos como nombre al textarea “mensaje” (sin comillas).

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:

  1. Action: contacto.php
  2. Method: POST

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.

Sello de GarantÍa CLH

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

55 Comentarios

  • 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 = [email protected];

    $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]+)*” .[email protected]([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.”;

    }

    }

    ?>

  • @juan manzor: ¿Agregaste el código que va antes del formulario?

    Saludos

  • 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 = [email protected];

    $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]+)*” .[email protected]([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.”;

    }

    }

    ?>
     

     

  • @Marcos: Donde te lanza error?

    Saludos

  • lo lanza en la linea 41

    Al modificarlo el error cambia entre las lineas 40 y 44 aprox
    Gracias

  • en el else

  • @Marcos:

    1.- ¿Por qué pusiste “t_else” ?

    2.- ¿Agregaste el código antes del formulario?

    Saludos

  • 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

  • @Marcos: ¿Puedes poner el código entero que utilizaste para poder detectar el error?

    Saludos

  • 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 = [email protected];

    $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]+)*” .[email protected]([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.”;

    }

    }

    ?>

     

     

1 2 3 6

Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos