PHP

Ξ 58 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

58 Comentarios

  • Hola yo tenía el mismo problema que Marcos en el código.. me saltaba el error el la línea 41, el problema es que hay un error en el primero código que pusiste:

    /**/

    Te falto abrir las llaves despues de “if(!$_POST)”, quedaría asi el codigo..
    /**/

    Espero sirva de algo, saludos.

  • bueno no me deja pegar el codigo, la cosa es que hay que abrir llaves despues de “if(!$_POST)”, asi “if(!$_POST){”
    saludos

  • @German: Gracias por tu aporte, se me paso abrir la llave tal como indicas.

    Hemos dejado el código corregido en el tutorial.

    Saludos!

  • por favor alguien me ayude ya que he seguido los pasos y este error me salio cuando quise ver la pagina contacto.php

    Parse error: parse error, unexpected ‘@’ in /opt/www/html/elbros.com/contacto.php on line 180

    Quedo debo hacer para corregir este error

    Espero que den la respueste urgente por favor y los felicito por el trabajo que vienen haciendo.

    saludos!

  • @oscar: Puedes poner las líneas 179, 180 y 181 de tu código por favor? Con eso te podremos ayudar mejor.

    Saludos

  • <?php

    }

    /* Si no se ejecuto el if de más arriba, y por ende el formulario, pasara al else que detallamos a continuación, el cual se encargará de hacer todo el procesamiento */

    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 = “oscarmanager@hotmail.com”;

    $asunto = “Atencion al Cliente”;

    $error = 0;

    /* A continuación, recogemos los campos enviados por el formulario en el vector $_POST y los almacenamos en variables */
    $nombre = $_POST[’nombre’];
    $empresa = $_POST[’empresa’];
    $direccion = $_POST[’direccion’];
    $pais = $_POST[’pais’];
    $telefono = $_POST[’telefono’];
    $movil = $_POST[’movil’];
    $email = $_POST[’correo’];
    $sitio = $_POST[’sitio’];
    $comentario = $_POST[’mensaje’];

    /* Luego verificamos si los campos obligatorios han sido llenados, de lo contrario, marcamos un 1 en la variable $error */

    if($nombre == “” || $empresa == “” || $direccion == “” || $pais == “” || $telefono == “” $movil == “”$email == “” $sitio == “” $comentario == “”)

    {
    $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.”;
    }

    /* En caso de que no haya incurrido en ningún error, pasamos al else donde definiremos el proceso para enviar el mensaje */
    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: “.$nombre.””;
    $message .=”empresa: “.$empresa.””;
    $message .=”direccion: “.$direccion.””;
    $message .=”pais: “.$pais.””;
    $message =”telefono: “.$telefono.””;
    $message .=”movil: “.$movil.””;
    $message .=”email: “.$email.””;
    $message .=”sitio: “.$sitio.””;
    $message =”comentario: “.$comentario.””;
    /* 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.- Creamos un formulario donde se pida ingresar el rut, el codigo el siguiente, pueden encontrar la explicación de este tipo de formularios en nuestro Tutorial: Como hacer un formulario de contacto […]

  • men gracias por los aportes
    el del digito verificador me
    sirvio mucho
    gracias

  • Hola, gracias por el aporte.
    Lamentablemente no tuve suerte, cuando abro la página de contacto (http://www.rapidos.com.ar/contacto.php) me aparece el siguiente error:

    Parse error: syntax error, unexpected ‘@’ in /home/www/rapidos.com.ar/contacto.php on line 232
    Mirando el código, la línea 232 es la de mi correo…
    Pego el código acá para que veas si hay algo mal, muchas gracias!
    <?php

    if(!$_POST)
    {

    ?>
    <form id=”contacto” name=”contacto” method=”post” action=”contacto.php”>
    <table width=”380″ border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td height=”30″><table width=”343″ border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td width=”10″>&nbsp;</td>
    <td height=”30″ bgcolor=”#575748″><div align=”center”><span class=”login style2″>Envíenos un correo</span></div></td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td height=”15″><span class=”login”>Nombre y Apellido</span></td>
    </tr>
    <tr>
    <td height=”30″ class=”login”><label>
    <input name=”nombre” type=”text” id=”nombre” size=”51″ />
    </label></td>
    </tr>
    <tr>
    <td height=”15″><span class=”login”>Dirección de Correo Electrónico</span></td>
    </tr>
    <tr>
    <td height=”30″ class=”login”><label>
    <input name=”mail” type=”text” id=”mail” size=”51″ />
    </label></td>
    </tr>
    <tr>
    <td height=”15″><span class=”login”>Mensaje:</span></td>
    </tr>
    <tr>
    <td height=”100″ class=”login”><label>
    <textarea name=”mensaje” id=”mensaje” cols=”39″ rows=”5″></textarea>
    </label></td>
    </tr>
    <tr>
    <td height=”10″ class=”login”>&nbsp;</td>
    </tr>
    <tr>
    <td height=”20″ align=”right” class=”login”><table width=”220″ border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
    <td width=”100″ align=”center”><label>
    <input type=”reset” name=”reset” value=”Borrar” />
    </label></td>
    <td width=”100″ align=”center”><label>
    <input type=”submit” name=”Submit” value=”Enviar” />
    </label></td>
    <td width=”20″ align=”center”>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    </table>
    </form>    <?php

    }

    /* Si no se ejecuto el if de más arriba, y por ende el formulario, pasara al else que detallamos a continuación, el cual se encargará de hacer todo el procesamiento */

    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 = “cuevas_miriam@yahoo.com”;

    $asunto = “Contacto 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[‘nombre’];
    $email = $_POST[‘mail’];
    $comentario = $_POST[‘mensaje’];

    /* Luego verificamos si los campos obligatorios han sido llenados, de lo contrario, marcamos un 1 en la variable $error */

    if($nombre == “” || $email == “” || $comentario == “”)

    {
    $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:<br>”;
    echo “No ha rellenado todos los campos obligatorios.<br> Por favor vuelva <a href=\”javascript:history.back()\”>atras</a>.<br>”;
    }

    elseif($error==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>”;
    }

    /* En caso de que no haya incurrido en ningún error, pasamos al else donde definiremos el proceso para enviar el mensaje */
    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: “.$nombre.”<br>”;
    $message .=”mail: “.$email.”<br>”;
    $message .=”Mensaje: “.$comentario.”<br>”;
    /* 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.<br>”;
    echo “Nos contactaremos con Ud. a la brevedad.<br>”;

    }

    }

    ?>

  • @Miriam: Te recomiendo revisar las comillas. El error probablemente te lo esté dando porque no reconoce tu correo como cadena de texto, y eso se debe a que las comillas no están bien. Si copiaste y pegaste el texto desde acá es probable que se hayan pegado de otra forma.

    Saludos!

1 2 3 4 5 6

Deja un comentario

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

Gente linda que nos quiere

Donde mas estamos