Formularios sin PHP

Hoy trabajaremos en la creación de un hermoso formulario de comentarios HTML para el sitio, que se ejecutará en PHP y tendrá protección contra spam incorporada. No necesitas ningún conocimiento especial; los conceptos básicos de HTML y lógica básica serán suficientes. Le proporcionaré archivos listos para usar que puede insertar en el sitio sin cambios o ajustarlos a sus necesidades.

Recientemente escribí un artículo sobre cómo crear uno usando el complemento Contact Form 7. También puedes crear fácilmente un formulario de comentarios en Joomla y otros CMS populares.

Pero, ¿qué deberían hacer los sitios que no utilizan CMS populares? – Sólo queda hacer todo a mano.

Además, también es posible utilizar comentarios sin complementos para WordPress. Los complementos innecesarios crean una carga significativa en los servidores y eliminarlos le permite acelerar el sitio.

Puede solicitar la instalación y configuración del formulario terminado por 500 rublos aquí (esto es para aquellos que son demasiado vagos para trabajar con las manos o no tienen habilidades suficientes).

Cómo funciona el formulario de comentarios HTML

Nuestro formulario tendrá 5 campos para ingresar datos: nombre, dirección de correo electrónico, número de teléfono, dirección del sitio web, texto del mensaje (puede eliminarlos o cambiarlos usted mismo).

Todos los campos excepto la dirección del sitio web serán obligatorios (también puedes configurarlo tú mismo).

Para los campos con dirección de correo electrónico y sitio web, se realizará una verificación obligatoria de la exactitud de la entrada de datos.

La forma final de comunicación se verá así:

Un formulario de contacto creado en html requiere 3 elementos para funcionar.

El primero es responsable de la estructura del formulario en sí, el tipo y número de campos de entrada de datos. Este es un código html normal.

El segundo se encarga de procesar los datos que el usuario ingresa en los campos del formulario. Determina qué, dónde y en qué forma enviar después de presionar el botón de enviar. Se utiliza un script PHP especial para la implementación.

El tercero es responsable de la apariencia. Establece el tamaño y la ubicación de los campos de entrada de datos, agrega varios colores y efectos. Todo esto está configurado por estilos CSS.

Versión de demostración del formulario

Lo guiaremos paso a paso a través de la configuración de cada uno de estos elementos.

Crear un diseño HTML

Para no alargar demasiado el artículo y no añadir cada elemento por separado, proporcionaré el código html completo, y a continuación describiré cada bloque y sus posibles cambios.

La etiqueta se utiliza para designar formularios en HTML.

, dentro del cual se completan los parámetros necesarios.

Formato correcto" [correo electrónico protegido]"

El formato correcto es "+7-123-4567890"

El formato correcto es "http://someaddress.com"

"Ingresa tu nombre" requerido />

"Ingrese su dirección de correo electrónico" requerido />

"Ingrese el número de teléfono" requerido />

El formato correcto es "+7-123-4567890"

"Ingrese la dirección de su sitio web" patrón = "(http|https)://.+" />

El formato correcto es "http://someaddress.com"

Comencemos con la primera línea.

clase="formulario_contacto"– especifique la clase para establecer estilos CSS en el futuro.

acción = "formulario-contacto.php"– indicar el nombre del archivo con el script que procesará los datos del formulario y enviará el mensaje. Si el archivo está en la misma carpeta que la página con el formulario, entonces basta con indicar solo el nombre del archivo; si está en una carpeta diferente, deberá indicar la ruta al archivo.

Luego vienen 4 cuadras

Responsable de mostrar los campos para la entrada de datos, los nombres dejan claro quién es responsable de qué. Los campos en sí se muestran mediante etiquetas. , dentro del cual se establecen las siguientes características:

Tipo– es responsable del tipo de datos ingresados, texto – texto sin formato, correo electrónico – dirección de correo electrónico, dichos campos se verifican automáticamente para verificar su exactitud (@ debe estar presente), tel – número de teléfono, url – dirección del sitio web.

Nombre– el nombre propio del elemento en sí, es necesario para que el script sepa utilizar los datos de cada campo. Si crea varios campos del mismo tipo, deberá asignar a cada campo su propio nombre.

Marcador de posición– esta es una información sobre herramientas ubicada dentro del campo, texto que reemplaza el campo vacío del elemento. Se puede cambiar o eliminar; no afecta el funcionamiento del formulario.

Requerido– este parámetro indica que el campo es obligatorio. Puedes decidir por ti mismo qué elementos son necesarios y cuáles no.

patrón =”(http|https)://.+”– esta construcción sirve para comprobar la exactitud del campo del sitio web, indicando que la dirección debe contener http://texto o https://texto, de lo contrario habrá un error.

Algunos campos tienen información sobre herramientas que aparece cuando selecciona un elemento. ella esta herida , donde form_hint es la clase del elemento (sus propiedades están escritas en CSS). Puede configurar cualquier texto en la información sobre herramientas para cada campo del formulario de contacto. Si no necesita dicha función, simplemente elimine la etiqueta completa.

Los campos para ingresar el mensaje en sí están marcados con la etiqueta