Formulario de comentarios de comentarios. Formulario de contacto usando jQuery, jGrowl, ajaxForm y Buzz

De conformidad con la Ley Federal de 27 de julio de 2006 No. 152-FZ “Sobre Datos Personales”, yo, el titular de los datos personales, mencionado en usuario adicional enviando información a través de formularios comentario(en adelante, los Formularios) en el sitio web (en adelante, el Sitio), así como a las direcciones de correo electrónico corporativas de la Firma de Abogados “Business Fairway” que terminan en (en adelante, el Correo Corporativo), libremente , por mi propia voluntad y en mi propio interés, expreso a la Oficina de Abogados "Business Fairway" (OGRN 1167700058679; INN 9705068808), ubicada en la dirección: 109240, Moscú, calle Goncharnaya, edificio 24, (en adelante, el Operador), consiento el procesamiento de mis datos personales (en adelante, el Consentimiento) en las siguientes condiciones.

1. El momento de aceptación del Consentimiento es marcar el campo correspondiente en el Formulario y hacer clic en el botón enviar del Formulario en cualquier página del Sitio, así como hacer clic en el botón enviar correo electrónico, que contiene los datos personales del Usuario, a la dirección correo corporativo Operador.

2. Procesamiento de datos personales – cualquier acción (operación) o conjunto de acciones (operaciones) realizadas utilizando herramientas de automatización o sin el uso de tales medios con datos personales, incluyendo la recolección, registro, sistematización, acumulación, almacenamiento, aclaración (actualización, cambio ), extracción, uso, transferencia (distribución, provisión, acceso), despersonalización, bloqueo, eliminación, destrucción de datos personales.

3. El procesamiento de datos personales se realiza tanto con el uso de herramientas de automatización, incluidas las redes de información y telecomunicaciones, como sin el uso de dichas herramientas.

4. Se da consentimiento para el procesamiento de los siguientes datos personales del Usuario, especificado por el usuario en Formularios, en archivos adjuntos a Formularios, así como información enviada a direcciones de correo Corporativas:

Apellido, nombre, patronímico;

DIRECCIÓN correo electrónico;

Número de teléfono de contacto;

Edad;

Otros datos personales especificados por el Usuario en los Formularios o archivos adjuntos a los Formularios.

5. Finalidades del tratamiento de datos personales:

Identificación del usuario;

Interacción con el Usuario, incluido el envío de notificaciones, solicitudes e información sobre los servicios del Operador, así como procesar solicitudes y solicitudes del Usuario y establecer comentarios del Usuario al Operador;

Respuestas a las solicitudes de los Usuarios;

Garantizar el trabajo del Usuario con el Sitio web del Operador;

Enviar materiales analíticos a los Usuarios e informar a los Usuarios sobre próximos eventos organizado por el Operador, así como el registro de Usuarios para participar en dichos eventos;

Celebración de acuerdos con el Usuario, incluidos contratos de empleo y servicios. servicios legales;

Dirección de información y otra información a los Usuarios información de marketing, mediante el envío de mensajes a la dirección de correo electrónico especificada por el Usuario.

Proporcionar a los Usuarios asesoramiento sobre cuestiones relacionadas con los servicios prestados por el Operador, con fines de actividades de marketing y soporte a los Usuarios, así como para otros fines que no contradigan legislación vigente Federación Rusa y los términos de los acuerdos entre el Operador y los Usuarios.

6. Durante el procesamiento de datos personales, el Operador tiene derecho a recopilar, registrar, sistematizar, acumular, almacenar, aclarar (actualizar, cambiar), extraer, utilizar, transferir (distribución, provisión, acceso), despersonalizar, bloquear, eliminar. , destruir los datos personales del Usuario.

7. El operador toma las medidas organizativas y suficientes necesarias y medidas técnicas para protección información personal Usuarios del acceso no autorizado o accidental, destrucción, modificación, bloqueo, copia, distribución, así como de otras actuaciones ilícitas de terceros.

8. No se realiza la transferencia de datos personales del Usuario a terceros, con excepción de los sucesores legales del Operador durante su reorganización y las personas que procesan datos personales en nombre del Operador y en su nombre. Si los Usuarios participan en eventos organizados por el Operador, este último tiene derecho a revelar los datos personales relevantes de los Usuarios a las personas que participan en la organización de dicho evento.

9. El consentimiento para el procesamiento de datos personales lo otorga el Usuario por el período necesario para que el Operador alcance los propósitos del procesamiento de datos personales.

