Convertite en G�iikero en s�lo unos segundos!

Nombre de usuario

Contrase�a deseada

Confirm� la contrase�a

E-mail

Confirm� tu E-mail

De qu� sexo sos (o te sent�s)?

Pa�s

Fecha de Nacimiento

C�mo se llama esta web? Es s�lo para comprobar que no sos un robot =D

Estoy de acuerdo con los t�rminos de Guii.com.uy

		G�ii - Guii.com.uy > WebMaster > Offtopic de WebMaster
C�mo crear un formulario de contacto (Muy buen formulario)

Post creado por:

DiMa Sabeeeeee!

Mi pensamiento G�iikero

buen nick!

Mi info g�iikera

Cre� 5.350 post

Me registr� el 25-March-2008

Estoy en Dentro de las entra�as de G�ii

Tengo 21 a�os

Veces que grit� G�ii: 748

Le dijeron G�ii 1.870 veces en 801 Post

Mentioned: 5 Post(s)

Tagged: 3 Thread(s)

Puntos: 57.369, Nivel: 24

Nivel m�ximo: 99%, 81 Puntos

Actividad: 5,5%

Premios otorgados

Logros obtenidos

C�mo crear un formulario de contacto (Muy buen formulario)

C�mo crear un formulario de contacto � Versi�n 2.0

Como siempre, lo primero:
Detalles del tutorial

Tiempo aproximado de implementaci�n: 30 minutos.
Dificultad: B�sico (para implementar tal cual) � Intermedio (para personalizar).
Conocimientos previos requeridos: Entendimiento de HTML, CSS, jQuery y PHP.

Implementos necesarios:

Un editor Web (Recomendamos Aptana Studio o Notepad++, ambos gratuitos).

Ahora, la pregunta de rigor. �Qu� trae de nuevo este formulario 2.0?:

Validaciones de ingreso de datos en tiempo real mediante jQuery.
Validaci�n del correo electr�nico en tiempo real mediante expresiones regulares.
Env�o de informaci�n de forma asincr�nica (sin recargar la p�gina) mediante el m�todo .ajax de jQuery.
Mejoras de estilo y codificaci�n.

As� que con eso claro, vamos, manos a la obra:
Procedimiento:

Separaremos este desarrollo en las siguientes partes:

C�digo HTML � Armado del formulario.
C�digo CSS � Estilizaci�n del formulario.
C�digo jQuery/Javascript � Validaciones.
C�digo PHP � Env�o de informaci�n.

1.- C�digo HTML

El armado del formulario es bastante est�ndar:

C�digo PHP:

  <div id="container">

  <form name="formulario" id="formulario" method="post" action="envio.php">

    <fieldset><h2>Contacto</h2></fieldset>

 
 <div>

 <label for="nombre">Nombre: </label>

 <input type="text" name="nombre" id="nombre" size="60">

 <span id="validar-nombre"></span>

</div>

 
 <div>

  <label for="correo">Correo:</label>

 <input type="text" name="correo" id="correo" size="60"/>

 <span id="validar-correo"></span>

 </div>

 
<div><label for="sitio">Sitio Web:</label>

 <input type="text" name="sitio" id="sitio" size="60"/>

 <span id="validar-sitio"></span>

</div>

 
 <div>

 <label for="mensaje">Mensaje: </label>

 <textarea name="mensaje" id="mensaje" rows="10" cols="56"></textarea>

 <span id="validar-mensaje"></span>

 </div> 

 
 <p id="envio">

 <input type="submit" name="enviar" id="enviar" value="Enviar" />

 </p>    

 
</form>

 </div>

Con este c�digo tendremos un formulario bastante est�ndar armado en nuestra p�gina de contacto. Este contar� con campos de texto para que el visitante ingrese su nombre, correo electr�nico y sitio Web, as� como un �rea de texto para que ingrese su mensaje. Y obviamente al final a�adimos un bot�n para el env�o.
Como podr�n fijarse, a continuaci�n de cada campo de texto y �rea de texto, hemos a�adido un span sin contenido. Esto lo hemos hecho para insertar mensajes y resultados de las validaciones posteriormente mediante jQuery.
A continuaci�n, haremos la estilizaci�n del formulario, mediante CSS.
2.- C�digo CSS

