Cómo crear un formulario de contacto HTML5 / CSS3 basado en Ajax
El formulario de contacto es esencial para cualquier sitio web, ya que actúa como un mensajero que pasa la opinión o las consultas de los visitantes al webmaster. Ha habido innumerables formularios de contacto en la web, pero desafortunadamente la mayoría de ellos no le explican las partes internas de trabajo, por lo que aquí viene un tutorial detallado para enseñarle a construir un formulario de contacto avanzado desde cero basado en la tecnología pop, HTML5 y CSS3..
Teniendo en cuenta la naturaleza de un formulario de contacto de correo electrónico basado en la web, también estamos obligados a sumergirnos en dos campos de aplicación separados, que es el código de fondo de PHP para el envío de funciones de correo electrónico y jQuery para una interfaz de usuario enriquecida. Al final nos quedaremos con un formulario de contacto completamente dinámico y funcional, diseñado para su posterior personalización..
Comience ahora a crear su propio formulario de contacto avanzado!
Atajo a:
- Demo - Obtenga una vista previa de lo que está construyendo
- Descargar - Descargar todos los archivos (php + css)
Estructurando la aplicación
Para empezar, necesitará algún tipo de servidor web para trabajar. Si está ejecutando una máquina con Windows, WAMP es probablemente su mejor opción. Los usuarios de Mac tienen un programa similar llamado MAMP que es tan fácil de instalar.
Estos paquetes configurarán un servidor local en su máquina con acceso completo a PHP. Alternativamente, si posee espacio en el servidor o tiene acceso completo al servidor en una ubicación remota, puede usarlo en su lugar. No vamos a necesitar ninguna base de datos MySQL, lo que debería simplificar un poco las cosas..
Una vez que su servidor está configurado Crea una nueva carpeta para alojar la aplicación.. Puede nombrar esto como quiera, ya que no es perjudicial ni está relacionado con el producto final. La estructura de carpetas se utilizará cuando acceda a sus archivos en un navegador web. Un ejemplo simple sería http: //localhost/ajaxcontact/contact.php
Vamos a construir nuestros archivos!
Solo estaremos trabajando dentro de 2 archivos principales. Primero necesitaremos un núcleo .php Archivo para alojar no solo nuestra lógica de aplicación, sino también el marcado HTML de la interfaz. A continuación se muestra un código de ejemplo tomado de nuestro archivo de inicio.
Formulario de contacto Ajax HTML5 / CSS con jQuery
Para empezar hemos escrito una sección de encabezado simple a nuestro documento. Esto incluye un general Declaración de doctype para HTML5 y algunos elementos de documento HTML / XML. Estos no son exactamente necesarios, pero facilitarán el proceso de representación en navegadores más antiguos (y más nuevos). Tampoco duele ofrecer más información..
Un poco más abajo podemos ver 2 líneas justo antes de nuestra etiqueta de encabezado de cierre. El primero incluye nuestro Script jQuery del repositorio de Google Code en línea. Esto es necesario para que nuestros errores de página dinámicos funcionen. Directamente debajo de esto tenemos la inclusión de un básico. Documento CSS que contiene todos nuestros estilos de página.
Dentro de nuestro cuerpo documental tenemos algunos conteniendo divisiones Retención de un formulario de contacto principal. Esto alberga 3 elementos de entrada para el nombre de usuario, dirección de correo electrónico, y mensaje personal. El formato HTML es bastante estándar y no debe dejar de pensar en ningún desarrollador intermedio..
Su correo electrónico fue enviado. Huzzah!
Aquí tenemos un básico. Codigo condicional de PHP Anidado dentro de unos pocos contenedores de página. Esto verifica el valor establecido de una variable llamada
$ emailSenty si es igual a verdadero, mostrará un mensaje de éxito.Dentro de nuestro formulario HTML
los más La declaración es lo que se ejecutará en la carga de la primera página, ya que no habrá ningún contenido para enviar inicialmente. Dentro de aquí incluiremos un breve colección de elementos de forma y un botón de enviar.
Error al enviar el formulario
Usted puede haber notado que hay otro bloque condicional directamente después de la forma de inicio. Esto busca una variable llamada $ hasError y mostrará un mensaje de error después de la confirmación. Este método de reserva es solo se utiliza si JavaScript está deshabilitado En el navegador y por lo tanto no se pueden generar errores dinámicos..
Hasta el fondo podemos encontrar variables individuales de PHP siendo revisado Las declaraciones se regulan si el formulario ya se ha enviado con solo cantidades parciales de datos completados. Este es otro sistema alternativo que muestra el contenido de los campos ya completados, un buen truco para la experiencia de usuario adecuada.!
Directamente después de completar nuestro formulario están los pocos funciones de jQuery hemos escrito Hablaremos sobre esto primero ya que son la implementación predeterminada en la carga de la página. Sin embargo, si el navegador no acepta JavaScript, por defecto podemos confiar en nuestro código PHP.
Apertura a jQuery
La forma más fácil de comenzar a hablar sobre este tema sería sumergirse de inmediato. Desglosaré los bloques individuales línea por línea para que pueda ver lo que el script realmente está verificando..
Sin embargo si te pierdes solo revisar los archivos de código del proyecto. Todos los bloques completos están escritos previamente y bien documentados en el sitio web de jQuery. Para empezar abrimos nuestro código similar a cualquier otro:
Si estas familiarizado con devoluciones de llamada puedes notar el enviar() La función tiene un conjunto incorporado de parámetros. Las devoluciones de llamada son funciones más pequeñas que se llaman Sobre la respuesta de datos de otra función..
Así, por ejemplo, cuando nuestro jQuery.post () La función dispara correctamente un correo electrónico al que llamará su propia función interna para mostrar la animación deslizante. Todo este código podría escribirse en su propio bloque y moverse a otra parte. Sin embargo, por el bien de este tutorial, es mucho más fácil escribir la devolución de llamada como una función en línea..
Romper pasado nuestro PHP
El último obstáculo a mencionar es el lógica Detrás de nuestro procesador PHP. Este es el sistema backend que realmente llamar a una función de correo y enviar el mensaje. Todo el código utilizado en los ejemplos a continuación se puede encontrar directamente en la parte superior de nuestra página principal. .php archivo, antes de cualquier salida HTML.
También hay algunos estilos internos que refrescan la página. No hay nada específicamente nuevo aquí, así que no vamos a entrar en ninguno de los detalles. Sin embargo, el estilos.css El documento está incluido en el código del proyecto y contiene técnicas rudimentarias de CSS3..
Para empezar abrimos nuestra cláusula PHP y comprobamos. si el formulario fue enviado. los ENVIAR variable “presentado” fue en realidad un campo de entrada oculto agregado al final de nuestro formulario. Es una forma útil de Comprueba si el usuario ha enviado algo. sin embargo, por lo que no desperdiciamos los recursos del servidor.
Después de esto tenemos 3 separados. si / else Comprobación de estado de cuenta para ver si cada campo de entrada ha sido completado. No incluiré cada bit de lógica aquí ya que todos son de naturaleza muy repetitiva. Sin embargo, para darle un breve ejemplo, he incluido la siguiente cláusula de verificación de correo electrónico:
// necesita un correo electrónico válido si (recortar ($ _ POST ['correo electrónico']) === ") $ emailError = 'Olvidé ingresar su dirección de correo electrónico.'; $ hasError = true; else if (! preg_match ("/^[◆:alnum:◆◆◆a-z0-9_.-◆*@[a-z0-9.-◆+ \\\\\\\\\\\\\"], recorte ($ _POST ['email')))) $ emailError = 'Ingresó una dirección de correo electrónico no válida.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP recortará todo el espacio en blanco del valor y verificará si queda algo. Si es así tenemos una detallada Expresión regular (Regex) para ver si la cadena de entrada de nuestro usuario coincide con un patrón de correo electrónico.
Ciertamente no necesitas entender cómo
preg_match ()trabaja para construir este script. Es una función útil para Determinar reglas y requisitos para un tipo de datos exitoso., pero ordena conocimientos avanzados de programación para comprender realmente. En este escenario, nos aseguramos de que el usuario solo ingrese unos pocos caracteres seleccionados, incluye un @ símbolo seguido de 2-4 caracteres representando un Dominio de primer nivel.Después de que todas nuestras lógicas pasen y no devolvamos ningún error, ¡es hora de enviar nuestro mensaje! Este bit de código establecerá variables individuales para personalizar nuestro mensaje de correo electrónico y configurar algunas encabezados de correo para el proceso.
// si no hay errores de error, envíenos un correo electrónico ahora! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Mensaje enviado desde'. $ nombre; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Nombre: $ nombre \ n \ n Correo electrónico: $ correo electrónico \ n \ nComentarios: $ comentarios"; $ headers = 'From:' ' <'.$emailTo.'>'. "\ r \ n". 'Responder a: ' . $ email; correo ($ emailTo, $ asunto, $ cuerpo, $ encabezados); // establece nuestro valor de finalización booleano en TRUE $ emailSent = true;Si se preguntaba cómo el código iba a averiguar su dirección de correo electrónico, esta es la parte que debe completar. La primera variable de nuestro conjunto se titula
$ emailToy debe contener lo que sea Dirección de correo electrónico, que va a recibir el mensaje..Dentro de nuestro
$ cuerpovariable aprovechamos la\norteDelimitador para agregar nuevas líneas en el mensaje. Esto agrega pequeñas ubicaciones para el nombre del remitente, dirección de correo electrónico, seguido de un descanso para su contenido del mensaje. Por supuesto, podría dedicar tiempo a embellecer la pantalla, pero esta estructura funciona bien..Conclusión
Esto cierra nuestro tutorial para un formulario de contacto avanzado. Si desea diseñar sus elementos en relación con los míos, puede ver mi ejemplo. estilos.css Dentro del código del proyecto. Sin embargo, la página está lo suficientemente estructurada como para que pueda diseñar su propio look & feel muy fácilmente..
Siéntase libre de descargar el código fuente y examinar lo que he hecho un poco más cerca. Es bueno seguir un tutorial, pero tener acceso directo a la fuente del proyecto puede ser invaluable. También incluí una breve hoja de estilo para hacer que las personalizaciones sean fáciles, gracias por su vista!