10. El Usuario podrá revocar el consentimiento enviando una declaración escrita al Operador (109240, Moscú, calle Goncharnaya, 24) o enviando una declaración escrita a la siguiente dirección de correo electrónico corporativa: .

11. Este Consentimiento es válido todo el tiempo hasta la terminación del procesamiento de datos personales.

12. Los conceptos utilizados en este Consentimiento deben interpretarse de acuerdo con sus definiciones, que figuran en la Ley Federal de 27 de julio de 2006 N 152-FZ “Sobre Datos Personales”.

Para el desarrollo de un proyecto web es muy importante recibir feedback de los visitantes. Desafortunadamente, en muchos sitios web la posibilidad de enviar un mensaje a los desarrolladores no está disponible en absoluto o está asociada con dificultades bastante graves.

Hoy haremos una solución sencilla a este problema. Usando jQuery, PHP y la clase PHPMailer, el formulario envía la propuesta del usuario directamente a su bandeja de entrada.

HTML

Empecemos con marcado HTML. Los estilos se incluyen en la parte superior del documento y archivos javascript- abajo. Esto optimiza el proceso de carga de la página, por lo que los scripts se cargan al final, lo que permite al usuario ver el contenido de la página.

demostración.html

Formulario de comentarios usando PHP y jQuery | Demostración del sitio web. Comentarios sobre el sitio web.

Por favor habilite Información del contacto, si quieres una respuesta.

Enviar

Adentro cuerpo situado div#comentario. Está ubicado en la parte inferior derecha de la ventana usando posicionamiento fijo, que se verá en la sección CSS de la lección.

Dentro de esto div Se colocan cinco elementos de colores. durar. Cada uno de ellos tiene un 20% de ancho y está desplazado hacia la izquierda. De esta manera se colocan exactamente en todo el ancho. div#comentario.

Luego viene el contenedor .section, que contiene el título, el área de texto y el botón.

CSS

Pasemos a configurar estilos para el formulario. Primero, digamos algunas palabras sobre en qué consiste la estructura de una hoja de estilo. Si observa las definiciones de CSS a continuación, notará que cada regla comienza con #feedback. Esto crea un espacio de nombres similar en CSS, lo que facilita agregar código a un sitio web existente sin conflictos.

estilos.css - Parte 1

#feedback( color de fondo:#9db09f; ancho:310px; alto:330px; posición:fija; abajo:0; derecha:120px; margen inferior:-270px; índice z:10000; ) #feedback .section( fondo :url("img/bg.png") repetir-x borde superior: 1px sólido #808f81; borde inferior: ninguno; relleno: 10px 25px 25px; ancho: 20%; -1( color de fondo:#d3b112;) #feedback .color-2( color de fondo:#12b6d3;) #feedback .color-3( color de fondo :#8fd317;) #feedback .color-4( fondo- color:#ca57df;) #feedback .color-5( background-color:#8ecbe7;) #feedback h6( background:url("img/feedback.png" ) sin repetición; margen:5px 0 12px; cursor:puntero ; ) #feedback textarea( color de fondo:#fff; borde:ninguno; color:#666666; fuente:13px "Lucida Sans",Arial,sans-serif; relleno:10px; cambiar tamaño:ninguno; desbordamiento:auto; -box -sombra:4px 4px 0 #8a9b8c;

sombra de cuadro: 4px 4px 0 #8a9b8c; ) div El primer elemento a diseñar es div #comentario. Se le asigna una posición fija y se ancla a la ventana del navegador. Después de esto viene la definición de.sección durar y cinco elementos de colores

. Estos elementos se diferencian únicamente en el color de fondo, que se asigna por separado para cada clase. En la parte inferior de la parte presentada. archivo css

Se definen reglas para mostrar el área de texto.

estilos.css - Parte 2

La segunda parte de la hoja de estilo define la apariencia del botón de enviar. Tenga en cuenta que hay tres estados de botón, cuyas imágenes están contenidas en un archivo para imagen de fondo - enviar.png. Se muestran sólo cuando es necesario.

jQuery

El formulario de comentarios tiene dos estados: minimizado y máximo. Al iniciar, el estado predeterminado se establece en el estado minimizado en la parte inferior derecha de la pantalla. Y jQuery lleva el formulario a su estado máximo cuando el usuario hace clic en el encabezado. Esta función Esto se realiza vinculando un evento y realizando animaciones simples.

script.js - Parte 1

