Formulario de comentarios rápido en PHP y jQuery. PHP incluye vulnerabilidad: de la teoría a la práctica

¡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 sola página.

Comprobando que los campos están cumplimentados correctamente.

Configurar notificaciones.

Posibilidad de utilizar letras para cada formulario.

Tipo de letra: (si se utilizan etiquetas html)

Envío a un número ilimitado de 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 hacer esto, recomiendo usar Bibliotecas alojadas en Google.

Hablemos de los archivos restantes con más detalle:

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

HTML y atributos requeridos.
Un atributo obligatorio para todos los elementos del formulario es el atributo name="", necesario para la posterior personalización del formulario.
Para un botón (tipo="botón") debe especificar class="feedback" . También me gustaría llamar su atención sobre el hecho de que cualquier etiqueta HTML con la clase "comentarios" puede actuar como un botón. Llamar a un formulario en una ventana modal. Para llamar a un formulario en una ventana modal, primero debe definir una acción. para hacer clic en cualquier 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.
X

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 permitida - %2$s", "maxlength" => "La longitud máxima del campo [ %1$s ] es mayor que la permitida - %2$s", )), "tell " => array("title" => "Teléfono", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "longitud mínima" => "5",), "mensajes" => matriz( "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",) ),), "cfg" => array(" charset" => "utf-8", "subject" => "Asunto del correo electrónico", "title" => "Encabezado en el cuerpo del correo electrónico", " ajax" => verdadero, "validar" => verdadero, "from_email" = > " [correo electrónico protegido]", "from_name" => "noreply", "to_email" => " [correo electrónico protegido], [correo electrónico protegido]", "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 para un nuevo formulario, debe seguir el ejemplo de la matriz $form["form-1"] para crear una nueva matriz $form[""]

¿Recuerdas lo que dije sobre el atributo name="" requerido?

Un atributo requerido para todos los elementos del formulario es el atributo name="", necesario para la configuración posterior 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 de 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, nombre de entrada="nombre" tipo="texto") 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
    • "minlength" => "3" - tamaño mínimo de campo
    • "maxlength" => "35" - tamaño máximo de campo
    • "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 con la 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.

