Formulario de Contacto

   Algo muy útil al momento de hacer un website es tener el formulario de contactos, ¿como crearlo?, ¿como hacer un formulario de contacto?, PHP es la mejor opción para esto, hace poco tuve que diseñar uno así que explico lo que hice y las funciones que utilice.

   Para esto utilice 4 archivos, aunque podemos utilizar solo 3 yo prefiero 4 y explico el porque... Necesitamos el formulario, proceso, el resultado y la validación, podemos colocar el formulario en un archivo y el proceso junto con el resultado en otro, pero no me gusta ya que de esta forma no se puede personalizar mucho el mensaje y queda poco entendible al momento de modificarlo.

   Bueno, una vez explicado esto vamos a los archivos, primero el contenedor del formulario, consiste en crear medianto las etiquetas HTML el formulario, recordemos que cada uno son totalmente personalizables, este llamemoslo "contacto.php"...

<div id="contactform">
 <h2>Contacto</h2>
  <p>Algun texto para el usuario:</p>
 <form id="contact-form" method="post" onsubmit="return emailCheck(this.email.value);" action="enviar.php">
  <fieldset><br/>
 <legend>&nbsp;Datos Personales &raquo;</legend>
   <div>
  <label for="visitorname">
   &nbsp;<span style="color:#c00;">*</span>Nombre:&nbsp;
  </label>
  <input size="32" type='text' name="name" id="visitorname" title="Tu Nombre" />&nbsp;
  <label for="visitorsurname">
         &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#c00;">*</span>Apellido:
  </label>
  <input size="33" type='text' name="surname" id="visitorsurname" title="Tu Apellido" />
   </div>
   <div style="padding:3px"></div>
   <div>
  <label for="visitormail">
   &nbsp;<span style="color:#c00;">*</span>Direcci&oacute;n de correo:&nbsp;
  </label>
  <input size="23" type="text" name="email" id="visitormail" value="<?php echo $email; ?>" title="Tu dirección de correo" />
  <label for="phone">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Teléfono:</label>
         <input onkeyup="var no_digito = /D/g; this.value = this.value.replace(no_digito , '');" size="33" type="text" name="phone" id="phone" title="Tu número de telefono" />
   </div>
   <div style="padding:3px"></div>
   <div>
  <label for="url">&nbsp;&nbsp;Página Web:</label>
   <input size="77" type="text" name="url" id="url"  title="Tu página web" />
   </div>
   <div style="padding:3px"></div>
   <div>
  <label for="postcode">&nbsp;&nbsp;Codigo Postal:</label>
    <input onkeyup="var no_digito = /D/g; this.value = this.value.replace(no_digito , '');" size="14" onblur='if (this.value == "") {this.value = "&nbsp;Venezuela: 4001";}' onfocus='if (this.value == "&nbsp;Venezuela: 4001") {this.value = "";}' value='&nbsp;Venezuela: 4001' type="text" name="postcode" id="postcode" title="El codigo postal de tu localidad" /></div><br/>
  </fieldset>
  <fieldset><br/>
    <legend>&nbsp;Envianos tu Mensaje &raquo;</legend>
   <div>
  <label for="subject">
   &nbsp;<span style="color:#c00;">*</span>Motivo del mensaje:
  </label>
  <input size="23" onblur='if (this.value == "") {this.value = "Asunto";}' onfocus='if (this.value == "Asunto") {this.value = "";}' value='Asunto' type="text" name="sub" id="subject" title="El motivo de tu mensaje" />
   </div>
   <div style="padding:3px"></div>
   <div>
  <label for="notes">
    &nbsp;<span style="color:#c00;">*</span>Cuerpo del Mensaje:
  </label>
   <textarea onblur='if (this.value == "") {this.value = "Escribe tu mensaje aquí...";}' onfocus='if (this.value == "Escribe tu mensaje aquí...") {this.value = "";}' name="text" id="notes" rows="8" cols="50" onkeyup="val=this.value; if (val.length > 800) { alert('Lo siento, has sobrepasado el limite de 800 caracteres'); this.value = val.substring(0,800); }  this.form.count.value=800-parseInt(this.value.length); "><?php echo $text; ?>Escribe tu mensaje aquí...</textarea>
   </div>
   <div style="padding:3px"></div>
   <div>
    <label for="count">&nbsp;&nbsp;&nbsp;Caracteres disponibles:</label>
  <input type="text" name="count" id="counter" value="800" size="2" readonly="readonly"/>
     <?php $text_len = preg_match_all('/./', $str, $dummy); ?>
   </div><br/>
    </fieldset>
    <br/>
    <div>
     <input type="submit" id="submit" name="enviar" value="Enviar &raquo;" title="Pulsa una vez para enviar el mensaje, y espera a la pantalla de confirmación" />
    </div>
  </form>
 <br/><p><span style="color:#c00;">*</span>Campos Obligatorios</p>
 <p><span style="color:red;font-weight:bold;"><?php echo $error ?></span></p>
 <script type="text/javascript" src="var.js"></script>
</div>

   Ahora vamos a procesar el formulario enviado mediante otro archivo, el archivo sera el nombre al que hace referencia el anterior, en este caso "enviar.php"...

<?php
    $correo = $_POST['correo'];
    $name = $_POST['name'];
    $surname = $_POST['surname'];
    $email = $_POST['email'];
 $url = $_POST['url'];
 $phone = $_POST['phone'];
 $postcode = $_POST['postcode'];
 $sub = $_POST['sub'];
    $text = $_POST['text'];
 $title = "ALGUN TITULO";

 if (empty($name)) $error .= "<p style='color:red;font-size:12px;font-weight:bold;'>No has introducido tu nombre</p>";
 if (empty($surname)) $error .= "<p style='color:red;font-size:12px;font-weight:bold;'>No has introducido tu apellido</p>";
 if (empty($email)) $error .= "<p style='color:red;font-size:12px;font-weight:bold;'>No has introducido tu dirección de e-mail</p>";
 if (empty($sub)) $error .= "<p style='color:red;font-size:12px;font-weight:bold;'>No has introducido un titulo para el mensaje</p>";
 if (empty($text)) $error .= "<p style='color:red;font-size:12px;font-weight:bold;'>No has escrito nada en el cuerpo del mensaje</p>";
 $str = $text;
 $text_len = strlen($str);
 if($text_len > 800) {
  $error .= "Lo siento, has superado el maximo de 800 caracteres en el cuerpo del mensaje. El numero total de caracteres es $text_len - por favor, acorta tu mensaje.<br />";
 }
 if($email) {
  if(isset($HTTP_POST_VARS['email'])) {
   if (preg_match('/^[-!#$%&'*+\./0-9=?A-Z^_`{|}~]+@([-0-9A-Z]+.)+([0-9A-Z]){2,4}$/i',trim($email))) {
   } else {
    $error .= "Tu dirección de e-mail contiene un error.<br />";
   }
   $ok = TRUE;
   $ok = eregi( "^[_.0-9a-z-]+@([0-9a-z][0-9a-z-]+.)+[a-z]{2,3}$", $email,$check);
   $ok = getmxrr(substr(strstr($check[0], '@'), 1), $dummy);
   if($ok === false) {
    $host = substr($email, strpos($email, '@') + 1);
    if(gethostbyname($host) != $host) {
     $ok = true;
    }
    if ($ok != true) {
     $error .= "La dirección de e-mail no parece correcta, por favor, compruebalo<br />";
    }
   }
  }
 }
 if($error) {
     echo $error; ?>
  <script type='text/javascript'>
    setTimeout('history.go(-1)', 4000);
  </script>
    <?php } else {
     include("enviado.php");
    }
?>

   Lo que hacemos es validar todos los campos, una vez validados colocamos una condición, si existen errores los muestra y vuelve a la página anterior, que sería el formulario, de lo contrario carga el siguiente archivo el cual, en este caso, es "enviado.php". Aquí es donde podemos hacer uno solo, pero prefiere que sea dividido para no confundir procesos, en el archivo enviado lo que haremos es crear un efecto de "Su mensaje ha sido enviado", para ello utilizamos el siguiente código...

<div id="contactoform">
    <?php
    $headers = "From: $email";
      $message .= " \n
      De: $name $surname \n
      E-Mail: $email \n
      Telefono: $phone \n
      Codigo Postal: $postcode \n
      Pagina Web: $url \n
      Desde : $title \n
      ____________________________________ \n
    $text
    ";
    $message2 .= "
      Gracias por enviar el mensaje con el asunto: $sub.n
      Para tu referencia, se ha añadido el texto original del mensaje al final de este correo.n
      Mensaje Original: \n
      $text
    ";
      $headers2 .= "From: $email \n";
      $sub2.="Re: $sub";

      $message = stripslashes($message);
      $message2 = stripslashes($message2);
      $message = strip_tags ($message);
      $message2 = strip_tags ($message2);
      mail("AQUI_EL_CORREO", $sub, utf8_decode($message), $headers);
      mail($email, $sub2, utf8_decode($message2), $headers2);
    ?>
    <h2>Gracias!</h2>
    <p><script type='text/javascript'>
      document.write('<a href="javascript:history.go(-2);">vuelve atras</a>');</script>
    <noscript>volver al formulario</noscript></p>
    <script type='text/javascript'>
      document.write('<p class="details"><a href="/">Volver a la página principal.</a></p>');
    </script>
    </div>

   Lo importante de esta parte del código es la función "mail()", enviamos 2 veces el correo, una a nuestro buzón de entrada y otro al usuario indicándole que su correo fue enviado, si no queremos avisar al usuario vía mail que su correo fue enviado simplemente borramos esa línea, no olvidemos reemplazar el correo en el archivo.

   Y ya por último tenemos el JavaScript (que nunca puede faltar) para validar los campos y envíar el correo, el archivo lo llamaremos "var.js" y es el sigueinte...

function emailCheck (emailStr) {
    var checkTLD=1;
    var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/;
    var emailPat=/^(.+)@(.+)$/;
    var specialChars="\\(\\)><@,;:\\\\\\"\\.\\[\\]";
    var validChars="[^\\s" + specialChars + "]";
    var quotedUser="("[^"]*")";
    var ipDomainPat=/^[(d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})]$/;
    var atom=validChars + '+';
    var word="(" + atom + "|" + quotedUser + ")";
    var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
    var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
    var matchArray=emailStr.match(emailPat);
    if (matchArray==null) {
     alert("Tu dirección de correo no aparece o es incorrecta (comprueba '@' y '.dominio')");
     return false;
    }
    var user=matchArray[1];
    var domain=matchArray[2];
    for (i=0; i<user.length; i++) {
     if (user.charCodeAt(i)>127) {
     alert("Tu direccion de correo contiene caracteres no validos.");
     return false;
       }
    }
    for (i=0; i<domain.length; i++) {
     if (domain.charCodeAt(i)>127) {
     alert("El dominio de la direccion introducida contiene caracteres no validos.");
     return false;
       }
    }
    if (user.match(userPat)==null) {
     alert("La direccion de correo parece incorrecta, por favor compruebalo.");
     return false;
    }
    var IPArray=domain.match(ipDomainPat);
    if (IPArray!=null) {
     for (var i=1;i<=4;i++) {
      if (IPArray[i]>255) {
       alert("La direccion IP (Internet Protocol) de destino no es correcta!");
       return false;
      }
     }
     return true;
    }
    var atomPat=new RegExp("^" + atom + "$");
    var domArr=domain.split(".");
    var len=domArr.length;
    for (i=0;i<len;i++) {
     if (domArr[i].search(atomPat)==-1) {
      alert("La direccion de correo parece incorrecta, por favor compruebalo, incluyendo el uso incorrecto de signos de puntuacion, comas [,] o puntos [.] al final de la direccion.");
      return false;
     }
    }
    if (checkTLD && domArr[domArr.length-1].length!=2 &&
     domArr[domArr.length-1].search(knownDomsPat)==-1) {
     alert("Tu direccion de correo debe terminar en un dominio o dos letras " + "país.");
     return false;
    }
    if (len<2) {
     alert("Falta el nombre del host en tu direccion de correo - compruebalo. O debes de haber añadido un espacio en blanco al final de la dirección - corrije el error e intentalo de nuevo.");
     return false;
    }
    return true;
}

   Y eso es todo, ya con esto tenemos el formulario de contactos listo para ser usado... Para mayor referencia Descarga el Ejemplo.

Recibe notificaciones por correo