C�digo PHP:

  body {

 height: 100%;

 background: #348075;

 font-family: Arial;

 font-size: 11px;

 color: white;

}

 
#container {

 
 width: 1000px;

 margin: 0 auto;

 background: #5b5c5c;

 border: 1px solid white;

 -moz-border-radius: 20px;

 -webkit-border-radius: 20px;

 
}

 
#formulario {

 
 padding: 1em;

 
}

 
#formulario fieldset {

 
 width: 400px;

 padding: 0 0 0 0;

 border: 0;

 
}

 
#formulario label {

 
 display: block;

 padding: 5px 0 5px 0;

 
}

 
#formulario input[type=text], textarea {

 
 padding: 10px 0 10px 0;

 border: 1.5px solid black;

 color: #5b5c5c;

 font-family: inherit;

 font-size: inherit;

 -moz-border-radius: 5px;

 -webkit-border-radius: 3px;

 
}

 
#formulario input[type=text]:focus, textarea:focus {

 
 background: #f5f2c9;

 
}

 
#formulario input[type=submit] {

 
 border: none;

 margin-right: 1em;

 padding: 6px;

 text-decoration: none;

 font-size: 12px;

 font-weight: bold;

 -moz-border-radius: 4px;

 background: #348075;

 color: white;

 width: 100px;

 
}

 
#formulario input[type=submit]:hover {

 background: #287368;

 cursor: pointer;

}

 
#validar-nombre, #validar-correo, #validar-sitio, #validar-mensaje {

 position: absolute;

 width: 100px;

}

 
#validar-nombre img, #validar-correo img, #validar-mensaje img {

 padding:10px 0 0 5px;

}

Como podr�n ver, en algunas partes hemos utilizado la propiedad border-radius (con moz y webkit para apuntar a distintos navegadores). Esta propiedad, tal como hemos indicado anteriormente, es de CSS3, por lo que no est� completamente soportada por todos los navegadores, especialmente los m�s antiguos. El efecto que logra es el de bordes redondeados, as� que ojo, si utilizan IE o alg�n navegador de mayor antiguedad no lo podr�n apreciar.
3.- C�digo jQuery / Javascript

Ac� debemos fijarnos en algunas cosas. Primero, debemos asegurarnos de descargar e incluir jQuery en la cabecera de nuestro formulario, y luego, crear un documento js en el que incluiremos el c�digo en jQuery que har� las validaciones y el correspondiente a Javascript que contendr� la expresi�n regular que evaluar� la direcci�n de correo ingresada para ver si es v�lida. Partamos con jQuery:

C�digo PHP:

  $(function(){

 
 var valor;

 var i = 0;

 
 $('#nombre').focus(function(){

 
     $('#resultado-nombre').remove();

     $('#validar-nombre').append('<p>* Obligatorio</p>');

 
 });

 
 $('#nombre').blur(function(){

 
     $('.advertencia').remove();

 
     valor = $('#nombre').val();

 
     if(valor != '') {

         $('<img src="imagenes/accept.png" id="resultado-nombre" />').appendTo('#validar-nombre');

     }

     else {

         $('<img src="imagenes/delete.png" id="resultado-nombre" />').appendTo('#validar-nombre');

     }

 
 });

 
 $('#correo').focus(function(){

 
     $('#resultado-correo').remove();

     $('#validar-correo').append('<p>* Obligatorio</p>');

 
 });

 
 $('#correo').blur(function(){

 
     $('.advertencia').remove();

 
     valor = $('#correo').val();

 
     if(valor != '') {

 
       if(validaCorreo(valor)){

 
          $('<img src="imagenes/accept.png" id="resultado-correo" />').appendTo('#validar-correo');

          var valido = true;

 
       }

      else {

          $('<span id="resultado-correo">Correo no valido</span>').appendTo("#validar-correo");

      }

    }

    else {

         $('<img src="imagenes/delete.png" id="resultado-correo" />').appendTo('#validar-correo');

    }

 
 });

 
 $('#sitio').focus(function(){

 
     $('#validar-sitio').append('<p>* Opcional</p>');

 
 });

 
 $('#sitio').blur(function(){

 
      $('.advertencia').remove();

 
 });

 
 $('#mensaje').focus(function(){

 
      $('#resultado-mensaje').remove();

      $('#validar-mensaje').append('<p>* Obligatorio</p>');

 
 });

 
 $('#mensaje').blur(function(){

 
     $('.advertencia').remove();

 
     valor = $('#mensaje').val();

 
     if(valor != '') {

          $('<img src="imagenes/accept.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');

     }

     else {

        $('<img src="imagenes/delete.png" id="resultado-mensaje" />').appendTo('#validar-mensaje');

     }

 
 });

 
 $('#enviar').click(function(){

 
       if($('#nombre').val()!= '' && $('#correo').val()!='' && $('#mensaje').val()!='' && valido) {

 
         $('.advertencia').remove();

 
         $('#envio').append('<img src="imagenes/ajax-loader.gif" alt="Procesando envio" id="cargando" />');

 
         var nombre = $('#nombre').val();

         var correo = $('#correo').val();

         var sitio = $('#sitio').val();

         var mensaje = $('#mensaje').val();

 
       $.ajax({

           url: 'envio.php',

           type: 'POST',

           data: 'nombre=' + nombre + '&correo=' + correo + '&sitio=' + sitio + '&mensaje=' + mensaje,

 
           success: function(resultado) {

               $('#respuesta').remove();

               $('#envio').append('<span id="respuesta">' + resultado + '</span>');

               $('#cargando').fadeOut(500, function() {

                   $(this).remove();

               });

 
           }

       });

 
       return false;

 
   }

   else {

       $('#envio').append('<span>Debe completar los datos requeridos.</span>');

       return false;

    }

 
 });

 
});