$(documento).ready(función())( // Relativo URL del guión enviar.php.

// Probablemente necesitarás cambiarlo. var enviarURL = "enviar.php";// Almacenar en caché el objeto de retroalimentación: var feedback = $("#feedback"); $("#feedback h6").click(function())( // Los valores de las propiedades de animación se almacenan // en un objeto separado: var anim = ( mb: 0, // Margen inferior pt: 25 // Superior padding ); var el = $(this).find(".arrow"); if(el.hasClass("down"))( anim = ( mb: -270, pt: 10 ); ) // La primera animación mueve la forma hacia arriba o hacia abajo, y el segundo mueve // ​​el título para que esté alineado con la versión minimizada feedback.stop().animate((marginBottom: anim.mb)); .stop().animate((paddingTop: anim.pt),function())( el.toggleClass("abajo arriba"); )); Para mantener el código simple y claro, se crea un objeto anim en la parte superior, que contiene los valores para la animación, y se coloca el operador

si . Dependiendo de la existencia de la clase' abajo 'en la flecha, expandimos o colapsamos la forma..

Segunda parte

script.js maneja el trabajo con AJAX enviar.php< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // script.js - Parte 2 ayuda al usuario a identificar el error: if(xhr.status == 404)( text = "La ruta al script submit.php es incorrecta."; ) // Ocultar el botón y el área de texto después del cual // mostramos el recibió respuesta del botón submit.php .fadeOut();

textarea.fadeOut(función())( var span = $("",( className: "respuesta", html: texto )) .hide() .appendTo(feedback.find(".section")) .show() ; )).val(""); 'en la flecha, expandimos o colapsamos la forma.) ));

devolver falso; )); )); Usamos el método AJAX $.ajax() de jQuery para interactuar con . Este método brinda un poco más de control sobre la conexión que $.get() y $.post() . Una de las ventajas del método es la visibilidad de las propiedades del objeto en "todo". función de retorno.

. Aquí comprobamos el estado de la respuesta de cumplimiento.

error 404 (página no encontrada)

y mostrar un mensaje al usuario pidiéndole que verifique la ruta enviar URL Ahora es el momento de pasar a la parte final: PHP.

PHP

PHP procesa los datos pasados ​​desde AJAX, los valida y los envía mensaje de correo electrónico en la dirección indicada. enviar.php// Aquí debes ingresar tu dirección $emailAddress = "< 10 || $_SESSION["submitsLastHour"] >[correo electrónico protegido]< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->"; // Utilice la sesión para evitar inundaciones: session_name("quickFeedback"); session_start(); // Si el último formulario se envió hace menos de 10

hace segundos , // o el usuario ya envió 10 mensajes en la última hora if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] 10))( die("Espere unos minutos antes de volver a enviar el mensaje."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; requiere "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc"))( $_POST["message"] = stripslashes($_POST["message"]); ) if(mb_strlen($_POST["message"],"utf-8")

IsMail(); // Agrega la dirección del destinatario $mail->AddAddress($emailAddress); $mail->Subject = "Nuevo correo electrónico del formulario de comentarios"; $correo->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Formulario de comentarios en la página de demostración"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Formulario de comentarios en la página de demostración"); $correo->Enviar(); eco "¡Gracias!";

Múltiples métodos PHPMailer Se utiliza para configurar el correo electrónico saliente. El método IsMail() le dice a la clase que use función interna PHP correo(). El método AddAddress() agrega la dirección del destinatario (puede agregar más de un destinatario usando llamadas adicionales este método). Después de agregar el asunto de la carta y el texto, se indica la dirección de respuesta y se envía el mensaje.

¡Listo!

Conclusión

puedes usar este formulario para organizar comentarios rápidos de los visitantes de su sitio. Barrera de envío muy baja: solo necesita completar el campo de texto y hacer clic en el botón; se creará excelentes condiciones para que los visitantes de sus páginas comiencen a compartir sus ideas. El script también está bien estructurado y es fácil de personalizar, lo que le ayudará a utilizarlo en su sitio web con el mínimo esfuerzo.

¡Hola amigos! Me gustaría presentarles un script universal para enviar datos desde formularios al correo electrónico. El script es ideal para sitios como páginas de destino, sitios de tarjetas de presentación, etc. Nuestro script Feedback Forms se destaca entre muchos otros scripts en Internet porque tiene la capacidad de conectar un número ilimitado de formularios con diferentes campos en una página y puede enviar cartas a varios destinatarios.

Entonces. Empecemos. Comencemos con las capacidades del script.

Conecte una cantidad ilimitada de formularios en una página.

Comprobando que los campos están cumplimentados correctamente.

Configurar notificaciones.

Posibilidad de utilizar letras para cada formulario.

Tipo de letra - (si se usa etiqueta html Y)

Enviar a cantidad ilimitada direcciones.

Personalización individual de cada formulario.

El script se ejecuta en , sin recargar la página.

Protección contra robots de spam.

Configuración inicial.
El script funciona en base a la biblioteca, por lo que lo primero que debemos hacer es conectarlo. Para esto recomiendo usar Alojado en Google Bibliotecas.

Hablemos de los archivos restantes con más detalle:

feedback.js es el archivo de script principal, responsable de envío AJAX formas.
jquery.arcticmodal.js,
jquery.arcticmodal. - proporcionar la capacidad de mostrar formularios en.
ventana modal
jquery.jgrowl.js, jquery.jgrowl.css: le permite mostrar notificaciones en la página (bloques en esquina superior

páginas).
HTML y atributos requeridos.
Para un botón (tipo="botón") debe especificar class="feedback" . También quiero llamar su atención sobre el hecho de que puede actuar como un botón. cualquier html una etiqueta con la clase "feedback" Llamar a un formulario en una ventana modal Para llamar a un formulario en una ventana modal, primero necesita definir una acción para hacer clic en una etiqueta, por ejemplo un div con la clase modal_btn.
Llamar a un formulario en una ventana modal $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); ));
Dado que el formulario debe ser visible solo en la ventana modal, debe ocultarse colocándolo en un div con el atributo style="display: none;" y también envuelto en un par de divs estándar para darle estilo a la ventana modal.
incógnita

Entonces, hemos descubierto la configuración básica para conectar nuestro script para enviar formularios al correo electrónico. Ahora echemos un vistazo al interior y descubramos cómo configurar campos, notificaciones y todo lo demás que hay allí.

