Un formulario de contacto sencillo utilizando Ajax. Formulario de comentarios de Ajax en una ventana modal Ventana modal con un nombre de formulario de suscripción correo electrónico

Me dediqué a cómo se puede crear una ventana emergente que se muestra en el sitio una vez y después de un cierto intervalo de tiempo. Entonces, como opción, puedes insertar un formulario en esta ventana. Puede ser un formulario de suscripción o un formulario de contacto, en general, cualquier cosa. Es mejor mostrar formularios Ajax en ventanas emergentes para que los datos se envíen sin recargar la página.

Estructura del artículo

Si está creando un sitio web en un motor, por ejemplo, Joomla o WordPress, entonces, por supuesto, puede utilizar varias soluciones de formularios listas para usar, incluidos los diseñadores. Pero, ¿qué pasa si simplemente estás diseñando en HTML puro y el cliente te pide “revivir” los formularios para que funcionen? Aquí es donde este formulario resulta útil.

UPD. 02/08/2018
El artículo se ha reescrito teniendo en cuenta que el formulario se publicó en GitHub.

Entonces empecemos. En primer lugar, descargue las fuentes del formulario desde mi repositorio de GitHub.

Monté este ensamblaje usando el administrador de tareas Gulp. Escribí sobre cómo trabajar con él, asegúrate de leer.

Conectando el formulario al sitio.

Desempaquete el archivo con el formulario. A continuación, copie todo el contenido de la carpeta dist a la carpeta de formularios (por ejemplo, ajax-form) en la plantilla de su sitio. A continuación, conectamos recursos: estilos y scripts. Hay dos versiones en las carpetas css y js: comprimida y normal. Si planea realizar cambios en el código en el futuro, es mejor conectar versiones sin comprimir.

Si su sitio ya tiene habilitada la biblioteca jQuery, no es necesario que la conecte. Presta atención a.

Inicializando el formulario

Permítanme señalar de inmediato que la validación de campos se organiza utilizando HTML5.

El formulario es llamado por el método .simpleSendForm(), por ejemplo:

$("#idForm").simpleSendForm();

En lugar de #idForm especificamos el identificador del formulario. En general, puede encontrar el código de inicialización del formulario en el archivo scripts.js. El código de llamada del complemento se puede recortar desde allí y escribir justo antes del archivo . No te olvides de jQuery.(document).ready() .

El formulario puede aceptar algunas opciones.

Opciones

• SuccessTitle (cadena): título del mensaje de agradecimiento cuando se envía el formulario. El valor predeterminado es "¡Gracias por elegirnos!"
• SuccessText (cadena): el texto bajo el título del mensaje de agradecimiento. El valor predeterminado es "Nos comunicaremos con usted en breve".
• errorTitle (cadena): título del mensaje de error de envío del formulario. El valor predeterminado es "¡Mensaje no enviado!".
• errorSubmit (cadena): texto del mensaje de error de envío del formulario. El valor predeterminado es "¡Error al enviar el formulario!".
• errorNocaptcha (cadena): texto de error si el captcha no se completó.
• errorCaptcha (cadena): texto de error si la verificación falló.
• mailUrl (cadena): ruta al archivo del controlador. El valor predeterminado es "../form-submit/submit.php". Debe cambiar y especificar la ruta completa si su carpeta de "envío de formulario" no está en la raíz del sitio.
• autoClose (booleano): cierra automáticamente la ventana después de enviar correctamente el formulario (para formularios en una ventana modal). La ventana del formulario se cierra y muestra un mensaje de agradecimiento después de 5 segundos. Esta vez puede ser anulado.
• autoCloseDelay (número): duración (en milisegundos) de la visualización del mensaje de agradecimiento después del cual se cerrará. El valor predeterminado es 5000 (5 segundos).
• depuración (booleano): falso por defecto. Habilite la depuración si hay problemas con el formulario. Ver mensajes de error en la consola.
• captcha (booleano): falso por defecto. Habilite o deshabilite Recaptcha 2.0.
• captchaPublicKey (cadena): recaptcha clave pública.

Formulario en una ventana modal

Nuestro formulario también se puede mostrar en una ventana modal. El modal será exhibido por la biblioteca.

Código HTML

Código de botón

Solicitar una llamada

código de formulario

Inicialice la ventana modal y el formulario. Hagamos que la ventana se cierre automáticamente después de 3 segundos. después del envío exitoso del formulario. También puede encontrar el código de llamada de Magnific Popup en el archivo scripts.js.

Llamar a un formulario con una ventana modal // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( tipo: "inline", fijoContentPos: falso, fijoBgPos : verdadero, overflowY: "auto", closeBtnInside: verdadero, precargador: falso, midClick: verdadero, RemovalDelay: 300, mainClass: "mfp-top-up" )); // ===== Formulario modal inicial ==== $("#idForm").simpleSendForm (( SuccessTitle: "¡Su solicitud ha sido aceptada!", SuccessText: "Nuestro empleado se comunicará con usted lo antes posible". , autoClose: verdadero, autoCloseDelay: 3000 )); ¿Cómo habilitar Recaptcha?

Si desea habilitar recaptcha en un formulario, debe agregar un bloque vacío con la clase recaptcha en el código html del formulario en el lugar donde desea mostrarlo. A continuación, en el código para llamar al complemento de formulario, pasamos la opción captcha con el valor verdadero y pasamos su clave pública recaptcha a la opción captchaPublicKey. Puede obtener claves públicas y privadas.

// ===== Iniciar captcha en el formulario ==== $("#idForm").simpleSendForm(( SuccessTitle: "¡Su solicitud ha sido aceptada!", SuccessText: "Nuestro empleado se comunicará con usted lo antes posible ." , autoClose: verdadero, autoCloseDelay: 3000, captcha: verdadero, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

A continuación, abra el archivo del controlador de formularios submit.php desde el directorio de envío de formularios. Buscamos la variable recaptchaOn (aproximadamente en la séptima línea) y la configuramos en verdadero. A continuación, busque la variable $secret (aproximadamente la línea 89) y cambie la clave privada por la suya.

Básicamente todo. Después de estas manipulaciones, deberías ver un captcha.

Tenga en cuenta que en el sitio de demostración el captcha funciona en modo de prueba, como se indican las claves de prueba de Google.

Ahora veamos el archivo del controlador de formulario (submit.php) y repasemos las partes principales del código. El controlador funciona en PHP, por lo que si desea probar el formulario deberá utilizar .

Posibles errores El mensaje del formulario no se envía, el precargador simplemente corre y listo. ¿Cuál es el problema?

Vea si la ruta al archivo del controlador está especificada correctamente en la inicialización del formulario:

mailUrl: — ruta al archivo del controlador

También verifique que el recaptcha esté habilitado correctamente. Es decir, si está deshabilitada, las opciones de recaptcha en el código de inicialización y $recptchaOn en el archivo del controlador deben establecerse en falso o verdadero si recaptcha está habilitado.

No mostrada Resumen de Google en la forma de

Compruebe si se han transmitido los valores de recaptcha (llamada de recaptcha) y $recaptchaOn (archivo de controlador). verdadero. También verifique si especificó las claves correctamente: pública y privada.

Hice todo según las instrucciones, pero el formulario no funciona, ¿dónde puedo buscar el error?

En primer lugar, le aconsejo que busque en la consola del navegador y compruebe si hay errores. Comprueba también si tienes habilitada la biblioteca jQuery. Compruebe que el archivo scripts.js esté incluido correctamente. Si todo está bien, intente habilitar la depuración con la opción debug:true. Después de encenderlo, mire la consola en busca de errores.

Esta es la forma. Úsalo en tu sitio web, espero que te sea de utilidad. ¿Qué más decir? Hablemos ahora, en los comentarios. Pregunte si algo no está claro. Además, si encuentra algún error, hágamelo saber inmediatamente y lo corregiremos...

Eso es todo. Gracias por su atención. ¡Nos vemos en las próximas publicaciones!

