Cómo crear un formulario de comentarios emergente en WordPress. Ventana modal en jQuery con un formulario para enviar un correo electrónico
Saludos amigos. El tutorial de hoy ayudará a que su sitio de WordPress tenga un formulario de comentarios atractivo y funcional. Lo haremos usando el complemento Contact Form 7. En un momento, pasé mucho tiempo buscando un formulario de contacto normal y nunca encontré una alternativa digna a este complemento.
Funciones del complementoPermítanme recordarles una vez más que trabajaremos con un complemento, por lo que si necesita comentarios sin un complemento, será mejor que visite el artículo sobre, la configuración es un poco más complicada, pero la opción es más universal (adecuada para cada sitio) y pone menos carga en los servidores.
La principal ventaja del formulario de contacto en Contact Form 7 es su facilidad de personalización, funcionalidad casi ilimitada y ajuste automático del diseño a cualquier plantilla de WordPress. Con su ayuda, puede crear no solo un formulario para enviar mensajes desde el sitio. El complemento se puede utilizar para crear un botón de pedido, una devolución de llamada o un cuestionario complejo con casillas de verificación y listas desplegables. También es posible adjuntar archivos para su transferencia.
En una palabra, el complemento es megafuncional.
Si todavía le preocupa la pregunta “¿hacer o no hacer un formulario de contacto?” (puede arreglárselas simplemente colocando la información de contacto en las páginas necesarias), luego diré inequívocamente: vale la pena hacerlo.
En primer lugar, enviar un mensaje directamente desde el sitio es más conveniente que abrir un programa de correo electrónico y completar todo manualmente. Ahorrar tiempo no le hará daño a nadie.
En segundo lugar, el formulario de contacto se puede personalizar y esto le permitirá recibir cartas en un formato estándar; será más fácil navegar por ellas. Por ejemplo, puede establecer un encabezado estándar para un mensaje "Pedido" y todos los correos electrónicos de la página de pedidos llegarán con este encabezado.
En tercer lugar, utilizar un formulario de contacto le permite ocultar su dirección de correo electrónico y, por tanto, deshacerse del posible spam que inevitablemente aparece cuando su casilla de correo electrónico está disponible públicamente.
En cuarto lugar, es sencillamente elegante y moderno.
Instalación y configuración del complemento Formulario de contacto 7El complemento se encuentra en la base de datos general de WordPress, por lo que no es necesario buscar sus archivos en ningún lugar, descargarlos usted mismo y luego cargarlos en su alojamiento. Todo se ha simplificado: a través del administrador de WordPress, ingrese a la sección de complementos, escriba "Formulario de contacto 7" en el campo de búsqueda e instálelo. Si nunca ha instalado complementos, aquí encontrará instrucciones detalladas sobre cómo instalarlos.
La configuración del complemento consta de dos etapas.
La primera es la creación de un formulario específico. Puede haber muchos formularios diferentes, cada uno de ellos puede contener su propio conjunto de campos. En una palabra, para cada tarea y cada página del sitio, puede crear un formulario de comentarios por separado, Wordpress lo permite: su lista se almacenará en la base de datos del complemento.
La segunda etapa es insertar el formulario en las páginas del sitio. Cada formulario que creemos dentro del complemento tendrá su propio código corto único. Para insertarlo en la página, solo necesita insertarlo.
Entonces, vámonos.
Para comenzar, en el menú izquierdo del panel de administración encontramos la pestaña Formulario de contacto 7. Aparecerá un menú con dos elementos debajo: "Formularios" y "Agregar nuevo".
Todavía no tenemos ningún formulario listo para usar, así que vayamos a la sección "Agregar nuevo". Se abrirá una página que le pedirá que seleccione un idioma y el idioma predeterminado también aparecerá allí. Simplemente haga clic en el botón azul "Agregar nuevo".
La configuración del formulario se divide en bloques separados. Los consideraré en orden.
Bloquear “Nombre del formulario”El primer bloque es responsable del nombre de su formulario: coloque el cursor en la inscripción "Sin título" e ingrese el nombre que necesita. Este nombre sólo se le mostrará en la lista de formularios de contacto del complemento, así que déjelo claro para no confundirse en el futuro con toda la diversidad.
Inicialmente, este bloque contiene una configuración de campo estándar. Contiene el nombre del remitente de la carta, su dirección de correo electrónico, el asunto de la carta, el contenido de la carta y el botón de enviar.
Los campos obligatorios están marcados con asteriscos. Si este campo se deja vacío, el mensaje no se enviará.
La ubicación de los campos se puede personalizar utilizando el marcado HTML normal.
En cuanto a la configuración de los campos, puede eliminar los innecesarios y agregar los que necesite. Si no desea que el asunto de la carta se ingrese manualmente, simplemente elimine el bloque correspondiente.
Agregar campos también es muy fácil. En el lado derecho hay un botón para generar una etiqueta, al hacer clic en él verá una lista de todos los campos posibles que admite este complemento.
Seleccione el elemento deseado y configure sus ajustes. El complemento está en ruso, por lo que todas las configuraciones son intuitivas.
La primera casilla de verificación indica si el campo es obligatorio u opcional (agrega un asterisco).
Después de configurar el campo, tendrás 2 códigos cortos:
- “Copia este código y pégalo en la plantilla de formulario de la izquierda” – este código se inserta en el código del formulario de la misma manera que todos los demás;
- “Y pegue el siguiente código en la plantilla de carta a continuación”; necesitaremos este código para formatear la carta en el siguiente bloque.
De esta manera puede agregar al formulario cualquier cantidad de campos, casillas de verificación, listas desplegables, elementos para adjuntar archivos, etc.
Bloquear "Carta"Ahora nuestra tarea es personalizar la carta que recibiremos. La carta no afecta de ninguna manera la funcionalidad del formulario de comentarios; solo sirve para transmitir la información ingresada en el formulario.
Nuestra tarea es incluir toda la información en la carta.
El primer paso es indicar la dirección de correo electrónico a la que se enviará el mensaje (puede ser cualquier cosa).
El segundo elemento indica la dirección de correo electrónico desde la que se le enviará la carta. No cambiaría nada aquí, el valor predeterminado es la bandeja de entrada de tu blog y se le agrega una etiqueta con el nombre de la persona que envía el mensaje.
A continuación indicamos el asunto de la carta. Como norma, el asunto se toma del campo que se rellena en el formulario. Pero puedes eliminar este elemento del formulario e ingresar un tema específico en el campo, que se establece automáticamente en cada letra. Hice esto para formularios de comentarios de páginas sobre servicios y publicidad. Los mensajes de allí siempre vienen con el mismo asunto "Solicitar servicios" o "Solicitar publicidad", de forma sencilla y clara.
El campo de encabezados adicionales contiene la etiqueta “Responder a:” para que cuando responda a una carta recibida de su blog, envíe el mensaje al blog y a la dirección que el remitente de la carta indicó en el campo del formulario. No es necesario cambiar este campo.
El campo "Plantilla de carta" es responsable del contenido interno del mensaje que recibió. De forma predeterminada, contiene información sobre el remitente, el asunto y el texto del mensaje ingresado en el campo.
Al final se indica el sitio desde donde se envió la carta.
Si agregó campos adicionales al formulario que no estaban instalados de forma predeterminada, no olvide agregar la etiqueta correspondiente en la plantilla de carta. Se le proporcionó en el bloque "Plantilla de formulario", donde generó la etiqueta correspondiente (el campo "Y pegue el siguiente código en la plantilla de correo electrónico a continuación").
Cualquier información de texto en este bloque (excepto las etiquetas) se puede cambiar a su gusto. También puede agregar descripciones e intercambiar etiquetas, organizándolas en el orden que más le convenga.
Bloquear “Letra 2”Si desea que otra persona reciba el mensaje que le enviaron, puede marcar esta casilla.
Este bloque se configura de forma similar al anterior. De forma predeterminada, todos los campos que contiene se completan para que la carta llegue a la persona que completó el formulario (aparentemente para que no lo olvide).
Puede configurar una copia para enviarla, por ejemplo, a su gerente o contador.
Bloquear “Notificaciones al enviar un formulario”En este bloque puede configurar los mensajes que ve el usuario después de hacer clic en el botón enviar mensaje. Si quieres cambiar algo por favor, lo dejé todo como está.
Activación de formularioDespués de haber completado todos los campos, regrese al principio al bloque "Nombre del formulario" y haga clic en el botón "guardar" ubicado a la derecha.
El complemento colocará el formulario que creó en la lista de activos y le asignará un código especial similar a este:
[ contacto - formulario - 7 id = "5464" title = "Verificación" ] !} |
Al insertar este código en cualquier lugar de su sitio web, obtendrá un formulario listo para comunicarse con sus clientes potenciales.
Antispam – Akismet y CaptchaLos spammers causan muchos problemas a los propietarios de sitios web, y cada nuevo formulario que le permite escribir algo solo aumenta la cantidad de robots de spam.
Si deja el complemento del formulario de contacto en su versión básica, después de un tiempo será bombardeado con muchos mensajes vacíos y sin sentido.
Hay dos formas de deshacerse de los spammers:
La primera opción es inconveniente porque obliga a los visitantes a ingresar caracteres adicionales manualmente. No es tan difícil, pero a algunas personas no les gusta.
Usar el complemento Akismet es más conveniente porque analiza de forma independiente los datos ingresados (nombres, direcciones de correo electrónico, enlaces) y, basándose en la base de datos acumulada, saca conclusiones sobre si el mensaje es spam o no.
Además, akismet se instala en la mayoría de los sitios de WordPress para proteger contra el spam en los comentarios de los artículos. Esto significa que al usarlo no necesitará instalar complementos adicionales ni crear una carga innecesaria en el sitio.
Protección contra spam con Akismet1. Instale el complemento Akismet en su sitio y actívelo - .
2. Agregue datos adicionales a las etiquetas del formulario de contacto:
- en el campo con el nombre del autor agregue akismet:autor
- en el campo con el remitente del correo electrónico de la carta akismet:author_email
- en el campo de la dirección del sitio akismet:author_url
Debería verse así:
Una vez guardado, el formulario de contacto debería bloquear todos los mensajes enviados por spammers. Puede comprobar el funcionamiento del filtro utilizando el nombre de prueba especial “viagra-test-123? – al ingresarlo, debería aparecer un mensaje de error.
Para que la verificación sea menos estricta, puede marcar solo algunos de los campos, por ejemplo, nombre y correo electrónico, y dejar la dirección del sitio web sin marcar. Esto aumentará la probabilidad de que lleguen mensajes de spam, pero será menos probable que pierda los mensajes que necesita.
Protección contra spam con CAPTCHA realmente simpleSi descubre que Akismet no le conviene (deja pasar mucho spam o bloquea los mensajes necesarios), puede habilitar un captcha. Para hacer esto, instale el complemento CAPTCHA Really Simple.
Abra el formulario de contacto deseado para editarlo
Seleccione Captcha de la lista de etiquetas. En la configuración de etiquetas, puede seleccionar el tamaño de la imagen con símbolos; de lo contrario, no es necesario cambiar nada. En la parte inferior de la ventana de configuración, aparecerán 2 etiquetas, una es responsable de mostrar la imagen y la segunda muestra un campo para ingresar datos de esta imagen.
Para que el captcha comience a funcionar, debe copiar y pegar ambas etiquetas en la ventana izquierda de la plantilla del formulario y luego guardar los cambios.
Colocar un formulario de comentarios en una ventana emergenteEl formulario de contacto no siempre tiene que estar ubicado en una sección específica del sitio; a veces, el cliente debería poder acceder a él desde todas las páginas del recurso.
En tales casos, no siempre es conveniente publicar un formulario completo. Es mucho más fácil colocar un botón en un lugar destacado y que llame la atención. Al hacer clic en este botón ya debería abrirse el formulario.
Así, una persona podrá enviar mensajes desde el sitio sin salir de la página que necesita.
Esto se hace usando otro complemento: Easy FancyBox.
1. Instale el complemento
En primer lugar, instalamos el complemento en sí; está en la base de datos general de complementos, por lo que todo lo que necesita hacer es ingresar su nombre en el panel de administración de su blog en la búsqueda de complementos. Después de instalar el complemento, aparecerá una pestaña de "archivos multimedia" en la sección "configuración".
En esta pestaña, debe encontrar una lista de tipos de contenido que deben mostrarse en la ventana emergente. De forma predeterminada, solo hay imágenes, debe agregar contenido en línea.
Ahora que la configuración del complemento está completa, pasemos a configurar el botón de comentarios.
2. Pegue el código en el sitio.En principio, puedes utilizar un enlace de texto normal, pero un botón de imagen se verá mejor.
En su sitio, donde desee mostrar un botón para el formulario de contacto (en el encabezado, pie de página o barra lateral), inserte el siguiente código:
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "formulario de contacto" alt = "formulario de contacto" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contacto - formulario - 7 id = "tu id de formulario" title = "nombre de tu formulario" ] !} < / div > < / div > |
En el código, debe indicar la dirección de la imagen que usa como botón de comentarios y editar el código corto del formulario en sí: ingrese su identificación y título.
3. Elimina la restricción de códigos cortos en la barra lateral.Este elemento es necesario si desea instalar un botón en la barra lateral. La barra lateral de WordPress no siempre permite códigos cortos.
Para habilitar esta función, debe abrir el archivo function.php para editarlo (directamente desde el área de administración de WordPress) e insertar el siguiente código antes del corchete de cierre “?>”:
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text", "do_shortcode"); |
Le dará la posibilidad de ejecutar todos los códigos cortos en la barra lateral.
Terminé con este bonito formulario emergente:
A veces es necesario colocar varios formularios en un sitio web con diferentes configuraciones y campos.
Por ejemplo, un botón conduce a un formulario con un nombre y número de teléfono y se usa para solicitar una devolución de llamada desde el sitio, y el segundo debería abrir otro formulario donde hay una solicitud de pedido detallada (con una dirección, un campo de descripción, la posibilidad de adjuntar un archivo, etc.). En el complemento Contact Form 7, puede crear un número infinito de opciones de formulario, pero ¿cómo puede colocarlas en diferentes botones en la misma página?
Para hacer esto, necesita ajustar el código del botón del párrafo anterior. El primer botón utiliza la opción presentada arriba. En el segundo cambian dos valores.
¡Hola, queridos lectores del blog!
En casi cualquier sitio web existen formularios de “captura”, como formularios de contacto o comentarios y formularios para solicitar bienes o servicios. Los formularios se utilizan especialmente en sitios web de una sola página (páginas de destino) y son necesarios para la interacción y comunicación con el visitante. Por regla general, estas formas funcionan bastante bien en términos de conversión, como se ha demostrado a lo largo de los años. Sin embargo, además de los formularios que se encuentran en formato abierto, en algunos casos se utilizan formularios emergentes. Son muy convenientes, no ocupan mucho espacio porque aparecen cuando haces clic en un botón y tampoco redirigen a los visitantes a otras páginas. Resulta que el sitio, incluso dentro de una sola página, realiza todas las funciones necesarias para comunicarse con el visitante.
Se trata de crear formularios emergentes del que hablaremos. Le diré cómo hacer esto en sitios donde el formulario está en html o creado usando el complemento Contact Form 7 en WordPress.
Crea un formulario emergente en html.
Veamos el ejemplo de un formulario de devolución de llamada. A continuación se muestra un ejemplo de un formulario que se abrirá al hacer clic en el botón "Solicitar una llamada" o "¿Quieres que te devuelva la llamada?".
Llamar de vuelta
Para abrir un formulario primero debes ocultarlo, esto lo hacemos especificando en el div que incluye el formulario, style="display: none;" , por lo que el formulario está oculto. También es necesario especificar una identificación significativa para este div, ya que en nuestro caso estamos usando un formulario de devolución de llamada, lo llamamos devolución de llamada.
Cree un formulario emergente en WordPress (Formulario de contacto 7).
Cabe señalar de inmediato que si creó formularios en el sitio sin la ayuda del complemento Contact Form 7, la opción descrita anteriormente le conviene.
Entonces, necesitamos 2 complementos: Contact Form 7 y Easy FancyBox, el primero para crear formularios, el segundo para abrir el formulario e instalarlos. Si el formulario que necesita aún no se ha creado, créelo.
Sólo necesitamos su shortcode, que se parece a esto:
Ahora, si desea que el formulario sea de un extremo a otro, agregue este código al pie de página:
Naturalmente, instale su propio shortcode, se puede encontrar haciendo clic en Formulario de contacto 7 en el menú de la izquierda, se abrirá una página con una lista de formularios ya creados.
Y si necesita un formulario para una página específica, pegue el código a través del panel de administración de la página (puede colocar el código en un widget), pero no en el editor visual.
[Tu código corto]
También instale su shortcode.
Ahora necesitamos configurar el complemento Easy FancyBox. Para hacer esto, vaya a su configuración. En el menú de la izquierda, abra "Configuración" y haga clic en "Archivos multimedia" (que no debe confundirse con la pestaña del menú justo arriba, que también se llama "Archivos multimedia"). Si ya tiene un complemento para fotos emergentes instalado en su sitio, desmarque Imágenes y marque Contenido en línea. Luego guarde los cambios. 
Todo lo que queda es crear un botón que, al hacer clic, abrirá el formulario. Se puede colocar en cualquier lugar, en el encabezado, pie de página, se puede adjuntar a uno de los lados del navegador, también puedes colocar el botón en cualquier artículo o página. Pega este código donde te gustaría ver el botón:
Escríbenos
Puedes decorar el botón y la forma como quieras, dándole cualquier estilo.
Y eso es todo. Si te gustó el artículo, cuéntaselo a tus amigos y colegas, dale me gusta y suscríbete al grupo (en la barra lateral izquierda), y para ello escribiré artículos aún más interesantes para ti.
Debido a numerosas solicitudes de los usuarios, encontramos una solución privada para la implementación que aparece al hacer clic en un botón (por ejemplo, "Solicitar una llamada").
Para agregar un formulario emergente a su página de destino:
1. Inicie sesión en el editor de la página donde se debe incrustar el formulario.
2. Para resolver el conflicto de la biblioteca jQuery, copie el código publicado y péguelo a través de la herramienta Scripts, estableciendo la posición en "Después de la etiqueta:
3. Usando la herramienta Botón, cree un botón:
Este botón se mostrará en la página de destino, por lo que el texto que contiene debe corresponder a la acción objetivo que seguirá al hacer clic (por ejemplo, "¡Solicitar una llamada!"). En la línea URL, puede especificar cualquier enlace (por ejemplo, al sitio principal), ya que solo es necesario crear un botón.
4. Usando la herramienta Forma, cree una forma:
El formulario aparecerá después de hacer clic en el botón; el nombre de las etiquetas debe corresponder a la acción objetivo (por ejemplo, "Nombre" y "Teléfono" para el botón "¡Solicitar una llamada!").
7. Encuentra las líneas en el código:
En estos, deberá cambiar el valor de ID de cada elemento en consecuencia.
8.1 En el ID número 1 de la captura de pantalla, debe ingresar el ID del formulario. Para hacer esto, haga clic una vez en los campos del formulario, vaya a la pestaña "Avanzado" del menú "Propiedades" a la derecha y copie el "ID de anclaje":
8.2 En la línea 2 de la captura de pantalla, debe ingresar el ID del botón asociado con el formulario.
8.3 En la línea 3 de la captura de pantalla: la ID del botón que se mostrará en la página.
Eso es todo. El formulario emergente está listo.
Si lo deseas, puedes cambiar la apariencia.
Hola. En esta lección, crearemos un formulario de comentarios completo y aparecerá en una ventana modal cuando haga clic en un botón de la página. Hice esta lección yo mismo, desde cero, usando solo el marco jQuery y un pequeño JavaScript. La lección es muy interesante, así que no la pase por alto. A continuación puede ver una demostración del formulario que creé, así como descargarla. los archivos necesarios para el trabajo:
Paso 1. Descripción general y funcionamiento del formulario de comentarios:
Primero, te diré qué archivos necesitaremos y, de hecho, por qué son necesarios:
- imágenes: la carpeta donde se almacenan todas las imágenes de nuestro formulario;
- index.html: el archivo "índice" principal en el que se ubicará el botón para abrir el formulario de comentarios;
- contact.html es el archivo que contiene el formulario en sí. Este archivo se incluirá en la ventana modal;
- send.php: un archivo controlador responsable de enviar cartas;
- jquery.js: el marco principal de jQuery;
- style.css es un archivo con hojas de estilo en cascada para nuestro formulario.
Entonces, sigamos adelante y en orden... El formulario funcionará de la siguiente manera: el usuario va a la página en la que hay un botón para llamar a la ventana modal, lo presiona y luego aparece el formulario en el que el visitante ingresa todos los datos y el texto del mensaje y lo envía, luego se redirige a una página con un mensaje sobre el envío exitoso o fallido de la carta. Eso es todo, ahora comencemos a diseñar nuestro formulario...
Paso 2. Botón para llamar al formulario.
Entonces, para que aparezca nuestra ventana modal con el formulario, debemos forzarla de alguna manera a que haga esto. Para hacer esto, solo necesitamos colocar un botón normal en la página. El código para dicho botón se muestra a continuación, junto con los estilos que se le aplican:
Escribir un mensaje al administrador
Paso 3. El formulario en sí + su configuración
Ahora averigüemos dónde se ubicará nuestro formulario de comentarios. Y estará ubicado en el archivo contact.html, que ya se encuentra en el código fuente de la lección. Este formulario es bastante pequeño, así que colocaré su código a continuación:
Envío de un mensaje a la administración:
Como puedes ver, revisando el código, incluso a simple vista puedes ver que para mostrar mejor el formulario, utilicé un diseño de tabla. Esto me resultó muy útil para ecualizar todos los campos del formulario.
Paso 4. Procesador responsable del envío de cartas.
Aquí les contaré rápidamente sobre el procesador principal para enviar cartas. No daré su código aquí porque está en el código fuente. Descargue y vea su contenido. Si conoce PHP en algún lugar a un nivel intermedio, como yo, entonces puede analizar fácilmente el código completo de este controlador usted mismo. Si todo está listo, entonces sigue adelante...
Paso 5. "Atornillar" el marco principal de jQuery
Ahora, como en cualquier lección de jQuery, debemos “ajustar” el marco principal de jQuery. Para ello retrocedamos un poco, hasta donde se encuentra nuestro botón, y entre las etiquetas e insertemos el siguiente código:
Paso 6: diseñar el formulario
Como puede ver, los estilos de nuestro formulario se colocan por separado en el archivo style.css, ya que estos estilos ocupan demasiado espacio. Sólo necesitamos vincular el siguiente código a nuestro archivo de índice:
Paso 7. Mejoras de jQuery
Ahora para que la ventana modal del formulario funcione completamente, debemos insertar el siguiente código jQuery:
$(función() ( $("a").overlay(función() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href"));
Conclusión.
Nuestro interesante formulario de comentarios está listo. El camino fue largo y difícil, así que si alguien no entendió nada, escucharé sus preguntas en los comentarios de esta lección. Y eso es todo para mí, ¡nos vemos de nuevo amigos!
Con sincero respeto, su guía jQuery - M.K.
Saludos a mis lectores, he adquirido experiencia y les contaré sobre los principios de funcionamiento del formulario de comentarios de PHP. Te lo mostraré con ejemplos claros para que entiendas cómo funciona todo y cómo se produce la interacción entre el propio formulario de entrada (sus campos de entrada) y el archivo manejador 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 mi propio formulario de comentarios en PHP y, para ser honesto, requirió mucha mano de obra, 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 el ejemplo de una página de destino, por cierto, hay un artículo aparte sobre. Puede ver cómo funciona 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, lo que 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)
Echemos un vistazo a cómo funciona uno de los botones, que muestra una ventana emergente modal que contiene un formulario de comentarios. Este código fuente determinado es algo que puede insertar en la página más de una y dos veces y funcionará. Tendrá que personalizarlo usted mismo para adaptarlo a su 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 su 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 
Permítame recordarle una vez más que su alojamiento debe admitir el procesamiento de archivos PHP; de lo contrario, nuestro procesador 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.