Varias cosas a las que ponerle atenci�n en el c�digo anterior:

Utilizamos 3 im�genes en los procesos de validaci�n y env�o (accept.png, delete.png, ajax-loader.gif). Estas im�genes son utilizadas para validar correcta e incorrectamente as� como mostrar un peque�o cargador al momento de enviar los datos. Pueden obtenerlas en el c�digo fuente que hemos adjuntado al final.
Hacemos uso del m�todo ajax de jQuery, el cual nos permite enviar asincr�nicamente los datos a una p�gina en PHP mediante un m�todo como POST o GET y que esta se ejecute sin la necesidad de recargar la p�gina. Como se puede apreciar, en caso de �xito de esta llamada (el c�digo correspondiente a success), hay un par�metro que es devuelto (resultado), el cual corresponde a un mensaje desplegado por el script que ejecutamos, lo que podremos ver m�s adelante.
Hemos incluido en 2 partes un return false. Esto se ha hecho para que el formulario no ejecute el action (de enviar a la p�gina envio.php) de forma normal, sino que ejecute todo de forma asincr�nica. Si el usuario tiene desactivado Javascript en su navegador, se ejecutar� todo de forma normal.
En la validaci�n del correo se hace un llamado a una funci�n que lo evaluar�, esa la incluiremos a continuaci�n.

El c�digo b�sicamente ejecuta acciones cada vez que se selecciona un campo de texto (focus) y/o se sale de el (blur). Ah� evalua de acuerdo a los par�metros que hemos definido (que existan datos) y en base a eso muestra un resultado de la validaci�n. Luego, al final, cuando se hace click en el bot�n de env�o, eval�a que existan datos en todos los campos y en ese caso env�a. De lo contrario, despliega un mensaje indicando la necesidad de completar el formulario.
Luego, a continuaci�n del c�digo jQuery, incluiremos una funci�n en Javascript que evaluar� el correo mediante una expresi�n regular para verificar que tenga el formato correcto:

C�digo PHP:

  function validaCorreo(correo) {

 
 var expresion = new RegExp(/^(("[\w-\s]+")|([w-]+(?:.[w-]+)*)

|("[\w-\s]+")([w-]+(?:.[w-]+)*))(@((?:[w-]+.)*w[w-]{0,66})

.([a-z]{2,6}(?:.[a-z]{2})?)$)|(@[?((25[0-5].|2[0-4][0-9].

|1[0-9]{2}.|[0-9]{1,2}.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).)

{2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})]?$)/i);

 return expresion.test(correo);

 
}

Entre estos 2 c�digos se encargan de toda la validaci�n del formulario, tal como indicamos, en tiempo real. Lo que nos queda hacer ahora es crear nuestro script en PHP para el env�o final de los datos.
4.- C�digo PHP

