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.

8 Comentarios

Escribir Comentario
diseño web
AUTOR
10 de enero de 2011, 16:47 delete

gracias por el codigo ya mismo intento ponerlo en mi diseño

Responder
avatar
Manuel.
AUTOR
2 de abril de 2011, 12:59 delete

Antetodo,gracias por todos estos aportes. El formulario me ha sido muy útil para mi web. El correo llega bien pero no se leen los acéntos ni la ñ y tampoco envía el email al remitente para su confirmación. He estado dando vueltas por todos los sitios y haciéndole cambios, pero mis conocimientos son cortos en php.

Gracias.

Responder
avatar
3 de abril de 2011, 17:47 delete

Hola, primero que nada disculpa la tardanza y gracias por el visto bueno... El detalle es saber la codificación de la página, para las Ñ y tildes debes utilizar el "charset" de tu XML en "ISO-8859-1"...

Verifica el charset (definición de caracteres) en essta línea: utf8_decode....

También verifica la función "mail", esta es la línea que envía la dirección al visitante:

mail($email, $sub2, utf8_decode($message2), $headers2);

Revisa que las referencias sean correctas e imprime por pantalla con "echo" para verificar que así sea..... Saludos y coméntame como te fue...

Responder
avatar
Manuel.
AUTOR
4 de abril de 2011, 13:07 delete

Hola Carlitox, te cuento: En la cabecera del contacto.php tengo puesto:"". Es prácticamente un copiar y pegar del contacto.rar que has subido para descargar, en email.php he puesto el email al que quiero que llege.
No entiendo: Verifica el charset (definición de caracteres) en essta línea: utf8_decode....
sólo lo veo en: mail($email, $sub2, utf8_decode($message2), $headers2); y esa línea está bien.

Saludos y gracias

Responder
avatar
Manuel.
AUTOR
4 de abril de 2011, 13:10 delete

No ha salido la línea que he puesto, pero si teng o "ISO-8859-1" en la cabecera en un "meta".

Responder
avatar
4 de abril de 2011, 13:20 delete

Mmmmm.... déjame ver si entiendo bien porque esta extraño tu caso....

Copias y pegas del blog todo el código pero no le llega al cliente el correo, solo a ti como destinatario.... Ahora, si es así verifica dos cosas....

1: que en tu router tengas abierto el puerto 25
2: si en tu configuración de apache (conf.ini) tengas habilitada la función mail() y el puerto 25

3: IMPORTANTE.... con ABA de CANTV vas a experimentar estos problemas porque ellos bloquean el puerto 25 y habilitan de vez en cuando (hay veces que envía, otras que no).....

Si no has copiado tal cual el código envíame en un rar los archivos para verificar y ver porque no te funciona.... Saludos y disculpa la demora....

Responder
avatar
Manuel.
AUTOR
6 de abril de 2011, 8:57 delete

Hola Carlitox, estoy con problemas en el servidor de la web y no puedo hacer todas las pruebas que quiero.Como servidor local tengo el XAMPP y me funciona bien.
Cuando el servidor vuelva a funcionar bien te comento como ha ido todo.
Saludos y gracias.

Responder
avatar
6 de abril de 2011, 10:31 delete

Ok no hay problema..... Saludos y suerte!!

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon