Formulario de comentarios personalizables: ¿Cómo crear en línea? ¿Cómo hacer un hermoso formulario de comentarios pop -up html y php con un teléfono y enviar un pedido por e -mail?

Instrucciones para crear un formulario de retroalimentación en HTML y CSS, así como una colección de formularios y guía listos para conectarlos y configurarlos.

Hoy, cualquier persona que ni siquiera tenga habilidades de programación puede crear fácilmente su propio sitio descargando una plantilla preparada de la red e instalarla en el motor utilizado.

Sin embargo, no todas las plantillas preparadas para satisfacer los requisitos del usuario. Muchos de ellos están representados en forma de "queso" y no tienen secciones y funciones importantes como, por ejemplo, un formulario de retroalimentación.

Este bloque de sitio es extremadamente importante para los propietarios de tiendas en línea y grandes portales de información. En nuestro artículo, encontrará información sobre cómo crear independientemente un formulario de comentarios, dónde descargar una plantilla terminada y cómo instalarla en su sitio web.

Figura 1. ¿Qué es un formulario de retroalimentación y por qué es tan necesario?

¿Qué es un formulario de retroalimentación y por qué es tan necesario?

• Una de las funciones más importantes de cualquier sitio decente es el formulario de retroalimentación. Sirve para la interacción entre el visitante y la administración de recursos. Entonces, con su ayuda, puede escribir una apelación al soporte técnico o enviar los datos necesarios a las administraciones. Por ejemplo, los detalles de pago en las tiendas en línea o el nombre de los bienes ordenados. Se recomienda encarecidamente tener tal forma en su portal, ya que constante contacto con sus visitantes y clientes es la clave para su desarrollo exitoso.

El formulario de retroalimentación es una página o bloque separado (departamento), que consta de varios campos de la entrada de texto y el botón "Enviar". Como regla general, la forma estándar tiene los siguientes campos:

• Nombre completo
• Correo electrónico (dirección de correo electrónico)
• Número de teléfono móvil
• Las direcciones de su sitio
• Campo para ingresar un mensaje de texto

Sin embargo, los campos pueden ser tanto como quieras, y se pueden firmar como quieras. Todo depende de sus necesidades e imaginación.

Figura 2. ¿Qué es un formulario de retroalimentación y por qué es tan necesario?

• Además, algunos propietarios agregan tarjetas de Google o Yandex al formulario de comentarios, formularios de ingresar al sitio utilizando las redes sociales "Vkontakte", "Facebook", "Google+", etc. Pero hablaremos sobre la creación de la forma más simple de comentarios, para la cual necesitará un conocimiento exclusivo de los conceptos básicos del idioma de marcado Html y nada más.

¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

Para no convertir el artículo en un libro de texto aburrido completo, procederemos del hecho de que ya está familiarizado con los conceptos básicos del idioma de marcado Html Y tienes una idea general de cómo funciona. Si no tiene tales habilidades, antes de asumir la creación de un formulario, se recomienda apretar un poco su conocimiento en un recurso gratuito htmlbook.ru. De lo contrario, no solo puede abandonar esta empresa, sino también estropear el código de su sitio.

Para recrear la forma de trabajo de retroalimentación, necesita tres elementos importantes, uno de los cuales es responsable de la marca y la estructura de la forma ( Html), el segundo para su diseño externo ( CSS), y el tercero para el procesamiento y transmisión de datos ( Php). Comencemos en orden:

Escribir un código HTML para comentarios

• Paso 1. Para indicar la forma en Html Se usa la etiqueta ‹Forma› ‹/Forma›. En el interior se establecerán tamaños, estilos y otras propiedades vitales de la forma. Al grabar la etiqueta en sí, necesita establecer una clase para indicar, lo que ayudará a instalar para el formulario CSS Estilos.

Figura 1. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 2. Además para crear el primer campo de nuestro formulario dentro de la etiqueta \u003cFormulario\u003e Necesitas escribir etiqueta de bloque \u003cPAG\u003eque es responsable de crear una nueva línea.

Figura 2. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 3. Etiqueta interior \u003cPAG\u003e Desde la nueva línea entramos en la siguiente etiqueta: ‹Etiqueta para \u003d" Nombre "›Nombre \u003c/Etiqueta\u003e. Es responsable de los nombres del campo futuro de forma.

Figura 3. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Etapa 4. En la nueva línea, todo está en la misma etiqueta \u003cPAG\u003e Prescribimos la etiqueta de crear un campo con los siguientes valores: ‹Tipo de entrada \u003d" Text »name \u003d" Name "PlaceHolder \u003d"Introduzca su nombre "Requerido \\\u003e. Parámetro " type \u003d "texto"" Establece el tipo de campo de texto y el parámetro " marcador de posición \u003d "Introduzca su nombre «» Establece el texto inicial en este mismo campo de texto. Parámetro " rEQUERIDO»Deja en claro al visitante del sitio que este campo es obligatorio para completar. Como resultado, debe obtener un formulario con un campo, como se muestra en la captura de pantalla a continuación.

Figura 4. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 5. Según el ejemplo anterior, agregue los campos restantes que necesita, cada vez que comienza desde la etiqueta \u003cPAG\u003e. Para instalar un campo con un mensaje de texto, use la etiqueta ‹Textarea name \u003d" Message "cols \u003d" 50 ″ filas \u003d "6 ″ requerida› ‹/TextAREA›. Opciones " cols" y " hilera»Son responsables del ancho y la altura del campo de texto. Puede establecer los parámetros que le gustan más. Debería obtener algo así que se muestra en la captura de pantalla a continuación.