C�digo PHP:

  <?php

 
 /* Recepcionamos los datos enviados asincr�nicamente */

 
 $nombre = $_POST['nombre'];

 $correo = $_POST['correo'];

 $sitio = $_POST['sitio'];

 $mensaje = $_POST['mensaje'];

 
 /* Definimos el correo donde enviaremos el mensaje y el asunto */

 
 $destino = "correo@ejemplo.com";

 $asunto = "Contacto sitio Web";

 
 /* Definimos el formato del mensaje a enviar */

 
 $cuerpo = "<strong>Nombre: </strong>".$nombre."<br />

 <strong>Correo: </strong>".$correo."<br />

 <strong>Sitio Web: </strong>".$sitio."<br />

 <strong>Mensaje: </strong>".$mensaje;

 
 /* Definimos las cabeceras del mensaje */

 
 $cabecera = "MIME-Version: 1.0\r\n";

 $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n";

 $cabecera .= "From: $correo\r\n";

 $cabecera .= "Reply-to: $correo\r\n";

 $cabecera .= "Cc: $correo\r\n";

 
 /* Enviamos v�a correo, devolviendo un mensaje en caso de �xito o falla */ 

 
 if(mail($destino, $asunto, $cuerpo, $cabecera)) {

    echo 'Su mensaje ha sido enviado.

     De ser necesario, nos pondremos en contacto con Ud.';

 }

 else {

    echo 'No se pudo enviar el mensaje. Int&eacute;ntelo nuevamente';

 }

 
?>

Los mensajes desplegados en el if y else cuando enviamos el correo son aquellos que son devueltos al m�todo .ajax de jQuery (el par�metro resultado del que hablamos anteriormente), los cuales son desplegados en el formulario.
Conclusi�n

Y con eso tenemos nuestro formulario de contacto terminado, el cual valida en tiempo real y env�a los datos de forma asincr�nica. En caso de que el visitante tenga Javascript desactivado en su navegador, esto se ejecutar� de forma normal, es decir, el script PHP se cargar� al momento de presionar el bot�n Enviar y no habr� validaci�n en tiempo real.
Antes de terminar:

Fuente: C�mo crear un formulario de contacto � Versi�n 2.0- Como Lo Hago

1

Guiikear
Compartir
Compart� este post!

El_Gabo G�iike� este post!

1672
Visitas
5
Comentarios

Post creado: 26-Jun-2010 a las 06:43

jose zevallos

Usuario

Mi pensamiento G�iikero

Todav�a no actualic� mi Status

Mostrar info g�iikera +

Realizado: 24-Aug-2010, 11:48 Comentario #2

Hola necesito ayuda, me baje los archivos y cuando lo pruebo me sale el siguiente error:

Nombre: ".$nombre."
Correo: ".$correo."
Sitio Web: ".$sitio."
Mensaje: ".$mensaje; /* Definimos las cabeceras del mensaje */ $cabecera = "MIME-Version: 1.0\r\n"; $cabecera .= "Content-type:text/html; charset=iso-8859-1\r\n"; $cabecera .= "From: $correo\r\n"; $cabecera .= "Reply-to: $correo\r\n"; $cabecera .= "Cc: $correo\r\n"; /* Enviamos v�a correo, devolviendo un mensaje en caso de �xito o falla */ if(mail($destino, $asunto, $cuerpo, $cabecera)) { echo 'Su mensaje ha sido enviado. De ser necesario, nos pondremos en contacto con Ud.'; } else { echo 'No se pudo enviar el mensaje. Int�ntelo nuevamente'; } ?>

Eso pasa cuando lo descargo y despues de haber abierto el archivo envio.php con worpad, ahora cuando lo hago desde aqui en demostracion todo sale ok.

Atentamente

Jose Zevallos

DiMaNacho

DiMa Sabeeeeee!

Mi pensamiento G�iikero

buen nick!

Mostrar info g�iikera +

Realizado: 24-Aug-2010, 11:52 Comentario #3

Te recomiendo que us�s Notepad ++ o en su defecto el bloc de notas nom�s, otros editores por lo general hacen desastres con distintos caracteres...

En un rato te ayudo bien con eso, ahora estoy en el trabajo y est� dificil que pueda probar bien para decirte porque ando en una netbook

karelweaver

Usuario

Mi pensamiento G�iikero

Todav�a no actualic� mi Status

Mostrar info g�iikera +

Realizado: 01-Jun-2011, 04:32 Comentario #4

