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

También te podría interesar...
  • No hay posts relacionados.