Su correo electrónico fue enviado. ¡Hurra!

Error al enviar el formulario
 Nombre 
 Email 
 Mensaje  <? php if (isset ($ _ POST ['comments'])) {if (function_exists ('stripslashes')) {echo stripslashes ($ _ POST ['comments']); } else {echo $ _POST ['comments']; }}?> 
 ¡Mandanos correo! 

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!







        

          
          

		  
25 ejemplos de diseño de identidad de marca hecho bien
            
Identity branding es una parte integral del negocio . Después de todo, tienes que asegurarte de que puedes promocionarte adecuadamente. No siempre es fácil intentar crear un diseño que se adapte a sus necesidades. Algo que no solo refleja lo que representa, sino que también muestra la personalidad de su marca, ya sea su marca personal o una empresa que usted tenga.Par
			
(Consejos de tecnología y diseño)
          
        
      

        

          
          

		  
50+ hermosos fondos de pantalla de Apple y MacOS
            
Cada vez que se lanza un nuevo iOS, busco un nuevo fondo de pantalla de Apple que vaya con las funciones actualizadas. O a veces mi aficionado interno de Apple se despierta y salgo a buscar un bonito fondo de pantalla de Apple para mostrar mi afición.Cualquiera que sea el caso, he logrado recolectar algunos fondos de pantalla de manzana realmente hermosos que voy a compartir con ustedes en esta publicación. 
			
(Consejos de tecnología y diseño)