• "charset" => "utf-8" - codificación
• "asunto" => "Asunto de la carta", - Asunto de la carta
• "título" => "Título en el cuerpo de la carta", - Título en el cuerpo de la carta
• "ajax" => true, este es el formulario TODO de Ajax (si no es necesario, configúrelo en falso)
• "validate" => true, - (true) si queremos validar el formulario en el servidor, reemplaza la validación js con "ajax" => true. Cuando está desactivado (falso), no es necesario establecer la configuración del campo de validación. HACER
• "from_email" => "myemail", - remitente, especifique el nombre del campo (nombre = "myemail"), y si no necesita un correo electrónico del usuario, entonces un talón [correo electrónico protegido]
• "from_name" => "myname", - remitente, especifique el nombre del campo (name="myname"), y si no necesita un nombre de usuario, entonces el código auxiliar Sin respuesta
• "a_correo electrónico" => " [correo electrónico protegido]", - correo electrónico del destinatario. Para enviar a varias direcciones, enumérelas separadas por comas. Ejemplo ("to_email" => " [correo electrónico protegido], [correo electrónico protegido], [correo electrónico protegido]",)
• "to_name" => "noreply1", - Nombre del destinatario. Al enviar a varias direcciones, indique los nombres de los destinatarios, separados por comas. Ejemplo ("to_name" => "noreply1, noreply2, noreply3",)
• "geoip" => true, - descubre la ubicación usando el tipo TODO
• "referer" => false: agregue la URL de la página desde la 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.
• "ok" => "Mensaje al usuario": se muestra un mensaje al 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 - resaltado de color 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 título de la carta, en caso de un pequeño cambio puede especificar por ejemplo %%cfg.title.suffix%%, para esto debe haber un campo oculto en el formulario, para más detalles, consulte f -qiu 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 (name="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 ciertamente no es perfecto, por lo que los comentarios y descripciones de errores son bienvenidos y se corregirán en versiones futuras.

PD El guión fue desarrollado por el equipo.

No es ningún secreto que muy a menudo tienes que comunicarte de alguna manera con los visitantes de tu sitio web. Por supuesto, puedes simplemente dar tu correo electrónico (como hice yo), o puedes ofrecer otro método: este es un formulario de comentarios. Por supuesto, esto requiere conocimientos de PHP. Pero para que no tengas que escribir todo desde cero, te proporciono un muy buen guión para el formulario de comentarios.

Después de la descarga, extraiga el archivo a su sitio web (tenga cuidado de no borrar nada). Ahora vamos a configurarlo. Para hacer esto, abra el archivo "config.php". Y cambiar los valores de las siguientes variables:

"mailto " - poner en lugar de " [correo electrónico protegido]"la dirección de su buzón.

"charset": configure la codificación, aunque si su sitio es ruso, puede dejar "windows-1251".

"contenido": le aconsejo que deje "texto/sin formato", ya que es poco probable que sus visitantes le envíen mensajes en formato HTML.

Ahora puedes ejecutar el archivo index.php del script. Como resultado, aparecerá un formulario frente a usted. Puedes completarlo y enviar la carta.

Ahora surge la pregunta: "¿Cómo insertar este formulario de comentarios en su sitio web?" Para hacer esto, busque el archivo responsable de su página de comentarios (sea "feedback.html"). Cambie inmediatamente la extensión a php (es decir, a "feedback.php"). Copie el código del script index.php al archivo con la página de comentarios (feedback.php). Ahora puedes hacer lo que quieras entre las etiquetas y, pero no borres lo que pegaste de index.php. Tampoco toques lo que hay entre las etiquetas, a menos que sepas exactamente lo que estás haciendo.

Y finalmente, si no te gusta la apariencia del formulario, puedes corregirlo en el archivo “styling.css”.

Si todavía tienes alguna pregunta o hay algunos fallos en el script (no lo he probado), escríbeme por correo electrónico para que pueda corregirlo.

Para no depender del trabajo de los guiones de otras personas, aprenda a crearlos usted mismo. Mi vídeo curso "PHP y MySQL de cero a gurú" le enseñará esto:

En esta lección nos familiarizaremos con la función mail(), usando el ejemplo de cómo crear un formulario de comentarios en PHP y luego enviar los datos recibidos por correo electrónico.

Para hacer esto, crearemos dos archivos: forma.php y mail.php. El primer archivo contendrá solo un formulario con campos para que el usuario ingrese datos. Dentro de la etiqueta del formulario hay un botón. "Enviar" y el atributo de acción, que se refiere al controlador: mail.php, que es donde se accede a los datos del formulario cuando se hace clic en el botón. "Enviar". En nuestro ejemplo, los datos del formulario se envían a una página web llamada "/mail.php". Esta página contiene un script PHP que procesa los datos del formulario:

Los datos del formulario se envían mediante el método POST (procesado como $_POST). $_POST es una matriz de variables pasadas al script actual mediante el método POST.

A continuación se muestra el contenido del archivo forma.php, cuyos campos los rellena el propio usuario en algún sitio web. Todos los campos para la entrada de datos deben tener un atributo de nombre; los valores los escribimos nosotros mismos, según la lógica.

Formulario de comentarios en PHP enviado por correo electrónico


Formulario de comentarios en PHP





Dejar un mensaje:
Su nombre:



Correo electrónico:

Número de teléfono:

Mensaje:

El área de texto puede contener un número ilimitado de caracteres-->

Así es como se ve visualmente el formulario en el navegador.

A continuación escribimos el código para el archivo mail.php. Creamos nuestros propios nombres para las variables. En PHP, una variable comienza con un signo $ y luego el nombre de la variable. El valor de texto de la variable está entre comillas. Usando variables, el contenido del formulario se envía al correo electrónico del administrador simplemente colocando el nombre del elemento del formulario entre corchetes: el valor del nombre.

Por lo tanto, los datos de la matriz $_POST se transferirán a las variables correspondientes y se enviarán al correo utilizando la función de correo. Completemos nuestro formulario y presionemos el botón enviar. No olvides incluir tu correo electrónico. La carta llegó al instante.

Casi todos los sitios web tienen un formulario de comentarios. Y, por supuesto, hay muchas implementaciones diferentes. En este artículo escribiremos un formulario de comentarios que utilizará validación HTML5 y notificaciones emergentes con sonido. Y, por supuesto, la solicitud en sí se enviará mediante ajax. Además, el ejemplo proporcionará dos opciones para procesar la solicitud: mediante ajax y una solicitud POST normal. En el caso de una solicitud POST, se utilizarán mensajes flash basados ​​en la sesión. Más detalles debajo del corte...

Entonces, nuestro proyecto tendrá la siguiente estructura:

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

. ├── css │ ├── jquery.jgrowl.css │ ├── main.css │ └── normalize.css ├── imágenes │ └── jgrowl.close.png ├── protegido │ ├── arranque. php │ ├── flashes.php │ ├── func.php │ └── session.php ├── sonidos │ ├── Notice.mp3 │ └── Notice.ogg ├── feedback.php └ ─ índice .php

El archivo index.php contendrá un formulario de comentarios. Después de que el usuario complete el formulario y haga clic en el botón enviar, se enviará una solicitud ajax al script feedback.php. El cual, a su vez, habiendo procesado la solicitud, devolverá el resultado. Hay un matiz aquí. El script verifica qué solicitud llegó y, dependiendo de esto, devuelve el resultado en forma de json o escribe un mensaje flash en la sesión y luego lo redirige nuevamente a index.php. Es decir, en caso de algún error en JavaScript, la solicitud aún se procesará mediante una simple solicitud POST. Y en este caso, el programador dispone de una herramienta flexible que le permite abandonar siempre ajax.

Los mensajes flash son un tipo de datos de sesión que se borran después de que se solicitan por primera vez. Es una herramienta muy conveniente para pasar mensajes entre solicitudes.

Para no complicar el diseño y también para unificar las notificaciones para el usuario, el ejemplo utiliza mensajes emergentes similares a los utilizados en OSX. Para hacer esto, use el buen complemento jQuery jGrowl, que tiene un sistema de personalización y estilo flexible.

Entonces comencemos con el HTML:

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 43 44 45 46 47 48 49 50 51 52

Formulario de comentarios Nombre de comentarios: Correo electrónico: Mensaje: Enviar //algún código

Como puede ver en el código anterior. No se utiliza en el ejemplo. Simplemente no es necesario para cosas como esta. De todos modos, los datos serán validados en el servidor.

JavaScript:

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

$(documento) .ready (función () ( buzz.defaults .formats = [ "ogg", "mp3" ] ; buzz.defaults .preload = true ; if (buzz.isSupported () ) ( var NoticeSound = nuevo zumbido. sonido ("sonidos/aviso"); $.jGrowl .defaults .position = "arriba a la derecha"; $.jGrowl .defaults .closer = false $.jGrowl .defaults .beforeOpen = función (e, m, o) ( if (noticeSound) noteSound.play () ; ) ; $("form#feedback-form" ) .on ("enviar", función (e) ( e.preventDefault () ; $(this ) .ajaxSubmit (( tipo de datos : "json", éxito: función (respuesta) ( $.jGrowl (respuesta.message, (tema: respuesta.tipo)); if (respuesta.tipo == "éxito") $("formulario#feedback-form") [0] .reset() ; error: función () ($("formulario#formulario de retroalimentación") .unbind ("enviar" ) .submit () ; ) ) );

El código anterior es muy claro. Configuración de notificaciones y reproducción de sonido. Y también la implementación de la operación del formulario sin recargar la página usando la biblioteca ajaxForm.

Ahora pasemos a implementar el procesamiento de solicitudes:

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 43 44 45 46 47 48 49 50 51 52 53 54

//feedback.php requiere __DIR__. "/protected/bootstrap.php" ; if (! IS_POST() ) ( stopAndResponseMessage( "error", "¡El script solo acepta solicitudes POST!"); ) $nombre = _POST("nombre"); $correo electrónico = _POST("correo electrónico", falso); $mensaje = _POST("mensaje"); if (! $nombre || ! $correo electrónico || ! $mensaje ) ( stopAndResponseMessage( "error", "¡No se completaron todos los campos obligatorios!" ); ) // verifica el captcha y el token csrf if (! isEmail($correo electrónico) ) ) ( stopAndResponseMessage( "error", "¡La dirección de correo electrónico es incorrecta!"); ) if (mb_strlen ($message) _e($type), "message" => _e($message) ) ); salida ;

) Parpadea:: agregar (_e($tipo), _e($mensaje) ); stopAndRedirect("index.php"); )