Figura 5. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 6. Para protegerse de los bots, que están bastante en Internet hoy, cree otra línea con la etiqueta ‹Nombre de entrada \u003d" bezspama "type \u003d" text »style \u003d" Display: None "Value \u003d" " /›. Debido al parámetro " style \u003d "Display: Ninguno"»Este campo no será visible por los simples mortales, pero los bots se llenarán automáticamente. Por lo tanto, siempre puede distinguir a una persona viva del programa.

Figura 6. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 7. La etapa final de la marca será la creación del botón de envío. La etiqueta se usa para esto \u003cBotón\u003e. Crea un nuevo bloque \u003cPAG\u003e Y dentro de él, ingrese el código del botón con los siguientes parámetros: ‹Botón class \u003d" Subt "type \u003d" enviar "›enviar un mensaje \u003c/Botón\u003e. Un resultado similar debería resultar, como se muestra en la captura de pantalla.

Figura 7. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

Trabajando con estilos en cascada (CSS)

• Como ya ha notado en el proceso de marcado, resultó algo muy torcido, indescriptible y asqueroso. Para darle a la forma de retroalimentación una apariencia más o menos ordenada, un idioma Html No será suficiente. Para este propósito, tendrá que recurrir al uso de estilos CSS.
• En el caso de que aproveche el consejo para ajustar sus habilidades básicas en el recurso htmlbook.ru, luego establezca ciertos parámetros de diseño para todas las partes del formulario utilizando CSS No será difícil para ti. Si no tiene un deseo o tiempo para meterse con todo esto, le proporcionaremos un código hecho listo y le diremos cómo conectarlo.

Figura 8. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

Conectar estilos CSS a Html Puedes dos maneras:

• Copie el código de nuestra tabla en cascada a la parte inferior del archivo style.cssque está presente en el alojamiento del sitio
• Mueva nuestro archivo de estilos a su alojamiento y conéctelo

Archivo style.css Se conecta dentro de la etiqueta \u003cCabeza a cabeza\u003e Usando un script ‹Enlace rel \u003d" Stylesheet "Media \u003d" Screen "href \u003d" style.css "›. En el caso de que un archivo con estilos no se encuentre en la misma carpeta que el archivo HTML principal, debe especificar la ruta a él. En nuestro archivo con estilos, cada elemento tiene una designación. Si lo desea, puede cambiar los parámetros para usted, guiados solo por habilidades de programación básicas.

Conexión de archivo PHP y configurarlo

Como se mencionó anteriormente, el guión Php es responsable de la ejecución del formulario de retroalimentación. Sin embargo, para comprender más o menos el principio del trabajo del idioma Php, debe leer un gran volumen de literatura y gastar un número decente de horas para practicar. Por lo tanto, como en el caso de CSS, le proporcionaremos un archivo listo con un script PHP, que solo tendrá que adjuntar al documento con el formulario.

A diferencia del archivo style.css, se adjunta un archivo con un script PHP en las propiedades del formulario en sí. Comencemos en orden:

• Paso 1. Abra el código escrito anteriormente y busque una línea con una etiqueta de formulario abierta. Agregarle propiedades " action \u003d "Contact-form.php"" y " método \u003d "post"". Mira un ejemplo en la captura de pantalla.

Figura 9. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 2. Descargue nuestro archivo PHP y colóquelo en el alojamiento en la misma carpeta donde se encuentra el documento HTML. Por lo tanto, los archivos PHP y HTML interactuarán entre sí.

Figura 10. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 3. A continuación, debe configurar el script por usted mismo. Abra el archivo y establezca las variables, asignándoles los mismos nombres que en el script HTML. Si agregó campos adicionales al formulario, agrégalos en el script PHP exactamente como se muestra en la captura de pantalla.

Figura 11. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Etapa 4. A continuación, debe agregar dos variables más con la dirección de su correo electrónico y el tema de la carta que se mostrará en su cuadro. En una línea con una variable " $ Dirección"Indique el correo electrónico y en la línea" $ SUB»El tema de la carta se muestra en la captura de pantalla.

Figura 12. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 5. En una línea con una variable " $ ms»El formato de la carta que recibirá por correo está configurado. Puede reescribirlo sin cambios o editar su propio gusto.

Figura 13 ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

• Paso 6. Todas las demás líneas son responsables de enviar el mensaje y contienen la configuración de protección contra los bots, por lo que deben dejarse sin cambios. Como resultado, el código completo debería verse algo así que se muestra en la captura de pantalla a continuación.

Figura 14. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

Descargar archivos CSS y PHP para comentarios

Después de realizar todas las acciones en la salida, recibirá un formulario de retroalimentación tan simple

Figura 15. ¿Cómo crear el formulario de retroalimentación más simple para el sitio en HTML y PHP?

Una selección de hermosas formas de diseño de comentarios sobre HTML y CSS para diferentes fines

• Según las instrucciones anteriores, puede "dibujar" fácilmente el formulario de comentarios a su propio gusto. Sin embargo, si no tiene tiempo o desea crear un formulario desde cero, puede encontrar formularios de diseño hechos en Internet y tener habilidades básicas Html editarlos por usted mismo.

Figura 1. Una selección de hermosas formas de retroalimentación sobre HTML y CSS para diferentes fines

• Habiendo buscado un poco, encontramos una selección de 35 hermosas formas de retroalimentación de diseño pop -up, que se escriben en Html y CSS. Estas formas son adecuadas para motores como WordPress y JoomlaTienen una configuración simple y ligera del panel de control, y también son perfectos para sitios sin motor.

Descargue una selección de formas de retroalimentación de diseñadores para sitios

Video: Readpress Reframed Realleged Comentarios Comentarios