es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo crear un formulario de contacto HTML5 / CSS3 basado en Ajax

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.

El formulario de contacto es mortalmente 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 lamentablemente la mayoría de ellos no explican las partes internas de trabajo, por lo que aquí viene un tutorial detallado para enseñarle a crear 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 por correo electrónico basado en web, también estamos obligados a bucear en dos campos de aplicación separados, que es el código backend de PHP para enviar funciones de correo electrónico y jQuery para una interfaz de usuario enriquecida. Al final nos quedará con un formulario de contacto totalmente dinámico y funcional escrito con personalización posterior en mente.

¡Comience ahora a crear su propio formulario de contacto avanzado!

Atajo a:

  • Demostración: obtenga una vista previa de lo que está construyendo
  • Descargar - Descargar todos los archivos (php + css)

Estructurar la aplicación

Para empezar, necesitará algún tipo de servidor web para trabajar. Si está ejecutando una máquina Windows, WAMP es probablemente su mejor opción. Los usuarios de Mac tienen un programa similar llamado MAMP que es igual de 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. No vamos a necesitar ninguna base de datos MySQL, lo que debería simplificar un poco las cosas.

Una vez que el servidor está configurado, crea una nueva carpeta para albergar la aplicación . Puede nombrar esto como lo desee, ya que no es perjudicial ni está relacionado con el producto final. La estructura de la carpeta se usará cuando acceda a sus archivos en un navegador web. Un ejemplo simple sería http: //localhost/ajaxcontact/contact.php

¡Construyamos nuestros archivos!

Solo trabajaremos en 2 archivos principales. Primero necesitaremos un archivo core .php para albergar no solo nuestra lógica de aplicación, sino también el marcado frontend HTML. A continuación se muestra el código de muestra tomado de nuestro archivo de inicio.

 Formulario de contacto HTML5 / CSS Ajax con jQuery 

Para comenzar, hemos escrito una sección de encabezado simple para nuestro documento. Esto incluye una declaración general de Doctype para HTML5 y algunos elementos de documento HTML / XML. Estos no son exactamente necesarios, pero facilitarán el proceso de renderizado en navegadores antiguos (y más recientes). Además, nunca está de más 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 códigos de Google en línea . Esto es necesario para que nuestros errores dinámicos de página funcionen. Justo debajo de esto tenemos la inclusión de un documento CSS básico que contiene todos nuestros estilos de página.

Dentro de nuestro cuerpo de documentos tenemos algunas divisiones que contienen una forma de contacto principal. Esto contiene 3 elementos de entrada para el nombre del usuario, la dirección de correo electrónico y el mensaje personal . El marcado de HTML es bastante estándar y no debe confundir la mente de ningún desarrollador intermedio.

Su correo electrónico fue enviado. ¡Hurra!

Aquí tenemos un código condicional básico PHP anidado dentro de unos pocos contenedores de página. Esto verifica el valor establecido de una variable llamada $emailSent y si es igual a verdadero, mostrará un mensaje de éxito.

Dentro de nuestro formulario HTML

La instrucción else 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 una breve colección de elementos de formulario y un botón de enviar .

Error al enviar el formulario




Puede haber notado que hay otro bloque condicional directamente después del formulario de inicio. Esto busca una variable llamada $hasError y mostrará un mensaje de error luego de la confirmación. Este método alternativo solo se usa si JavaScript está deshabilitado en el navegador y, por lo tanto, no puede generar errores dinámicos.

Hasta el final podemos encontrar variables PHP individuales que se verifican. Las declaraciones regulan si el formulario ya se envió con solo cantidades parciales de datos ingresados. Este es otro sistema alternativo que muestra los contenidos de los campos ya completados: ¡un buen truco para una experiencia de usuario adecuada!

Inmediatamente después de completar nuestro formulario, están las pocas funciones jQuery que hemos escrito. Hablaremos sobre estos primero ya que son la implementación predeterminada en la carga de la página. Sin embargo, si el navegador no acepta JavaScript, de forma predeterminada podemos confiar en nuestro código PHP.

Apertura a jQuery

La manera más fácil de empezar a hablar sobre este tema sería sumergiéndote en el mismo. Descomponeré bloques individuales línea por línea para que puedas ver lo que el script realmente está buscando.

Sin embargo, si se pierde, simplemente revise los archivos de código del proyecto . Todos los bloques completos están pre-escritos y bien documentados en el sitio web de jQuery. Para comenzar, abrimos nuestro código similar a cualquier otro:

Si está familiarizado con las devoluciones de llamada, puede notar que la función post() tiene un conjunto de parámetros integrados. Las devoluciones de llamada son funciones más pequeñas que se solicitan cuando se responden datos de otra función .

Entonces, por ejemplo, cuando nuestra función jQuery.post() éxito un correo electrónico, llamará a su propia función interna para mostrar la animación deslizante. Todo este código podría escribirse en su propio bloque y trasladarse a otro lugar. 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.

Rompiendo nuestro PHP

El último obstáculo para mencionar es la lógica detrás de nuestro procesador PHP. Este es el sistema de back-end 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 nuestro archivo .php principal, antes de cualquier salida de HTML.

También hay algunos estilos internos que refrescan la página. No hay nada específicamente nuevo aquí, así que no entraremos en ninguno de los detalles. Sin embargo, el documento styles.css está incluido dentro del código del proyecto y contiene técnicas rudimentarias de CSS3.

Para comenzar, abrimos nuestra cláusula PHP y verificamos si el formulario fue enviado . La variable POST " enviada " era en realidad un campo de entrada oculto agregado al final de nuestro formulario. Es una forma útil de verificar si el usuario ha enviado algo para que no desperdiciemos los recursos del servidor.

Después de esto tenemos 3 comprobaciones de estado if / else separadas para ver si cada campo de entrada se ha completado . No incluiré aquí cada bit de lógica 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 if (trim ($ _ POST ['email']) === '') {$ emailError = 'Se olvidó de ingresar su dirección de correo electrónico.'; $ hasError = verdadero; } else if (! preg_match ("/ ^ [[: alnum:]] [a-z0-9 _.-] * @ [a-z0-9 .-] + \. [az] {2, 4} $ / i ", trim ($ _ POST ['email']))) {$ emailError = 'Ingresó una dirección de correo electrónico no válida.'; $ hasError = verdadero; } else {$ email = trim ($ _ POST ['email']); } 

PHP recortará todos los espacios en blanco del valor y comprobará si queda algo. De ser así, tenemos una expresión regular detallada (Regex) para ver si la cadena de entrada de nuestro usuario coincide con un patrón de correo electrónico.

No es necesario que comprenda cómo funciona preg_match() para construir este script. Es una función útil para determinar las reglas y requisitos para un tipo de datos exitoso, pero requiere conocimientos avanzados de programación para captarlos 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 que representan un dominio de nivel superior .

¡Después de que todos nuestros pases de lógica y no devolvamos errores, es hora de enviar nuestro mensaje! Este pequeño código configurará variables individuales para personalizar nuestro mensaje de correo electrónico y configurar algunos encabezados de correo para el proceso.

 // si no hay errores, ¡enviemos un correo electrónico ahora! if (! isset ($ hasError)) {$ emailTo = '[email protected]'; $ subject = 'Mensaje enviado desde'. $ nombre; $ sendCopy = recortar ($ _ POST ['sendCopy']); $ body = "Nombre: $ nombre \ n \ nEmail: $ email \ n \ nComentarios: $ comentarios"; $ headers = 'De:'. ' <'. $ emailTo.'> '. "\ r \ n". 'Responder a: ' . $ correo electrónico; correo ($ emailTo, $ subject, $ body, $ headers); // establecemos nuestro valor de finalización booleano en TRUE $ emailSent = true; } 

Si se preguntaba cómo iba a descifrar el código su dirección de correo electrónico, esta es la parte que debe completar. La primera variable de nuestro conjunto se titula $emailTo y debe contener la dirección de correo electrónico que va a recibir. el mensaje.

Dentro de nuestra variable $body aprovechamos el delimitador \n para agregar nuevas líneas al mensaje. Esto agrega pequeñas ubicaciones para el nombre del remitente, la dirección de correo electrónico, seguido de un descanso para el contenido de su mensaje . Por supuesto, podrías pasar tiempo revisando 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 consultar mi ejemplo styles.css dentro del código del proyecto. Sin embargo, la página está estructurada lo suficientemente bien como para que pueda diseñar su propia apariencia 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 hoja de estilo breve para simplificar las personalizaciones, ¡gracias por tu opinión!

Diseñadores: Obtenga patrones de fondo SVG gratis de Hero Patrterns

Diseñadores: Obtenga patrones de fondo SVG gratis de Hero Patrterns

Todos los navegadores web modernos son compatibles con SVG y es el formato de imagen más flexible que puede usar. Pero diseñar SVG personalizados desde cero no es una tarea fácil.Es por eso que una herramienta como Hero Patterns puede ser tan valiosa para los diseñadores. Es una biblioteca gratuita de patrones repetibles de SVG que puedes personalizar con diferentes estilos, colores y opacidades.Her

(Consejos de tecnología y diseño)

Copie códigos de sitios web fácilmente con SnappySnippet

Copie códigos de sitios web fácilmente con SnappySnippet

Como desarrollador web, ocasionalmente podemos encontrar algunos elementos inspiradores en un sitio web que lo haga preguntarse cómo crearon esa cosa. Entonces, pensarías en obtener una copia de ese código. Tanto Chrome Devtools como Firebug of Firefox se han incluido con la función que nos facilita copiar HTML y CSS de un sitio web.Sin

(Consejos de tecnología y diseño)