Cómo agregar formularios de contacto a un sitio estático

1. Introducción: Hola, mi nombre es Sean. Soy profesor y desarrollador web y bienvenido a mi curso sobre la adición de formularios de contacto a sitios estáticos de Hugo. Los formularios de contacto son factores dinámicos que por defecto no funcionan en sitios estáticos. En este curso, te llevaré por el proceso de creación de formulario de contacto con Bootstrap, CSS, clases de utilidad, y HTML. También te mostraré algunas formas de personalizar el formulario. Luego miramos a enviar el formulario directamente al punto final. Y vamos a estar usando un proveedor de terceros para esto. Luego veremos la creación de un envío de formularios ajax con JavaScript para que el paciente no vuelva a cargar. Y luego veremos recibir y procesar las respuestas APR y mostrarlas con JavaScript. Pero no te preocupes, si encuentras a estos dos complejos, eres más que bienvenido a parar en el paso dos. Nos vemos en el curso. 2. Cómo empezar con el proyecto: Para empezar con el proyecto, es necesario descargar los archivos en la sección de recursos del archivo zip, que se llama Start Here, dot zip. Alternativamente puedes descargar los archivos de GitHub y eso está en la siguiente diapositiva. Una vez que haya extraído los archivos e, para abrir toda la carpeta con Visual Studio Code. Y te lo mostraré en un momento. Antes de hacer eso, debe tener el siguiente software instalando las últimas versiones. Es código de Visual Studio, node.js, que incluye NPM. Y si está en Windows y también incluyen chocolaty. Y necesitas a Hugo, extendido. Y extendido es en realidad el predeterminado para Mac y Linux. Pero si estás usando Windows, debes asegurarte obtener la versión extendida de Hugo. Y opcionalmente necesitarás CLI y GitHub Desktop. Yo sí los recomiendo para guardar tu progreso laboral a GitHub, es un gran lugar para respaldar tu trabajo y también puedes compartir tu progreso. Hemos hecho otros estudiantes, si necesitas alguna ayuda o retroalimentación. False para cada lección se ha almacenado en un repositorio público de GitHub. Puedes obtener la primera lección de Skillshare en la sección de recursos dos. Pero para todas las lecciones, si necesitas revisar tu progreso, si tienes algún problema y soluciona problemas, puedes agarrar esas caídas del repositorio de GitHub. He creado un enlace en la sección de recursos para que puedas acceder a él y cada lección tiene su propia rama. Es forma de acceder a los archivos es descargar un archivo zip desde esa sucursal. Aunque si sí usas la opción de clonación, asegúrate de eliminar la carpeta dot Git para que puedas empezar de nuevo con tu propia buena historia y te mostraré cómo funciona eso ahora con el descarga del archivo zip. Por lo que una vez que haga clic en ese enlace, puede elegir la sucursal para el número de lección. Y luego a partir de ahí, si vas al código, puedes descargar el archivo zip. Esa es la forma más fácil de ir. Si usas la opción de clonar o usar el escritorio de GitHub, asegúrate de eliminar esa carpeta dot get. Si vas a querer en última instancia subir ese trabajo para conseguir hub tú mismo. Yo sí recomiendo usar el archivo zip. Es mucho más fácil. Una vez que hayas descargado los archivos. Para la primera lección, has configurado. Acabamos de hacer un código de acuerdo a mis instrucciones en mi curso de introducción aquí, tendrás la opción de abrir con codificación y el menú contextual. Y luego una vez que hayas abierto con código, ves que tenemos un montón de carpetas y en la parte inferior tenemos scripts NPM, y los he configurado para ti para que puedas empezar de inmediato. hay que tener instalado a Hugo y ustedes deben estar en su camino para que esto funcione. Tenemos algunas opciones que puede querer usar dev y que ejecutan el servidor dev. Tienen vista previa que probablemente no necesites para este curso, pero eso construirá borradores y también páginas futuras. La página ha sido marcada como borrador o la fecha es en el futuro. vista previa muerta en realidad ejecutará esas páginas. Bill en sí es para construir Hugo a la carpeta pública. Por lo que vas a subir a FTP. Yo sí tengo una recomendación que echa un vistazo a mi curso en Netlify. Puedes obtener algún hosting gratis en la phi y todo lo que tienes que hacer es ejecutar un git commit. Y hay cualquiera que hacer cualquier carga FTP o edificio. Hay disco enrojecimiento, y el disco le permite ver realmente los archivos en la carpeta pública mientras el servidor Hugo se está ejecutando. Y también tengo un preestreno y producción. Producción. Uno es genial para revisar la versión de producción real del sitio antes de enviar tu código. También he incluido cheque npm para ti, y eso es para actualizar dependencias de NPM. Y la versión Hugo te dirá qué versión de hugo has instalado. Entonces para empezar con la versión Dodd Frank Hugo, solo para comprobar qué versión de hugo tienes instalada. Y volveremos en mi mente, tengo uno que quiero instalado. Lo único que tienes que hacer es que necesites ejecutar npm install. La primera vez que abres esta carpeta. El motivo es que la carpeta de módulos de nodo no estará ahí. No tiene sentido subir en módulos de nodo para obtener porque hace que el repositorio sea demasiado grande. Es mucho más fácil ignorarlo desde Kip y luego instalarlo manualmente. Una vez que hayas descargado los archivos de GitHub, asegúrate de ejecutar npm install. Tomará todas las dependencias de package.json. Porque lo que he hecho es que en realidad he configurado JavaScript y SES construyendo completamente. Tengo un curso sobre SESS con Hugo y Bootstrap, y también tengo un curso sobre construcción de JavaScript, pero en realidad lo he configurado para ti. Si entras en la carpeta de paquetes, verás que ESPN llama puntos suspensivos, y eso está configurado y listo para funcionar. Tendrá que tener instalados los módulos de nodo para el lado SCSS de eso. De lo contrario, espero verte en el rumbo y ver tu progreso. 3. Crea un formulario de contacto: Lo primero que haremos para empezar a crear el formulario es que ahora ejecutaremos el servidor dev, si tienes una nueva versión de Visual Studio Code , por defecto, el plugin de scripts NPM está instalado y habilitado. Y puedes ejecutar cualquiera de los scripts NPM que ya he incluido para ti con el botón Play junto al servidor dev. Y va bastante rápido en esto en comparación con otros generadores de sitios estáticos. Y luego una vez que haya iniciado el dev set, pero podemos verlo en el navegador usando un control-click. Tenemos unos sencillos sitios de Hugo que arriba con la página de inicio. Y he incluido una sola página sobre la que he llamado. Voy a ir a crear otra sola página, que será la página de Contacto. Entonces cerraremos esa terminal por ahora. El servidor seguirá funcionando. Si entramos en contenido y vamos a copiar y pegar la página sobre. Y lo cambiaremos el nombre a contactar. Y eso es para la URL. Pero entonces tenemos que entrar y cambiar el nombre del título de la página para contactarnos o lo que quieras que sea. Nos libraremos de un subtítulo. En cuanto a menú vivirá en Maine pero cambiará el peso a 30. Por lo que el Contáctenos pagará al derecho de alrededor. Y nos libraremos del texto por ahora. lo guardaremos. Ahora. No queremos que muestre la página Contáctanos usando el mismo HTML, que se utiliza para las páginas individuales porque queremos realmente mostrar un formulario también. Una forma de hacerlo es que lo haremos es mendiciar el punto de contacto MD sería del tipo. Y lo pondremos en contacto en minúsculas. Entonces lo que tienes que hacer es en la carpeta Layouts, crear una nueva carpeta llamada contact. Y copiaremos y pegaremos el HTML de punto único en la carpeta Contacto. En el navegador. Verás que tenemos el botón Menú Contáctanos, pero actualmente no hay textos en la página y aún no hemos personalizado el HTML, así que volvamos y hagamos eso. Los únicos dos que te he dejado un enlace en la sección de recursos de las reformas de cinco páginas de bootstrap fueron mirando la sección de maquetación. Si nos desplazamos hacia abajo hasta el primer ejemplo, lo copiaremos. Entonces en el único contexto que HTML bajo contenido, lo pegaremos en. Sí necesitamos crear un formulario. Simplemente teclea en forma y emita escribirá el Fourier. No vamos a poner una acción todavía. Y vamos a poner dos entradas ahí dentro. Puede utilizar Alt Control F2, formatear el HTML. Y lo comprobaremos ahora en el navegador. Eso funciona exactamente como planeábamos. Pasemos ahora y pongamos nuestro formulario. Voy a hacer es que me voy a deshacer de la etiqueta. Y el tipo de entrada de texto es lo que necesitamos. En cuanto al DNI. Id. Lo llamaremos nombre de entrada, y el titular del lugar cambiará por nombre. Y luego tenemos que añadir aria dash, label. Y eso es para un lector de pantalla y tecnologías de asistencia porque ya no hay etiqueta para la entrada real. Sólo hay un placeholder, y lo cambiaremos por nombre también. Y luego tenemos que agregar un campo de nombre real a la entrada. Y lo llamaremos nombre. Y eso ayudará cuando enviemos el formulario. El contenido de esta entrada tendrá el nombre adjunto, que será nombre. Lo que haremos es resaltar la hoja de electrones. Copiará lo que tenemos. Lo pegaremos a continuación. Este , llamaremos al correo electrónico. Nombre. El tipo será el correo electrónico, y eso ayuda con la validación. El ID, lo llamaremos correo electrónico de entrada. Y dos placeholders. Si usas alt click y cambias ambos al mismo tiempo, haz el correo electrónico del placeholder. Puedes usar Alt Control F para ordenar tu HTML. Luego copiará y pegará la primera entrada. Pega a continuación. Y lo cambiaremos a sujeto. El objeto input cambiará nuestros dos placeholders para someter el nombre del placeholder. Y el último será una entrada multilínea. Entonces vamos a copiar y pegar el sujeto, la entrada y el control F para limpiarlo. Deshazte de la entrada y también deshazte del tipo. Y reemplazaremos a esos dos área de texto. Antes de que te olvides. Al final de la etiqueta, hay que poner en un cierre etiquetas slash área de texto. De lo contrario no funcionará y hay que asegurarse de que no haya espacio entre las etiquetas de apertura y cierre. Si fueras a poner área de texto en una nueva línea, terminarás con un montón de espacio entre ahí. Y tendrás algunos temas con textos en blanco en su lugar en tu área de texto. Ahora, tendremos que cambiar el nombre a mensaje, el ID al mensaje de entrada. Y cambiaremos nuestro lugar titular y aria-etiqueta a mensaje. Hay una cosa más que podemos agregar, y esa es Rose. Y cambiaremos eso a cuatro por ahora. Y veremos si lo bloqueamos. Así que guarde eso y vamos a echar un vistazo en el navegador. Eso se ve genial. Vamos a ir ahora en limitando el ancho, por lo que no es demasiado ancho. Si queremos ir a inspeccionar, verás que es bastante utilizable a este ancho. A medida que se hace más ancho y ancho, no es para parecer un poco fuera de lugar. Así que volvamos y vamos a configurar algunas filas y columnas. Para que eso va a hacer eso es que vamos a envolver el formulario en alguna fila anidada, anidada y algunas columnas. Entonces usaremos div row y luego habilitaremos flicks discontinuos dy. Así mostrar flex y luego justificar el contenido. Y luego haremos div dot col, md seis. daremos una vuelta a eso. Entonces lo llamaremos nuestra forma y lo cortaremos y pegaremos y lo guardaremos y echaremos un vistazo. Un par de cosas que noto. Si empezamos a bajarlo al tamaño MD, observe las formas un poco pequeñas. Pero entonces cuando llegas a lo grande, tamaño de seis es bastante bueno. Y también podríamos traer el rumbo a eso también. Por lo que los encabezados se alinearon igual que cuando vamos por debajo de MD. Lo que vamos a hacer es que vamos a hacer LG dash six y a la izquierda de ella sí llamaremos al MD dash nueve. Y luego vamos a agarrar el título, el contenido, ponerlos por encima del formulario, y nos libraremos de la fila y columna existentes. Pero la forma en que estructuras tu forma depende totalmente de ti. Esta es solo una forma de pensar en ello. Normalmente, en realidad pondría alguna información de contacto a la izquierda del formulario si es un MD o más ancho. Entonces lo guardaré y echaré un vistazo en el navegador. Si vamos al gran tamaño, verás que tenemos seis mitad de la pantalla, lo cual es genial. Y luego si lo bajamos a MD, son nueve de 12. Y luego si vamos por debajo de MD, tenemos el ancho completo. Si miras a Excel, Eso es todo ahí. Creo que eso es genial por ahora. Lo último que haremos es crear el botón de enviar. Entonces escribiendo en el formulario, poniendo un botón y vamos a hacer tipo igual, presentar y clase. Btn, y luego btn dash cebado, Ese es el botón básico en el viaje. Y el texto de someter. Y luego vamos a echar un vistazo a eso en el navegador. Ese es un gran comienzo para listo para la próxima lección, vamos a personalizar el formulario poco más. 4. Personaliza el formulario de contacto: Por lo que acredite un formulario de contacto básico. Sigamos adelante ahora y veamos algunas personalizaciones. Bueno, eso creo que es realmente bonito, es, y he dejado el enlace a esta página en la sección de resultados está bajo bootstrap cinco formularios. Tenemos etiquetas flotantes y aquí hay algunos ejemplos. Tenemos un placeholder, pero luego cuando haces clic dentro del campo, el placeholder se reduce y sigue siendo visible y hace que sea una experiencia mucho más fácil para el usuario. De esa manera no olvidan cuál es el campo que están escribiendo. Tengo un ejemplo aquí. Hay que poner la clase de forma flotando en el div que envuelve la entrada. Entonces tenemos que poner nuestra etiqueta después de la entrada. Así que vamos a seguir adelante y tener una oportunidad en la configuración de eso, vamos a copiar el formulario clase flotante. Ejecute el HTML de punto único en la carpeta Contacto. Tenemos nuestro primer div y haremos clic, y luego haremos clic en todos los otros divs para el formulario, y lo pegaremos y pondremos un espacio para la forma flotante. Entonces haremos clic en final de la entrada. Utilizamos una etiqueta. En el campo cuatro. Tenemos que copiar y pegar en el nivel Id. Y luego copiaremos y pegaremos fuera de nuestro placeholder y dejaremos ahí el titular del lugar solo en caso de que se requiera como reserva en caso este CSS no sea compatible con el navegador. Y algo que puedes hacer, es difícil decir si va a ser menos trabajo para ti o no. Pero si pones un id en la etiqueta y vamos a copiar y pegar en el ID de la entrada. Pondré la palabra etiquetada final. Puedes usar aria etiquetada por, y puedes copiar y pegar en ese ID. Entonces la tecnología de lector de pantalla sabrá con certeza que esta etiqueta es la etiqueta para la entrada. No hay duda al respecto. Pasemos y pongamos el resto. Entonces nos pondremos para conseguir la etiqueta, pegarla debajo, y luego tendremos que personalizarla. Por lo que será de entrada, correo electrónico, entrada, correo electrónico, etiqueta. Deshazte de la etiqueta aria. El titular del lugar lo mismo. Entonces tenemos nuestro tema. Y para el último, solo volveré al sitio Bootstrap porque ya no podemos usar filas. Entonces para las teorías tecnológicas sobre una falla, habrá la misma altura que una entrada que no queremos. Queremos que los usuarios puedan ver Como escribo un mensaje multilínea en el formulario de contacto. Por lo que dice Él no usa el atributo caminos. Tienes que establecer explícitamente un atributo height, ya sea en línea o a través de CSS personalizado. Acabamos de estar en la fila por ahora. Es mejor práctica usar CSS personalizado, especialmente si su política de seguridad impide estilos en línea. Pero por ahora solo usaremos un estilo. Copiaremos ese estilo ahí por la altura. Lo pegaremos, y luego conseguiremos nuestra etiqueta. Etiquetado por etiqueta. Las filas. No funciona con el CSS. Lo guardaremos y echaremos un vistazo. Ahora tenemos nuestros campos, lo son, pero más allá de eso, hay que considerar el look que realmente quieres. Pero al hacer clic en ellos, notará que el marcador de posición etiquetado sí se encoge. Por lo que tienes espacio para escribir tu nombre. A modo de ejemplo. Simplemente arreglaremos la etiqueta para el sujeto, que en realidad debería ser un mensaje. Echemos un vistazo rápido. Ahora, me gustaría que este campo fuera más grande. La mejor manera de hacerlo, si haces clic derecho e inspeccionas. Podemos ver que ahí tenemos el área de texto. En realidad puedes hacer doble clic y puedes hacerlo en vivo en el navegador. Entonces digamos por ejemplo, vamos a probar 150 PXE y creo que eso es un buen corazón para ellos. Volveremos a Hugo y lo haremos permanente. Cambiaremos nuestra altura a 150 PXE. Ahora, si por ejemplo quieres hacer tu CSS, probablemente lo que puedas hacer es cortar eso y lo guardaremos. Y luego entraremos en el CSS personalizado. Lo pegaremos en. Y la altura 150 PXE necesita tener un punto y coma después de ella. Y copiaremos y pegaremos en el ID del campo. Entonces el id es mensaje de entrada. Así que copia eso. Nosotros hash mensaje de entrada y funciona ¿qué hay caliente ahí? guardaremos y echaremos un vistazo en el navegador. Ahora, si inspeccionas, verás que no hay estilo en línea. Miramos a la derecha. Notarás que tenemos el mensaje de entrada hash que apunta a la idea del mensaje de entrada. Y la altura se está fijando en 150. Y ese es nuestro CSS ahí. Porque consiguió se está ejecutando como el servidor de desarrollo. Y he configurado CSS para mapas fuente. En realidad se puede ver el archivo original allí. Y por último, vamos a personalizar es el botón mirará otra forma de hacerlo con esta trampa. Entonces aparte de cambiar primaria a secundaria, también podemos usar contorno y luego elegir el color, por ejemplo, primario. guardaremos y echaremos un vistazo. Y esa es la opción de esquema. Eso es por lo que llegaremos con la personalización por ahora. Te veré en la próxima lección. 5. Conéctate al Endpoint de API: En esta lección, estamos buscando conectar el formulario a un punto final de API. Actualmente nuestra acción está en blanco. Quería un lugar para enviar ese formulario para que pueda ser procesado. Y así se le puede enviar un correo electrónico, la persona que gestiona el sitio web para que pueda obtener los mensajes de sus clientes. Usando bisonte para manejar los formularios. Le dejé un enlace en la sección de recursos. Una vez que hayas hecho clic en el enlace y te hayas inscrito, hay un formulario que ya se ha generado para ti por defecto llamado Mi En primer lugar, una vez que entres a eso, verás un enlace a la derecha hasta el punto final. Copia eso. Y luego entraremos en la acción de formulario y la pegaremos ahí. Y necesitamos un método para la forma y en mayúsculas para ponerlo en post. lo guardaremos. Entonces aquí está nuestra forma. Vamos a poner algunos datos de prueba en. Y le pegaremos submit y eso enviará al punto final. Y luego redirige a una página de cuenca diciendo, gracias por el mensaje. Entonces entra en cuenca. Se puede ver el mensaje en sí ha llegado y podemos verlo por aquí. Por ahora. Sólo voy a borrarlo. Por defecto, se le enviará el correo electrónico con la dirección que proporcionó. También puedes cambiar el nombre de quien los e-mails de quién te envían. Y también se puede cambiar el tema. Que gracioso, sólo voy a dejarlo en los impagos. Te veré en la próxima lección. 6. Detección de Spam: Lo primero que tenemos que hacer cuando se trata de spam, vamos a entrar en el formulario y vamos a configurar la recaptura de Google. Cuando entra en la configuración y luego el spam. Y en realidad hay que encender la recaptura y luego leer los docs. Entonces Control da click en Leer los conductos. Y para la cervecería capturarla tienes que usar la siguiente clave del sitio de recaptura. No se puede utilizar su propia clave de G es esta, que en realidad lo hace más fácil de una manera porque significa que es fácil de configurar. Voy a revisar las instrucciones en los proveedores de cuencas. Probablemente sea la forma más fácil que esté funcionando con Google. La recaptura es lo primero es que copiaremos y pegaremos el guión. Colocará eso debajo del formulario. Por lo que justo debajo del formulario donde puedes ponerlo en la sección si quieres. Voy a decir que es HTML válido. En realidad va a saltarse el paso dos porque estaremos usando recaptura invisible. Ve directo al paso tres. Tengo que asegurarme de que has habilitado requieren recaptura, que hemos encendido y guardaremos esos cambios. Y prefiero usar recaptura invisible. Haz que eso suceda. Hay que insertar algunos guiones y luego un botón. Copia que sumaría el guión. Y vamos a copiar los botones. Eso no es en realidad un botón de enviar, es un botón que llama a recapture. Y luego recapture llamará a este script que enviará manualmente su formulario. Entonces vamos a poner eso en el guión. Así comenta el botón original ocultándolo y usando Control o Comando K, C, donde puedes poner principalmente en el comentario HTML si lo deseas. Y luego pegaremos en nuestro nuevo botón, que llama a Google recapture. Ahora para conseguir que la función submit funcione, actualmente, está buscando un formulario con el ID de forma invisible re-captura. Y no teníamos eso. Entonces lo que vamos a hacer es que lo respaldaremos y lo cambiaremos a JS Daesh contacto por razón pongo un guión de JS. El inicio es que me deja saber que cuando digo el formulario y tiene el id del formulario de contacto, sé que si cambio el ID de ese formulario, voy a tener un problema de JavaScript. Así que siempre acostumbrado a s para prefijar todas mis ideas que se relacionan puramente con JavaScript. Después destacaremos el DNI y lo copiaremos. Y nos desplazaremos hasta el formulario. Y vamos a poner en una identificación igual. Y luego podemos pegar eso en. Lo guardaremos, y vamos a echar un vistazo en el navegador. Entonces unas cuantas cosas aquí podemos arreglar. Lo primero es el budge de recaptura de Google por defecto para ver realmente que está fuera a la derecha. Puedes fijarlo a derecha a izquierda. Sólo vamos a eliminar la propiedad, por lo que por defecto a la derecha. Y también vamos a dar estilo a nuestro botón de enviar. Así que hagamos eso. Para que puedas ver Data Badge en línea. Deshaznos de eso por completo. Entonces lo que haremos es bajar a la clase y agregaremos btn y btn esquema primario o cualquier clase de Bootstrap que desee agregar al estilo de su botón. Entonces lo guardaremos y buscaré en el navegador, solo luciendo mucho mejor ahora con la insignia oculta a la derecha y nuestro botón enviar, vamos a poner algunos datos, vamos a echar un vistazo funciona. Generalmente va a consultar para hacer click en la foto. Si estás haciendo una prueba de un anfitrión local, entonces nuestra presentación ha pasado. Piensa que pueden hacer es una mielera. Un honeypot es, es un campo de entrada para tus cuatro, que está oculto a los usuarios humanos, pero generalmente no oculto a los bots de spam. Algunos bots de spam podrían darse cuenta de que está oculto, pero lo que sucede es fácil para el bot de spam poner algunos datos en ese campo y golpear enviar, luego usar cuenca no va a reenviar esa fórmula a tu e- dirección de correo porque es bastante obvio que es un bot porque los humanos no pueden poner físicamente nada en ese campo. Controlas click en el Leer los Docs. Notarás que tenemos que poner un nombre de subrayado. Gotcha. Y simplemente nos desplazaremos hacia abajo a la opción de honeypot. El tipo se ocultará y el nombre será gotcha. Por lo que haremos clic derecho en eso y lo copiaremos de nuevo a tu formulario y lo pegaremos. Guárdalo. Y tienes una protección de nido de miel habilitada automáticamente. En cuanto el bot puso algo en ese campo, entonces no va a pasar, no se garantiza que funcione, pero no hace daño incluirlo como opción. 7. Validación de formas: Mira la validación de formularios en este momento, no hay nada que impida al usuario enviar el formulario. Cuando no han rellenado ciertos campos, solo puedo golpear Enviar e ir desde ahí. Y será enviado a través y terminarás con un formulario en blanco. Entonces lo vamos a hacer es echar un vistazo a cómo vamos a manejar eso en el navegador. No podemos manejarlo desde un punto de vista exterior porque eso es manejado por el punto final que no tenemos control. Lo que podemos controlar lo que sucede en el navegador. Así que volvamos al código de Visual Studio. Entonces estamos en el HTML singular en la carpeta de contenido. Lo que haremos es que pasemos por cada campo y nos aseguraremos de que estés viendo la etiqueta de entrada real. Cada campo que quieras que te requieran, lo que haces es controlar click dentro de ese campo, también hará el área de garrapatas. Ponemos en la propiedad requerida. Entonces lo guardaremos. Lo que estamos haciendo aquí es que estamos utilizando cada navegador incluido mecanismo para requerir entradas. Por lo que es dependiente del navegador. Si el usuario tiene un navegador antiguo, no va a detenerlos. Problema que tenemos es que en realidad tenemos un botón Enviar en este formulario. Tenemos un botón que llama al guión de recaptura. En realidad no estamos presentando el formulario directamente utilizando la funcionalidad incorporada del navegador. Entonces lo que haremos es comentar nuestro botón modificado con control Casey. Y luego descomentar el botón original con Control K. Lo guardarás y vamos a echar un vistazo en el navegador. Ahora si pulsamos el botón de enviar, va a hacer estallar una advertencia porque digamos por ejemplo, hemos puesto un nombre, después hemos pedido el siguiente, y así sucesivamente y así sucesivamente. Echemos un vistazo ahora a cambiar nuestro código para que realmente estamos usando Google recapture. Entonces para conseguir que Google recapture funcione junto a la validación, porque Google recapture es JavaScript y anula la función de envío predeterminada en el navegador. Vamos a tener que usar validación de JavaScript. Ahora, he dejado el enlace a la página de docs Bootstrap para su validación. Desplázate hacia abajo. Hay estilos personalizados que en realidad vamos a usar. Y eso usa Bootstrap para dar estilo a la forma cuando hay un éxito o un problema. Si te desplazas hacia abajo hasta el siguiente, verás el predeterminado del navegador, que solo mirará, vamos a ir uno mejor que eso. Estilos personalizados. Lo que tenemos que hacer, en primer lugar, es que necesitamos la validación de clase de necesidades en el formulario. Y luego necesitamos la propiedad novalidate. El inmueble le dice al navegador que no utilice su validación incorporada. Y la validación de necesidades que usaremos va a ser para el estado, sea validado o no. Y el hecho de que necesita ser validado con Bootstrap. Entonces vamos a copiar la clase y novalidar propiedad. Y luego para la forma, poner en una clase iguala necesita validación. Y no tenemos validar. Entonces necesitamos agregar algo de JavaScript. Ya estamos en las propiedades requeridas a cada uno de los campos. Desplázate hacia abajo, tenemos algún JavaScript básico para empezar, así que vamos a copiar eso. Y luego lo pegaremos en debajo del código de recaptura de Google. Ahora lo que esto hace es lo primero que hace es que estamos seleccionando cada formulario en la página que tiene una clase de validación de necesidades para cada uno de esos formularios. Y eso es lo que el array dot forEach es cuatro, estamos ejecutando la función y escucha el botón submit. Por lo que actualmente tenemos un botón de envío estándar. Entonces lo que haremos es que acabemos de poner un comentario en sus escucha para enviar evento en el formulario. Entonces si el formulario no ha pasado la validación, vamos a detener el default, enviar más pesado. Y si ha pasado, entonces se presentará según lo normal. Y luego vamos a agregar una clase para mostrar estado de validación de los campos que suceda independientemente. Lo guardaremos y echaremos un vistazo en el navegador. Entonces es un formulario de contacto. Pondremos un nombre y luego le pegaremos a submit. Y entonces lo que está haciendo es que está impidiendo que suceda la suma. Está diciendo que necesitamos llenar estos tres. Lo haremos es ponerlo en un correo electrónico dudoso sin afuera y no.com poner en un asunto y un mensaje. Verás que aún no está contento porque no tenemos una dirección de correo electrónico real debidamente formateada. Por lo que haremos correo electrónico en domain.com y notaremos incluso solo con el mantenimiento pasando el cheque. Entonces podemos golpear Enviar. Pero vamos a configurarlo ahora para que estemos integrando la recaptura en la forma misma. Lo primero que haremos es que hagamos algunas ligeras modificaciones a este código bootstrap. El JavaScript Bootstrap es posiblemente apuntando múltiples formularios y solo queremos a múltiples formularios y solo queremosapuntar uno para mí porque soy el único formulario estará trabajando con la recaptura. Entonces aquí tenemos formas var iguales y eso es todos los formularios con necesidades de validación, lo que vamos a hacer en su lugar es que vamos a hacer forma igual. Y luego usamos este código aquí arriba, document.getElementById y JS formulario de contacto. Y acabaremos de poner algunos adolescentes solteros bastante para que sean consistentes con el estilo. Poner un punto y coma. Entonces tenemos una llamada a Slashdot prototipo re dot. Y eso es para formularios para ocho seguros para cada uno de los formularios. Pero esta vez sólo vamos a estar llamando a la función. Para la forma única. Lo haremos es que ya usamos la forma variable. Por cada iteración. Hemos creado nuestra nueva variable llamada formularios. Todo lo que queremos hacer es quitar el bucle, también se librará de esta línea. Entonces Alt Shift F para reformatear, y lo guardaremos. Y vamos a echar un vistazo en el navegador. Entonces las pruebas básicas, pulsamos el botón enviar y verás que seguimos apuntando al formulario y seguimos los mismos pasos, pero es sólo para el formulario único. Pasemos ahora y recobramos las cosas. El momento es que el formulario no ha pasado la validación. Estamos impidiendo que la función de envío predeterminada funcione allí. Apenas el formulario ha pasado la validación. Simplemente somete normalmente. Queremos evitar siempre que funcione la función de envío predeterminada. Entonces lo haremos es copiar esas líneas. pegaremos y copiaremos nuestro comentario también. Y pega eso en. Originalmente. Este cheque sucedió. En primer lugar, tiene la validación de pase de formulario. Pero ahora queremos dejar de presentar en todos los casos, queremos mostrar el estado de validación. Entonces queremos hacer un cheque tiene la validación de forma polar. Y si lo ha hecho, queremos pasar por el proceso de recaptura de Google y, en última instancia, formar envío. Entonces lo que haremos es cortar eso. Lo pegaremos en abajo. Si el formulario ha pasado la validación, nos libraremos del signo de exclamación. Se librará de eso. Pondré un comentario en la recaptura de carbón para su verificación y presentación. Lo guardaremos y haremos un chequeo rápido en el navegador para asegurarnos de que todo esté funcionando como esperamos. Obviamente, no va a llamar recapturarlo y no va a presentar nuestro formulario. Actualmente nos está diciendo que hay problemas. Pondremos algunos datos y le pegamos a Enviar. Y obviamente eso no funciona, pero está validando como deseamos. Como se puede ver, no ha pasado por el proceso de cumbre. Y eso es porque aún no hemos configurado así que, hasta ahora, todo está bien. Vamos a pasar por ahora y configurar la recaptura, pero me encanta vincular a la recaptura de Google conductos invisibles en la sección de resultados. Este es un ejemplo en la parte inferior. Para invocar la recaptura después de la validación del lado del cliente, vamos a utilizar parte de esto. Primero arriba que vamos a usar es el div. Estamos colocando dentro del formulario. Pasamos a nuestra forma. Y después de nuestra última entrada, pegaremos eso en. Tenemos que conseguir la clave del sitio. Copia eso. Pega en donde dice clave SART. No tenemos que preocuparnos los scripts onload porque ya lo estamos haciendo con el Bootstrap. Y lo que está haciendo el script online aquí es que está diciendo al hacer clic en el botón Enviar, hay que validar lo que ya estamos manejando eso. Pero lo importante es que tenemos la llamada a la ejecución de puntos capturados griegos si la validación tiene éxito. Entonces vamos a copiar eso. Y nos desplazaremos hacia abajo hacia nuestro código Bootstrap. Y tenemos aquí llamado recaptura y para chequear y sumisión. Entonces tenemos que decirle a recapturar qué hacer. Después de que se haya realizado el cheque. Aquí arriba en nuestro div recapture, tenemos datos sobre la devolución de llamada es onsubmit. Si vuelves a bajar, tenemos onsubmit. Y lo que hace es que obtiene la forma y la somete. Entonces volvemos a nuestro código y vamos a poner un pequeño comentario ahí. Recapture convocatorias en Enviar después del cheque. Saltaremos esa línea que dice stop default, AVX. Es un poco engañoso. Nos han llorado. Pondrá un comentario en. Oro por recaptura. Presenta el formulario, pero no a través del navegador predeterminado. Así que guarde eso y lo revisaremos en el navegador. Estoy poniendo un nombre, correo electrónico, domain.com. En realidad hay que poner el.com en forma. Spree no tiene error. Entonces consiguió sujetos. Lo tiraremos en enviar y luego mensaje. Porque estamos haciendo anfitrión local y hemos presentado bastantes listos. Nos va a desafiar, lo cual es genial. Significa que está funcionando correctamente. Lo último que haremos es que consigamos todos estos JavaScript y lo pondremos en un archivo JavaScript. Hace que la depuración sea mucho más fácil. Así que resalta todo ahí dentro. Y luego entraremos en activos en JS y haremos un archivo llamado contact dot js. pegaremos y lo guardaremos. Podemos deshacernos de. Pero tenemos que asegurarnos de que el script esté cargado para esta página en particular. De la forma en que vamos a hacer eso, porque no estamos trabajando en una carpeta estática. Estamos usando ES build, que he configurado por defecto para ti. Puedes entrar en parciales y luego carpeta Script. Y ahí es donde estamos cargando el archivo JS principal. Ahora tenemos que hacer es si EQ dot top de la T capitalina y la parte superior será contacto. Pondremos nuestra ingesta y de inmediato. Después podremos copiar y pegar ese código y será contactar ab.js y luego limpiaremos el archivo JavaScript. Lo primero es que la función onsubmit que no va a funcionar ya recaptura no podrá acceder a la función desde este archivo para crear una variable y vincularla a la ventana. Por lo tanto derecho, ventana, punto en enviar iguales. Haré de eso una función de flecha. Y estamos haciendo referencia al mismo ítem que estamos haciendo referencia aquí abajo agregamos el oyente de eventos. Entonces lo que podemos hacer es que podamos agarrar esa variable. Lo pondré hasta la parte superior de la pantalla. Y entonces sólo podemos correr punto formado presentar. Utilizaría estricta en la parte superior de la página? Y luego nos libraremos de la función de autoinicialización porque eso tampoco va a funcionar. Y vamos a hacer Control. Alt Turno F para reformatear. Y si lo desea, puede crear una función de error aquí para decir que si se está ejecutando un invierno, por ejemplo, Eastland, probablemente arroje un error porque no estás usando token. Para que puedas sacar eso. Y para evitar la confusión cambiará en someter a presentar función porque onsubmit podría plantear un tema. Y volveremos a nuestro HTML de punto único, que lo cambian para enviar formulario. Esa es la función que se llamará. Y se salvará eso. Y luego echaremos un vistazo en el navegador. Así que poner algún doddering sujeto a JS externo. Es por eso que puede correctamente, si tienes alguna pregunta sobre cómo estamos ejecutando código ASP para compilar ese archivo JavaScript. Tengo todo un curso sobre Hugo llamado JavaScript building con ustedes. Y ustedes a través del proceso de configurar AS build con Hugo y me toggled navegadores Craig y todos los ajustes tanto para entornos de desarrollo como de producción. Si revisas eso, estarás pasando por todo el proceso paso a paso. Ahora digo que puedes configurarte con AS build que para que puedas personalizarlo a tus necesidades. Te veré en la próxima lección. 8. Presentación del formulario AJAX (sin recargar página): Por lo que estamos tratando de hacer aquí con ajax está tratando de enviar el formulario, pero sin refrescar la página y enviar de esa manera, es una experiencia mucho más optimizada para el usuario. Y sabemos que definitivamente se quedan en nuestra página y no los vamos a perder. Y podemos brindarles una retroalimentación mucho más rápida a ellos. Las opciones con proporcionar retroalimentación. Yo bastante bueno si estás manejando tu propio punto final, pero si estamos trabajando con alguien más, así que hay un poco simple, pero eso está bien. Así que empecemos. Entonces lo primero que vamos a hacer es que vamos a desactivar las formas de mí porque no voy a estar presentando con el navegador. Gracias que vamos a hacer es que vamos a saltar y sacar todos los datos del formulario. Por lo que ponemos un comentario en obtener datos del formulario. Entonces los datos del formulario const iguala nuevos datos de formulario con F mayúscula, capital D. Y lo sacaremos de un formulario. Y cambiaremos nuestra variable de forma a una constante. Lo que haremos es crear una nueva instancia de ECS. Const XHR, quien es nueva solicitud XML HTTP. Entonces lo haremos es, vamos a empezar a trabajar con XHR. Lo primero que haremos es abrir en configure XHR, XHR open. Y tenemos que usar los métodos para que podamos sacarlo del HTML. Entonces formamos método dot, ese es el método que ya hemos establecido en el formulario. Y el ARO será forma. Acción. Señalaste HTML, verás tu acción desde el formulario y el método del formulario te enviará datos. Por lo que los puntos XHR y luego vamos a enviar los datos del formulario. Ahora esto es un síncrono, por lo que en realidad va a enviar de inmediato. Va a mandar uno, está listo para, pero hemos puesto ese comando ahí . Por lo que está listo para irse. Establecerá el tiempo de espera ocho segundos. Xhr dot es igual a que no lo hace. Puedes cambiar eso. Y van a tiempo de espera. Por lo que el XHR punto a tiempo todavía. Crearemos una función de flecha. Entonces haremos un error de consola. Siempre cuente el tiempo de espera. Entonces podemos depurar si es necesario. Aquí es donde se pone interesante. Tradicionalmente harías XHR dot onload. A continuación, verifica HTTP Two 100. De lo contrario estás viendo un error HTTP y también tienes XHR dot on era. Eso es para tu XHR arrogante. Lo que podemos hacer es que lo haremos en carga terminada luego incluye flechas. Entonces es XHR dot en extremo de carga. Entonces es como la descarga y la era on. Haremos una función anónima. Por lo que en términos generales, querrías filtrar si tenemos nuestro éxito o fracaso HTTP. El fracaso generalmente significa que tienes la URL l mal o el servicio caído y todo eso. La forma en que hacemos eso es si estado de punto XHR y por ejemplo, si n es igual a 200. Entonces tienes éxito ATP. Y de lo contrario el ejemplo 44 no se encontró. Era Http. Ahora puedes obtener bastantes estados diferentes, de 200 a 299 más 304. Por lo que vamos a hacer igual o mayor a 200. Y el estado de puntos XHR es menor a 300. Y todo con doble tubería que cambia y la válvula K en estado de punto XHR es igual a 304. Echemos un vistazo a los documentos porque para este punto final en particular, en realidad podemos mantenerlo un poco más simple. Entonces aquí está la forma en que funciona. Tienen códigos y por ejemplo, estado http de 200, que es código de acceso ac. También nos han dado algún texto de respuesta y está codificado con JSON. Y tendrá éxito, cierto. Lo que nos dice que todos los campos son correctos, APIs felices y los correos electrónicos que se envían. Por lo que entonces podemos poner esa retroalimentación en el formulario hasta que el usuario que su envío haya tenido éxito. Muchas gracias. Te enviaremos un e-mail. Si obtenemos una era receptiva, como todos vienen con mensajes personalizados, lo cual es genial porque te muestra un poco más de información sobre el error. Pero también tienen un código de error HTTP adjunto a ellos. Así que en realidad tienes una transferencia HTTP exitosa, pero están adjuntando tu código de error HTTP por esa razón, no vamos a filtrar basado en HTTP. Porque aviso tenemos dos códigos, los mismos pero diferentes errores. Sólo estamos un poco filtrados en base a los códigos de error. Vamos a seguir adelante y hagamos eso. Lo haremos es destacar todo el extremo onload. Lo copiaremos, lo pegaremos a continuación, comentaremos, el filtrado de estado HTTP. Y luego comenzaremos de nuevo. Lo primero que haremos es pasar el texto de respuesta. Por lo que vamos a hacer const respuesta es igual a Jason y capitals dot parse. Y vamos a pasar la respuesta de puntos XHR. Si respuesta dot éxito. Y eso implica verdad. Haremos consola dot log solo por ahora. Esos excesos. Y luego haremos otra cosa. Si respuesta oscura, era, vendido, log, back, tick encendido. Y luego cuando el signo del dólar y los tirantes rizados responden.data. Por lo que en realidad puedes obtener el mensaje de error. Ponemos un colon y luego hacemos otra cosa. Si no se proporciona un error. Console.log. Nueva era, que probablemente no llegue a encontrar. A menos que algo terrible chicos mal. Lo guardaremos y echaremos un vistazo en el navegador. Haga clic con el botón derecho e inspeccione para asegurarse de que, si lo que está pagando muelle hacia el lado izquierdo o derecho. Para que puedas ver el formulario completamente. Pondremos algunos detalles en la consola listos. Debe haber un éxito que esté funcionando correctamente. Es T tech detectó éxito verdadero. Entonces es todo un error. Ahora volveré a entrar y agregaremos un dígito extra a la URL del endpoint y guardaremos eso y tendremos un go en el navegador. Vamos a probar eso. Y ahora tenemos este mensaje volviendo. Y hemos puesto ese texto en nosotros mismos, era Jason. Ahora está listo para configurar algunos mensajes para el usuario. Antes continue sacará ese 0, el de la acción del formulario será el extra, solo para asegurarnos de que esté funcionando correctamente ahora, lo haremos es deshabilitaremos el formulario. Por lo que solo se puede habilitar si JavaScript está presente. Dos que le darán una identificación para empezar. Lo llamaremos JS dash, submit y todo discapacitado, el formulario con la propiedad de discapacitados. De esa manera se deshabilita por defecto. A continuación, agregará algunos sin guión. Soy Todd, el formulario. Debe JavaScript capaz de enviar este formulario, le pondrá a Danny el botón. Entonces es algo obvio porque el botón estará deshabilitado. Mensaje ahí dentro. Muy bien, entonces tendremos que ir y habilitarlo. Dice que tenemos que apuntar el botón. Así const submit, botón es igual a punto de documento, obtener elemento por ID. Y permanecer en alijo, presentar. Y luego enviar puntos de botón, deshabilitado es igual a false. Comentaremos en las cargas de JavaScript. Echemos un vistazo. Por lo que tenemos una propiedad para discapacitados en el formulario. Voy a las áreas de la consola, por lo que el botón de enviar realmente está funcionando. Vamos a ir a apagar JavaScript. Entonces entraremos comandos de ejecución como en Java y luego desactivaremos JavaScript. Y el control se va a ver un botón está deshabilitado y debes tener JavaScript habilitado para enviar este formulario. Así que acaba de renombrarse JavaScript. Estoy listo para empezar a trabajar en nuestros mensajes. Así que crea nuestro spinner de carga. Especialmente vamos a hacer variable de crédito, documento dot, write, element, div, crear un ID para ello. Entonces doc id es igual a b ahora, y agregaremos algunas clases. Entonces spinner dot class, list, dot, add, do, spinner, dash, border, y d, ninguno para ocultarlo. Y luego lo agregaremos al formulario. Entonces la forma punto Pinchot y vamos a sumar, ha sido un comienzo. Nos libraremos de la pantalla, ninguna, sólo para verla ahí. Ahí hay una espina sentada y vamos a desactivarla por defecto. Entonces crearemos nuestro mensaje. No puedo documentar momento oscuro previo a div. Deja que dot body dot plus this dot add. Vamos por ahora. Una nueva para las pruebas. Entonces vamos a hacer alerta. Vamos a acceder niño. Y vamos a echar un vistazo rápido de nuevo a nuestra forma y vamos al botón NB para mirar eso. Eso se ve bien. Entonces estamos quita la clase de éxito porque depende del estado del mensaje. Y ocultaremos ambos elementos por ahora. Entonces D Ninguno. Muy bien, estamos listos para empezar. Entonces lo que vamos a hacer es que crearemos nuestros contras de función para perderse h es igual a Gran y función de flecha. Y sus propiedades que podamos traer serán texto de estado y estado. Y comenzaremos con el mensaje de ejecución de éxito. Esos textos verdaderos serán su mensaje le ha sido enviado de vuelta a usted en breve. Escribe nuestra función. Entonces primero tenemos que hacer es revisar el estado. Entonces, si el status es igual a true, clase este punto, y vamos a acceder a la lista de clases punto. Agrega peligro. Agregaremos el HTML. Y vamos a echar un vistazo. En qué está la inflación. Ella dijo, y pronto me pondré en contacto contigo. ¿ Ni siquiera a la hilera fue tan rápido? Echemos un vistazo ahora si falla. Entonces en nuestra falsa copia, esa cadena literal con garrapatas traseras, era. Y luego para la era genérica, esa línea. Esta vez lo haremos más tarde. Subiremos a nuestro tiempo de espera. Echa un vistazo. Tan viejo truco, agregamos un dígito y obtenemos el error viniendo. Ahora tenemos que hacer es restablecer el formulario después de que esto haya tenido lugar, ya sea un éxito o un archivo, quiero restablecer el formulario para que podamos empezar de nuevo y la recaptura pueda empezar de nuevo. Estamos en. Reset Form creará la función. Lo primero que haremos, Restablecer el contenido del formulario. Reset de puntos de formulario, validación de conjuntos, estado, sss, lista de clases de puntos, validada. Deshazte de todo el CSS que acabamos de agregar aquí abajo. Y luego reinicie para recapturar. Al igual que Hey, usamos Jewry capturado, ejecutar por favor G recapture puntos. Dijimos, guardar eso y echar un vistazo en el navegador. He puesto algunos detalles y presento. Y hemos restablecido el formulario. Recapitulación, acaba de lanzar un error, que hace de vez en cuando, pero sigue funcionando. Todo está bien. Ahora vamos a quitar toda la console.logs. Ahora que hemos terminado de probarlo, tenemos que hacer es mostrar el giro de todas las formas iluminando y luego ocultar el spinner cuando el formulario haya terminado de cargarse. Así que cuando el botón de enviar formulario demasiado impresionado y Google recapture ha dado el bien, y sabemos que se llama a presentar formulario, entonces eliminará al decano unclass del spinner. Entonces lo que podemos hacer es que podamos copiar la línea para sumar. La clase sacará el giro real un borde y cambiará, añadirá para eliminar. Y volveremos a conseguir el titular. Bajaremos a la sección de mensajes y vamos a quitar el spinner escondiéndola ahí. Vamos a probar eso. Entonces poner en algunos detalles. Tienden a girar y girar este periodo a medida que regresó el mensaje de estado. Entonces eso está funcionando muy bien. Asegúrate de probar el formulario a fondo para todos los casos de uso y todos los escenarios de error. Ante ti. En un sitio de producción, tienes alguna pregunta o comentario, por favor déjalos en la sección de discusión a continuación. Feliz de ayudarte. Tu mejor opción es subir tu código a GitHub y luego dejarme un enlace al código. Y lamento decir algunas capturas de pantalla de formularios de crédito que has hecho en la sección de proyectos.