Ejemplo de configuración para un formulario Las configuraciones para todos los formularios se almacenan en el archivo feedback\index.php
$formulario["formulario-1"] = array("campos" => array("nombre" => array("título" => "Nombre", "validar" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "El campo [ %1$s ] puede contener un error", "minlength " => "La longitud mínima del campo [ %1$s ] es menor que la longitud permitida - %2$s", "maxlength" => "La longitud máxima del campo [ %1$s ] es mayor que lo permitido - %2$s",)), "tell " => array("title" => "Phone", "validate" => array("preg" => "/^((8|\+) [\- ]?)?(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5", ), "messages" => array("preg" => "El campo [ %1$s ] puede contener un error", "minlength" => "La longitud mínima del campo [ %1$s ] es menor que la permitida longitud - %2$s",)),), "cfg" => array(" charset" => "utf-8", "subject" => " Asunto de la carta", "title" => "Título en el cuerpo del correo electrónico", "ajax" => true, "validate" => true, "from_email" => " mensaje de correo electrónico", "from_name" => "noreply", "to_email" => " mensaje de correo electrónico, mensaje de correo electrónico", "to_name" => "noreply1, noreply2", "geoip" => verdadero, "referer" => verdadero, "tipo" => "html", "tpl" => verdadero, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Mensaje enviado - OK", "joder" => "Mensaje enviado - ERROR", "spam" => "Robot spam", "notificar" => "color-modal-textbox", "usepresuf" => false)); // Siguiente formulario $form["form-2"] = array("fields" => array(.....
Para agregar configuraciones nueva forma, debes seguir el ejemplo de la matriz $form["form-1"] para crear una nueva matriz $form[""]

Recuerda de lo que hablé atributo requerido nombre="" ?

Un atributo obligatorio para todos los elementos del formulario es el atributo name="", necesario para la posterior personalización del formulario.
Así que ha llegado el momento de decirles por qué sigue siendo necesario.
name="" es la clave alfanumérica para la matriz, debe ser única para la matriz $form[""]

Ejemplo código html para mayor claridad

Ahora comprendamos las matrices y para qué se necesitan.

$formulario["formulario-1"] = matriz();
$formulario["formulario-2"] = matriz();
etc.

Estas son las matrices principales para cada nuevo formulario y contienen:

• "campos" => matriz();
  • - Una variedad de configuraciones para elementos de formulario.
  • "nombre" => matriz();
    • - Una matriz de configuraciones de elementos de formulario (por ejemplo, input name="name" type="text") que tiene varias configuraciones.
    • "title" => "Su nombre" - el nombre del elemento del formulario, se mostrará en caso de errores o en la plantilla "validar" => matriz();- matriz, contiene reglas de validación de elementos de formulario
    • "preg" => "%%" - expresión regular "longitud mínima" => "3" -- matriz, contiene reglas de validación de elementos de formulario
    • tamaño mínimo
  • campos
    • "longitud máxima" => "35" - tamaño máximo"
    • "substr" => "35" - siempre cortado a N caracteres
    • "mensajes" => matriz();

- una matriz que contiene mensajes de validación, a saber:

• "preg" => "El elemento del formulario no coincide
• expresión regular
• "minlength" => "La longitud mínima del campo [ %1$s ] es inferior a la aceptable - %2$s" - error de validación, la clave (preg) no coincide con la clave de validación
• "maxlength" => "La longitud máxima del campo [ %1$s ] excede el límite permitido - %2$s" - error de validación, la clave (preg) no coincide con la clave de validación
• "cfg" => matriz();
• - Una variedad de configuraciones de formulario. mensaje de correo electrónico
• "charset" => "utf-8" - codificación
• "asunto" => "Asunto de la carta", - Asunto de la carta mensaje de correo electrónico"título" => "Título en el cuerpo de la carta", - Título en el cuerpo de la carta mensaje de correo electrónico, mensaje de correo electrónico, mensaje de correo electrónico",)
• "ajax" => true, este es el formulario TODO de Ajax (si no es necesario, configúrelo en falso)
• "geoip" => true, - descubre la ubicación usando el tipo TODO
• "referente" => falso, - agregar URL de la página con el que se envió el formulario
• "tipo" => "normal", - tipo de letra - normal, html (si se utilizan etiquetas html)
• "tpl" => false, - utilice una plantilla de carta. Si es verdadero, entonces el archivo de plantilla se conectará de acuerdo con el nombre del formulario (nombre="form-1") de la carpeta y se procesará el archivo (feedback/tpl/form-1.tpl); de lo contrario, todo será enviado tal cual, cada campo en una nueva línea
• "antispam" => "email77", - Anti spam, el método se basa en un campo oculto (display:none), que sólo el robot rellena automáticamente, delatándose así.
• "antispamjs" => "address77", - El método antispam se basa en un campo oculto (display:none), inicialmente lleno, que borra automáticamente javascript cuando se carga la página, ni siquiera un robot inteligente puede anticipar esto, y luego es obstruido.
• "bien" => " Mensaje al usuario", - Se muestra un mensaje para el usuario si el formulario se envía correctamente; puede utilizar etiquetas html.
• "fuck" => "Mensaje al usuario", - Un mensaje al usuario, que se muestra cuando ocurre un error al enviar el formulario, puede usar etiquetas html.
• "spam" => "Mensaje al usuario", - Mensaje al usuario, que se muestra si se sospecha de un robot de spam; puede utilizar etiquetas html.
• "notificar" => "color-modal", - qué tipo de notificaciones mostrar, cuadro de texto - bloques en la esquina superior de la página, color - color resaltado en el formulario, modal - ventana modal en el centro de la página, ninguna - desactivar. Puede combinar, por ejemplo: color-modal: errores al completar campos resaltados y estado de envío de texto en la ventana modal TODO
• "usepresuf" => false - Si se utiliza una adición personalizada al asunto o al encabezado de la carta, en caso de que no lo sea gran cambio puedes especificar, por ejemplo, %%cfg.title.suffix%%, para esto debe haber un campo oculto en el formulario, para más detalles ver función presuf()

Configurar plantillas de cartas Entonces. Veamos ahora el tema de nuestros mensajes.
En primer lugar, para que el formulario se envíe en una plantilla, en la configuración del formulario debe habilitar el uso de un archivo de plantilla - "tpl" => true ,
En segundo lugar, debe crear un archivo de plantilla con extensión *.tpl en la carpeta (feedback/tpl/), de acuerdo con el nombre del formulario (nombre="form-1").

Ejemplo: (comentarios/tpl/form-1.tpl)

Encabezado en el cuerpo del correo electrónico
%%nombre.título%%	%%nombre.valor%%
%%tell.título%%	%%tell.valor%%

nombrar, decir, etc. - Estos son los atributos (nombre="") de los campos que rellena el usuario.
título: el nombre del elemento del formulario, que se establece en la matriz de configuración del elemento del formulario.
valor: el valor del elemento del formulario.

Eso es todo por hoy, pero el script, por supuesto, no es ideal, por lo que los comentarios y descripciones de errores son bienvenidos. próximas versiones será corregido.

PD El guión fue desarrollado por el equipo.