Saludos a mis lectores, he adquirido experiencia y les contaré los principios de funcionamiento del formulario. comentario php. te lo mostraré ejemplos claros, para que comprenda cómo funciona todo y cómo se produce la interacción entre el formulario de entrada en sí (sus campos de entrada) y el archivo controlador escrito en PHP. Además, puedes descargar las fuentes de forma gratuita junto con .

Por supuesto, será genial si tienes al menos un poco de conocimiento de HTML/CSS porque... Tendrás que arrastrar el código a tu página por analogía. No tocaremos el lenguaje PHP; le mostraré todos los cambios necesarios que debe realizar usted mismo.

ACTUALIZACIÓN: Según las respuestas de los lectores, me di cuenta de que necesito algo más hermoso y funcional, conóceme, compruébalo y échale un vistazo. Elige cuál te gusta más)

ACTUALIZACIÓN2: Versión 3.0 Adaptive Landing + formulario ajax con transmisión de etiquetas UTM, lea y vea. Te gustará

Me acordé de mí mismo cuando intenté por primera vez crear un formulario de comentarios en PHP por mi cuenta y, para ser honesto, fue mucho trabajo, porque... No entendí qué y cómo estaba pasando. Paciencia y perseverancia, amigos, y lo lograréis.

Formulario de comentarios PHP - estructura

Estudiaremos el análisis del formulario de comentarios en sí usando un ejemplo. página de destino (Página de destino), por cierto, hay un artículo aparte sobre. Puede ver cómo funciona esto en acción usando los botones a continuación. Adjunto las fuentes de esta página de una sola página y el archivo principal del controlador PHP (este archivo procesará y enviará el correo electrónico).

Después de descargar las fuentes y descomprimir el archivo, verá la siguiente estructura de archivos:

• Imagen: todas las imágenes que se utilizan para la propia página de destino, botones, etc.
• js: scripts javascript que proporcionan, por ejemplo, una ventana modal emergente en una página y otros efectos visuales
• index.html: archivo de índice de nuestra página de una página
• index1.php es un archivo controlador al que se transfieren los valores del formulario, luego se genera una carta a partir de las variables recibidas y se envía a la dirección de correo electrónico especificada. Index1.php también actuará como una página de notificación intermedia sobre el envío exitoso de datos con redirección automática a index.html (es decir, nuestra página de una sola página).

Es importante que su alojamiento, donde se encuentran los archivos del sitio, admita el procesamiento PHP; de lo contrario, el archivo index1.php no se ejecutará y no funcionará. Para aclarar este matiz, comuníquese con la campaña donde está registrado su hosting o simplemente pruébelo: funciona, significa que hay soporte. Si no es así, habilite la opción de compatibilidad con el idioma php.

Eche un vistazo al diagrama de cómo interactúan todos los elementos (página, formulario, controlador)

Código fuente para llamar al formulario y al controlador.

Echemos un vistazo a cómo funciona uno de los botones, que muestra una ventana emergente modal que contiene un formulario de comentarios. esto dado fuente- No es solo uno, sino dos insertados en la página y funcionará, tendrás que personalizarlo tú mismo para adaptarlo a tu diseño y necesidades.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Solicitar una devolución de llamada Solicitar una devolución de llamada

Solicitar una devolución de llamada Solicitar una devolución de llamada

A continuación se muestra el código fuente completo del controlador index1.php. Para configurar el envío a su buzón, cambie " [correo electrónico protegido]"a tu cuenta, el resto, en principio, se puede dejar sin cambios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Serás contactado

Se le contactará body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Cambia la dirección de la página actual después de 3 segundos (3000 milisegundos)*/

Comprobando la funcionalidad del formulario.

Abra la ventana e ingrese los datos para una verificación de prueba de nuestro formulario

Déjame recordarte una vez más, tu hosting debe soportar el procesamiento. archivos php, de lo contrario, nuestro controlador simplemente no se ejecutará y no se enviará ninguna carta a la dirección de correo electrónico especificada. El resultado de un formulario de comentarios completado con éxito

Eso es todo para mí, traté de transmitir el significado y funcionamiento del guión de la mejor manera posible. Si tiene alguna pregunta, no dude en ponerse en contacto conmigo en los comentarios o en VK (ver datos de contacto). Les deseo un trabajo fácil y productivo.

Hola a todos. Nos bombardearon con preguntas sobre cómo implementar un formulario que aparece en una ventana modal después de hacer clic en un botón y, después de enviarlo, se muestra un mensaje sobre el éxito o el fracaso.

Creo que hay muchas cosas similares en Internet, pero como la gente pregunta, decidí hacerlo. Además, dicha funcionalidad debe estar presente en casi todas las páginas de destino para implementar un botón de devolución de llamada. Y, de hecho, ahora hay cada vez más resultados de pruebas AB que muestran que los formularios abiertos funcionan peor que los ocultos en una ventana modal y abiertos después de hacer clic en un botón.

Algunos argumentan que esto se debe al hecho de que las personas están "desarrollando inmunidad" lentamente y la forma abierta es una venta agresiva. Supuestamente, ahora es el momento en que el usuario, al ver un formulario abierto, cree que están intentando “venderle” algo. No estoy del todo de acuerdo con esta teoría, pero hay una pizca de verdad. Esto puede ser cierto en algunos tipos de negocios. Bueno, ahora vayamos a implementar el formulario.

¡Nota! No describiré cada acción en detalle, pero les ofreceré una versión lista para usar en el código fuente. Si tienes alguna pregunta, escribe en los comentarios. Lo resolveremos :)

Hoy no comenzaremos con jQuery, sino con el diseño del botón y el formulario. Incluiremos todos los scripts al final de la página.

Un botón que, al hacer clic, abrirá una ventana modal:

Envíe su solicitud

Puede configurar cualquier clase, pero en href escriba #modal; esta será la identificación del contenedor con sombreado y un formulario de contacto.

Ahora daré el código del formulario y el bloque en el que se ubicará el formulario:

Deja tus datos de contacto y nuestro asesor se pondrá en contacto contigo.Quiero este formulario para mi sitio web

Después de agregar estilos, se veía así:

Para crear una ventana modal, se utilizó la biblioteca Remodal. Este es un conjunto de archivos css y js, solo para crear ventanas modales animadas. Puedes descargarlo desde el enlace o con mis ediciones al final del artículo.

Agregamos estilos entre las etiquetas principales:

Y antes de la etiqueta del cuerpo de cierre, agregue scripts:

Script.js es un script para procesar el formulario. El mismo Ajax que nos permite realizar todo el procedimiento sin recargar la página:

$(document).ready(function () ( $("form").submit(function () ( // Obtener el ID del formulario var formID = $(this).attr("id"); // Agregar un hash al nombre ID var formNm = $("#" + formID); $.ajax(( escriba: "POST", url: "mail.php", datos: formNm.serialize(), éxito: función (datos) ( // Muestra el texto del resultado del envío $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Muestra el texto del error de envío $(formNm).html(error); ) )); falso retorno; ) ); ));

no daré el original codigo css y js de los archivos responsables de la ventana modal y el formulario, ya que son bastante grandes. Si es así, mira la fuente. Pero el controlador PHP es en gran medida estándar (si se me permite decirlo):

Por favor no olvides cambiar tus direcciones Correo electrónico por tu cuenta.

Esta es la forma ajax que obtuvimos. Perdón por no intentar explicar en detalle cómo se hizo cada elemento. Sólo quería dar un resultado final, pero no tiene sentido describir todas las animaciones y apariencias. Descargue la fuente e impleméntela en su sitio web. Y eso es todo por hoy. ¡Buena suerte a todos!

Chicos, les insto a que prueben el formulario en un modelo real o servidor virtual(alojamiento). Asegúrese de que su servidor sea compatible con PHP, que tenga un plan pago y no un período de prueba. De lo contrario, en el 90% de los casos el formulario no funcionará.

No esperes una carta en tu casa buzón, si simplemente abrió el archivo de índice en el navegador y hizo clic en el botón "Enviar". ¡Php es un lenguaje del lado del servidor!

Si eres demasiado vago para resolverlo y hacer el formulario tú mismo, te recomiendo que le prestes atención.

La versión actualizada del artículo se encuentra