Hola, buscando buscando encontr� este site para la creaci�n de un formulario (excelente explicaci�n por cierto) y al descargar los archivos y usarlos en un site que cre�, me sale este error cuando le doy "enviar" al bot�n del formulario:

Warning: mail() [function.mail]: SMTP server response: 530 SMTP authentication is required. in C:\Domains\enriquevaldes.es\wwwroot\envio.php on line 32
No se pudo enviar el mensaje. Int�ntelo nuevamente

Me pod�is ayudar por favor???

Muchas Gracias de antemano.
Un Saludo.

Cloud 'z

Inglorius Bastard.

Mi pensamiento G�iikero

Gabo el azul te convierte en
putita dejate de esoo

Mostrar info g�iikera +

Realizado: 01-Jun-2011, 12:22 Comentario #5

Al parecer t� servidor � host no permite servicio SMPT, La funci�n mail() de PHP nativa no "autentifica" en servidores SMTP que lo requieran, usa otros metodos para enviar e-mail desde php tal como PHP Mailer
http://phpmailer.sourceforge.net , en el cual puedes enviar e-mail sin autenticaci�n, por lo que veo estas en un HOST desde tu casa a lo mejor sea eso lo que tenga el problema de autenticacion, de todas maneras cuando este DiMaNaCho se puede resolver mejor tu problema.

Cloud 'z.

DiMaNacho

DiMa Sabeeeeee!

Mi pensamiento G�iikero

buen nick!

Mostrar info g�iikera +

Realizado: 03-Jun-2011, 20:25 Comentario #6

Luego voy a postear un sistema de mail de contacto que arm� con ajax y jquery y s�lo precisa php para funcionar, luego es muy flexible tanto en dise�o (que incluso una vez que envi�s el mail un segundo despu�s de que hiciste clic en enviar, te muestra una confirmaci�n de manera de agradecimiento) como tambi�n el contenido del mismo mail que va a recibirse (que inclusive si lo dese�s pod�s hacer que se env�e una copia al que redact� el contenido del mensaje).

Hoy si me dan los tiempos (algo que me juega muy en contra), y si me hacen acordar, posteo eso.

Etiquetas

buen, c�mo, contacto, crear, formulario

LinkBacks (?) LinkBack to this Thread: http://www.guii.com.uy/offtopic-de-webmaster/8602-crear-formulario-de-contacto-buen-formulario
Escrito Por	For	Type	Fecha
Insertar Php En Expression Web Template	This thread	Refback	29-Dec-2010 08:07

Temas Similares
Tema	Autor	Foro	Respuestas	�ltimo mensaje
Los 100 Discos Mas Vendidos De Los 80 (Parte I)	DiMaNacho	Musica	1	05-Dec-2009 23:15
Aprend� a escribir y que no te digan anormal, bien f�cil	DiMaNacho	Tutoriales	0	29-Nov-2009 20:13
Bipolar - Cuarteto de Nos 320kb (Mi subida)	DiMaNacho	CDs	2	27-Nov-2009 02:44
Tutorial de Eclipse, principiantes, para programar en Java	elmartin	Tutoriales	0	31-Oct-2009 15:19
Chistes para tdo un DIA!	bArA.!	Entretenimiento	2	16-Oct-2009 18:24

Chat G�iikero!

Loading ...

Show the formatting buttons line (BBCODES)

General help

The MGC Chatbox Evo is really easy to use

You can :

Send chats : you just have to enter the text in the dedicated input field and then to validate it by pushing the return key ou by clicking on the OK button.
Format the chats :

Access to the different channels : you can have access to different channels restricted to only some usergroupds or for specifics use of the chatbox. The different channels are accessible from the buttons on the left of the chatbox.^*
Edit your chats (or others chats) : the edition of a chat can be done by a simple double-click on it.^*
Use specific commands : some commands can be accessible in the chatbox depending on the will of the administrator(s) of your forum. These commands let you execute specific actions of formatting, management, etc... You will herebelow the information on the command which are accessible to you. You must notice that you are not forced to use the command prefixes (/command_name) when you use them in the channel they are attached to (except in the general channel).^*

^* : Depending on the settings chosen by the administrator(s) of the forum, you might not have access to all these features.

« Tema Anterior | ass="vbmenu_option"> Crear una Encuesta

Crear una Encuesta

Herramientas
Mostrar Versi�n Imprimible
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado