Cómo: Crear un Formulario de Contacto

julio 22, 2008

En este tutorial te enseñare a diseñar un formulario de contacto personalizado para tu sitio web a partir de cero. Se tratarán todos los aspectos del diseño, CSS, HTML y PHP.

El resultado funcionara completamente y se verá algo así:

Como se puede ver el formulario de contacto consta de 2 partes: una que contiene la información del contacto remitente, y otra parte en relación con el mensaje. El formulario también integra un simple y básico sistema Captcha que funciona bastante bien.

La parte HTML

Clic para ver Texto Plano
PHP:
  1. <form action="contacto.php" method="POST">
  2. <fieldset>
  3. <legend>Tu información</legend>
  4. <p style="margin-left:70px">
  5. <label><strong>Nombre:</strong></label>(requerido)<br />
  6. <input type="text" name="name" value=""  />
  7. </p>
  8. <p style="margin-left:70px">
  9. <label><strong>E-mail:</strong></label>(requerido)<br />
  10. <input type="text" name="email" value="" />
  11. </p>
  12. <p style="margin-left:70px">
  13. <label><strong>Asunto:</strong></label>
  14. (requerido)<br />
  15. <input type="text" name="subject" value="" />
  16. </p><br />
  17. </fieldset>
  18. <fieldset>
  19. <legend>Tu Mensaje</legend>
  20. <p style="margin-left:70px">
  21. <label><strong>Mensaje:</strong></label>
  22. (requerido)<br />
  23. <textarea name="comments" rows="7" cols="50"></textarea>
  24. </p>
  25. <p style="margin-left:70px">Códio de seguridad : <strong>56728</strong><br />
  26. <label><strong>Por favor escribe el código de arriba :</strong></label>(requerido)<br />
  27. <input type="text" name="spam" value="" />
  28. </p>
  29. <p style="margin-left:70px">
  30. <input class="button" name="submit" type="submit" value="Enviar!" />
  31. </p>
  32. </fieldset>
  33. </form>

Como puedes ver en la primera línea, el código invoca a un archivo llamado "contacto.php". Este es el archivo PHP que vamos a utilizar realmente para enviar el formulario de contacto.

La parte CSS

Hemos creado el formulario HTML. Es hora de mejorarlo un poco. Y lo haremos mediante la definición de propiedades con CSS.

Clic para ver Texto Plano
CSS:
  1. input, textarea {
  2. border:1px solid #666666;
  3. font-family:Verdana,Tahoma,Arial,Sans-Serif;
  4. font-size:1em;
  5. margin:0;
  6. padding:4px;
  7. background:#fff;
  8. }
  9.  
  10. input:focus, input:hover,textarea:focus, textarea:hover{
  11. border: 1px solid #000;
  12. background:url(/contact_crazyleaf.gif) top right no-repeat;
  13. }
  14.  
  15. label {
  16. margin:2px;
  17. }
  18.  
  19. input {
  20. width:300px;
  21. }
  22.  
  23. .button {
  24. margin:0 0 15px 0;
  25. background:url(div_back_contact.gif);
  26. color:#000;
  27. font-weight:bold;
  28. width:310px;
  29. }

Como veras el código invoca 2 imágenes, la primera se trata de una pequeña imagen que aparece en todas las cajas de texto al pasar el cursor sobre ellos, algo así:

La segunda imagen se trata de un background para el botón "Enviar" de nuestro formulario de contacto así:

Puedes cambiarles el nombre si así lo deseas.

La parte de PHP

Esta es la parte más difícil.

En primer lugar necesitas crear un archivo (con un Bloc de notas u otro editor de texto) llamado contacto.php. El nombre de este archivo lo puedes cambiar, pero también tendrás que cambiar la primera línea del código HTML indicando el nuevo nombre. Además tienes que crear 2 archivos HTML, uno llamado gracias.html, y otro error.html. El primer archivo se cargará si la información del formulario ha sido enviado con éxito y el segundo si hubo errores.

El archivo PHP se compone de varias partes. La primera parte define algunas constantes, al igual que la dirección de correo electrónico al que la información será enviada ($mailto), la URL del archivo que contiene el código HTML ($formurl), la URL de la página de agradecimiendo ($thankyouurl) , Y la URL de la página de error ($errorurl).

La segunda parte dice la información enviada por el formulario HTML.

En la tercera parte se verifica con dos instrucciones PHP, si los campos obligatorios se han llenado y si el captcha se ha introducido correctamente.

La cuarta y última parte del script compone el mensaje y te lo envía a ti (a la dirección de correo que definiste en la primera parte del código).

Clic para ver Texto Plano
PHP:
  1. <?
  2. $mailto = 'tu@email.com' ;
  3. $subject = "Contacto - XeroBlog" ;
  4. $formurl = "http://www.ejemplo.com/contacto.html" ;
  5. $errorurl = "http://www.ejemplo.com/error.html" ;
  6. $thankyouurl = "http://www.ejemplo.com/gracias.html" ;
  7.  
  8. // -------------------- TERMINA LA SECCION CONFIGURABLE ---------------
  9.  
  10. $name = $_POST['name'] ;
  11. $email = $_POST['email'] ;
  12. $subject = $_POST['subject'] ;
  13. $comments = $_POST['comments'] ;
  14. $spam=$_POST['spam'] ;
  15. $http_referrer = getenv( "HTTP_REFERER" );
  16.  
  17. if (!isset($_POST['email'])) {
  18.     header( "Location: $formurl" );
  19.     exit ;
  20. }
  21. if (empty($name) || empty($email) || empty($subject) || empty($comments) || $spam!="56728") {
  22.    header( "Location: $errorurl" );
  23.    exit ;
  24. }
  25. $name = strtok( $name, "\r\n" );
  26. $email = strtok( $email, "\r\n" );
  27. $subject = strtok( $subject, "\r\n" );
  29. $comments = stripslashes( $comments );
  30. }
  31.  
  32. $messageproper ="---------- XeroBlog.com mensaje ----------\n\n" . "\Enviado por : " . $name . "\nEmail : " . $email . "\nAsunto : " . $subject . "\n\n\nMensaje : " . $comments;
  33.  
  34. mail($mailto, $subject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" );
  35. header( "Location: $thankyouurl" );
  37. ?>

Eso es todo. El formulario está completo. Puedes verlo en acción en nuestra demo.

Enlace | Designing a stylish contact form for your portfolio

Compártelo:


Si te gusto este post, no olvides suscribirte a mi RSS!

  1. 8 Comentarios para “Cómo: Crear un Formulario de Contacto”

  2. hola sabes ke hice el formulario pero no me llega la informacion a mi correo puse en esta linea

    $mailto = ‘tu@email.com’
    puse mi correo pero no llega nada ..me uedes ayudar por fa ….
    graxias

    Por feña el jul 23, 2008

  3. Primero felicito por el laburo de explicar como seria la creacion de un formulario. En segundo lugar me gustaria mucho que me puedas brindar mas informacion detallada de como poner todo esto en mi Web, desde como creo el archivo CSS, hasta donde guardo el archivo contacto.php, desde ya muchas gracias…

    saludos…

    Por Juan Manuel el jul 28, 2008

  4. holaa he colocado los codigos y todo, hice las paginas de error y gracias y al enviar ok llega la info del form al correo que coloco pero no sale pagina de gracias al final despeusde enviar, me aparece esto:

    Warning: Cannot modify header information – headers already sent by (output started at /home/sites/lolipop.jp/users/lolipop.jp-dp59273650/web/formulario/contacto.php:10) in /home/sites/lolipop.jp/users/lolipop.jp-dp59273650/web/formulario/contacto.php on line 39

    Por chan shigematsu el ago 1, 2008

  5. hola..cambio el codigo para poner mi correo y no me llegan los correos..podrias ayudarme por favor..saludos

    Por Francisco el ago 19, 2008

  6. cuadno envio el formulario me da el siguiente error, saben que puede ser ?

    r\nReply-To: \”$name\” \r\nX-Mailer: chfeedback.php 2.04″ ); header( “Location: $thankyouurl” ); exit ; ?>

    Por Luis el ago 21, 2008

  7. hola … cuando le kito lo de validad me marca error! yan o me lee el php! como puedo kitarle encones lo del spam, gracias

    Por ame el sep 10, 2008

  8. Gracias por ayudarnos a hacer cositas que nos entretienen aprendiendo.
    Voy a practicar un poco la elaboración de los códigos y espero que me funcionen bien.

    Por Joaquín Restrepo el dic 22, 2008

  1. 1 Trackback(s)

  2. jul 22, 2008: Bitacoras.com

Deja un comentario



© 2008 - XeroBlog - Theme hecho por ChiQ M y editado por Corralitos.