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.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
Protección contra spam– campo invisible llamado nombre=bezspama. Tiene el estilo display:none: esto significa que el campo es invisible para las personas, pero los robots lo completarán automáticamente.
Y el elemento final de cualquier formulario es el botón enviar mensaje, está especificado por la etiqueta , que tiene su propia clase para personalizar la apariencia y el tipo de "envío".
Para agregar o eliminar campos, simplemente elimine los innecesarios o inserte otros nuevos por analogía con los existentes, especificando todas las propiedades y nombres para ellos.
Decorar con estilos CSS
Si miras el resultado en un navegador, verás algo torpe y poco atractivo. Para que tengamos un formulario de comentarios atractivo, tendremos que trabajar en sus estilos (html no será suficiente).
Si conoce CSS, podrá configurar el diseño para todos los elementos del formulario sin ningún problema, ni siquiera necesita mi ayuda.
Si no está familiarizado con los estilos, simplemente le daré un archivo ya preparado en el que todo está escrito de tal manera que su formulario será idéntico al del ejemplo.
Puede conectar estilos de dos maneras:
- Copie el contenido del archivo en el archivo style.css que ya está en su sitio (agregue al final)
- Coloca el archivo que te di en tu hosting y conéctalo.
Los archivos de estilo están conectados usando el siguiente código. , colocado dentro
. Si el archivo con estilos (styles.css) no se encuentra en la misma carpeta que la página html, escriba la ruta completa.En el archivo de estilo que le proporcioné, cada elemento está etiquetado, por lo que puede realizar cualquier cambio: cambiar colores, tamaños, formas y efectos. Teniendo los conocimientos más básicos, podrás editarlo fácilmente.
Configuración de código PHP (protección antispam agregada)
Al igual que con los estilos, le proporcionaré un código listo para usar que procesa el formulario de comentarios HTML y lo protege contra el spam. Este archivo está personalizado para una configuración específica y si desea establecer nuevos campos o eliminar los existentes, deberá realizar cambios en él. Por eso, te contaré cómo funciona para que entiendas qué es necesario cambiar.
Para los sitios que utilizan la codificación windows-1251 y la versión php 5.4+, deberá agregar una adición al código relacionado con la función htmlspecialchars. Lo mostraré a continuación. De lo contrario, aparecerán campos vacíos en lugar del alfabeto cirílico.
Recuerde, en las propiedades del formulario (en el archivo html) especificamos el parámetro action=”contact-form.php”. Debe crear un archivo llamado contact-form.php y colocar el siguiente código en él.
\r\n Responder a: $correo electrónico \r\n"; if (correo($dirección, $sub, $mes, $de)) ( encabezado("Actualizar: 5; URL=https://sitio") ; eco "
";) else ( encabezado("Actualizar: 5; URL=https://sitio"); echo "
";) ) exit; /* Salir sin mensaje si el campo bezspama está lleno de spam bots */ ?>
/* Establecer variables */ $nombre = htmlspecialchars($_POST["nombre"]); $correo electrónico = htmlspecialchars($_POST["correo electrónico"]); $tel = htmlspecialchars($_POST["tel"]); $sitio web = htmlspecialchars($_POST["sitio web"]); $mensaje = htmlspecialchars($_POST["mensaje"]); $bezspama = htmlspecialchars ($_POST [ "bezspama" ] ); /* Su dirección y asunto del mensaje */ $sub = "Mensaje del sitio XXX"; /* Formato de letra */ $mes = "Mensaje del sitio XXX.\n Nombre del remitente: $nombre Dirección de correo electrónico del remitente: $email Número de teléfono del remitente: $tel Sitio web del remitente: $sitio web Texto del mensaje: $mensaje" ; si (vacío ($bezspama) ) /* Campo de evaluación bezspama - debe estar vacío */ /* Enviar un mensaje usando la función mail() */ $de = "De: $nombre<$email>\r\n Responder a: $correo electrónico \r\n"; if (correo ($dirección, $sub, $mes, $de)) ( encabezamiento(); eco "
La carta ha sido enviada, en 5 segundos volverás a la página XXX " ; } demás( encabezado ( "Actualizar: 5; URL=https://sitio") ; eco "
El correo electrónico no fue enviado, en 5 segundos regresará a la página YYY " ; } salida ; /* Salir sin mensaje si el campo bezspama está lleno de robots de spam */ |
En primer lugar, debemos configurar las variables que serán procesadas por el código PHP. Para no confundirnos, les asignamos los mismos nombres que tenían en el formulario, solo que todas las variables comienzan con el signo $. El comando de asignación de valor en sí tiene este aspecto:
$título = htmlspecialchars($_POST["título"]);
$título=htmlspecialchars($_POST["título"]); |
Si agregó campos de datos adicionales, agregue sus nombres en el bloque de variables.
No tomamos todas las variables del formulario. Como mínimo, la dirección de correo electrónico a la que se enviará la carta (su dirección) se indica por separado. En este caso, esta es la variable $address: ingrese su dirección de correo electrónico en su valor.
Además, en este ejemplo, el valor de la variable $sub se establece explícitamente: mostrará el asunto de la carta. Puede agregar el asunto del mensaje al formulario HTML como un campo de texto (como el nombre) y tomar el valor de esta variable desde allí.
En el bloque de formato de carta configuras el mensaje que recibirás. Puede diferir de lo que se escribió en el campo del área de texto llamado mensaje. Simplemente creé otra variable $mes e incluí texto adicional y datos importantes del remitente (nombre, correo electrónico, teléfono, sitio web) en ella. Puedes configurar esta parte como desees.
Para garantizar que las cartas que recibe estén firmadas con el nombre del remitente e incluyan su dirección de remitente, y no la dirección del servidor en el que se encuentra su archivo php, configuramos una nueva variable $from, que incluye el nombre y correo electrónico del remitente de la carta.
Luego, la función de correo envía la carta de acuerdo con los parámetros especificados. Si se envía correctamente, aparece un mensaje indicando que la carta ha sido enviada y, después de 5 segundos, el usuario es redirigido a una página de su sitio web (puede cambiar la dirección de la página y el tiempo de demora). Si no se pudo enviar la carta, aparece un mensaje de que la carta no fue enviada y después de 5 segundos va a la página del sitio. De la misma manera, puede configurar la dirección y la hora de la página.
Insertar un formulario en una página web
Para insertar el formulario de comentarios que creó, debe copiar el código html del formulario y pegarlo en la parte del código de la página donde desea mostrar los comentarios del sitio.
Una vez más, me gustaría recordarles que si el archivo con el programa PHP no está en la misma carpeta que la página en la que se encuentra el código html, entonces en el código del formulario debe escribir la ruta completa. , de lo contrario no funcionará, ya que el formulario no encontrará el controlador de archivos.
Descargar archivos de formulario de contacto
Antispam activo con entrada de datos en el campo
Los spammers operan utilizando varias herramientas de software y algunos bots pueden eludir la protección de campo vacío integrada en la versión básica. Si empiezan a molestarte, puedes utilizar una protección simple o, además, ingresar datos en un campo especial. Por ejemplo, cree una expresión matemática pidiéndole que ingrese una respuesta o haga una pregunta sencilla. Esto no requerirá grandes cambios de forma.
Le mostraré cómo cambiar el código del formulario y el controlador PHP para usar este método antispam. Si lo desea, no puede cambiar la protección con un campo vacío, pero agregue las líneas correspondientes al código y tendrá 2 métodos funcionando simultáneamente; en teoría, debería ser más eficiente.
En primer lugar, debemos agregar un campo de entrada y una pregunta al código HTML. Ya tenemos como base la línea 25 (input name = “bezspama”). Este campo es invisible. Lo convertimos en ordinario. Para hacer esto, cambie toda la línea a este bloque:
Hoy en día, en cada sitio web se puede encontrar un formulario de comentarios, ya sea un sitio comercial o informativo. Desafortunadamente, la mayoría de los propietarios de sitios web hacen que los formularios sean incómodos de completar o los muestran de manera demasiado intrusiva, lo que arruina la impresión de la empresa en su conjunto. Averigüemos dónde y cómo solicitar correctamente los datos del usuario para facilitar la interacción con el sitio.
Principales tipos de formularios para el sitio.
Veamos las características de cada tipo para que puedas elegir las que se adaptan a tu sitio o usar la lista como lista de verificación para no olvidar colocarlas todas.
Formulario de pedido de devolución de llamada
Recomendamos que todos los sitios comerciales utilicen este formulario. La ubicación ideal es el encabezado del sitio, al lado del número de teléfono. Además, no debe mostrar los campos de entrada de inmediato; es mejor ocultarlos debajo del botón "Solicitar una llamada" y mostrarlos después del clic. No es necesario hacer que el botón brille; en forma de enlace será igualmente visible:
En la versión ampliada, dos campos “Teléfono” y “Nombre” son suficientes, y solo es necesario completar el primero:
Puedes dejar solo un campo para ingresar un número de teléfono, que también es una opción completamente funcional, aunque primero tendrás que preguntar a cada cliente su nombre al llamar:
Además, es útil un formulario de devolución de llamada en el pie de página del sitio; colóquelo junto a la información de contacto. De esta forma, después de ver la página, los clientes no tendrán que volver al principio.
Formulario de consulta
“Formulario de rescate” para aquellos usuarios de su sitio que no pudieron encontrar la información necesaria en la página, pero desean realizar un pedido. Es mejor colocarlo en una de dos opciones: contraído en la esquina inferior derecha de la pantalla o expandido, en la parte inferior de la página de inicio y en las páginas del catálogo de productos o servicios.
Primera opción de colocación (ejemplo del sitio web de Tango and Cash):
Segunda opción de colocación (ejemplo del sitio web de Okna-dpa):
Este formulario a menudo se reemplaza por un consultor en línea, que es básicamente lo mismo, pero debe comprender que necesitará un empleado que lo respalde.
Este formulario también debe colocarse en la página de contacto. Asegúrese de agregar un campo de comentarios para que los usuarios puedan decirle sobre qué problema se comunican con la empresa.
Formulario de comentarios en la página de contacto de YouDesign:
Formulario de pedido de servicio
Obviamente, el formulario debe colocarse en la página del servicio, preferiblemente al final de la página, después de una descripción del trabajo, resultados y precios, para indicar al usuario que complete una solicitud después de leer la información. Puede mostrar los campos del formulario inmediatamente, expandirlos después de hacer clic en un botón o redirigirlos a su cuenta personal a la página correspondiente.
A menudo, las páginas de servicio incluyen un formulario para solicitar una devolución de llamada o una consulta, lo cual no es del todo correcto. El cliente ya ha seleccionado una página de servicio, quizás incluso una tarifa, y se le muestra un formulario general sin información seleccionada. Es desorientador. Recomendamos especificar los siguientes campos:
- "Tipo de servicio" o "Tarifa": es mejor completar este campo automáticamente o colocarlo como texto al principio del formulario
- "Nombre"
- “Teléfono”: haga que este campo sea obligatorio
- “Correo electrónico” - para duplicar la información del pedido al cliente
- “Comentario” - quizás el cliente tenga aclaraciones
Cada negocio es individual y es posible que necesite parámetros adicionales, pero recomendamos no colocar más de 5-7 campos para no alienar al cliente. Si aún no puede evitar una gran cantidad de campos, agrúpelos visualmente por tema para reducir la cantidad de errores al ingresar información. Un ejemplo de un formulario de pedido sencillo en el sitio web de la empresa Stroya:
Formulario de pedido de producto
Es mejor mostrar este formulario al usuario en la página del carrito cuando haya decidido la elección de los productos. Si tiene una cuenta personal en su sitio web, deberá elaborar dos formularios: para usuarios autorizados y no autorizados.
Para nuevos clientes. No los obligues a registrarse para volver al pedido. Esto sólo los alejará. Todo lo que necesitas hacer es agregar algunos campos con información de contacto. Solicite nombre, número de teléfono, correo electrónico y dirección de entrega. De esta forma el usuario no tendrá que realizar acciones innecesarias y obtendrá un nuevo cliente. Por correo electrónico se puede realizar el registro automático y enviar al cliente una contraseña por correo electrónico.
Un ejemplo de cómo colocar campos en un formulario para nuevos usuarios en Ozon:
Para clientes antiguos. Quienes vuelven a realizar el pedido ya han proporcionado toda la información de contacto, por lo que, además de la lista de productos, el formulario solo debe contener opciones para seleccionar la entrega y el pago. Y si usa códigos promocionales, agregue un campo para ingresarlos, pero nada más. No es necesario volver a solicitar los contactos del cliente.
Un formulario de pedido de Wildberries, que incluso muestra la elección anterior de método de entrega y pago (pero deja la opción de cambiarlos):
Mucha gente divide la introducción de la dirección de entrega en varios campos, solicitando por separado el código postal, el nombre de la ciudad, el nombre de la calle, el número de la casa, etc., lo que parece muy engorroso. Antiejemplo del sitio web de Angorochka:
Los usuarios cometen errores incluso en estos formularios, por lo que es mejor dejar un campo para ingresar la dirección general y verificar la exactitud de los datos con los nuevos clientes por teléfono.
Los campos obligatorios para ingresar deben ser información de contacto, dirección de entrega, elección del método de entrega y pago. El formulario se puede mostrar por etapas, pero no está prohibido mostrar todos los campos a la vez. Lo principal es dividirlos visualmente en grupos semánticos.
Formulario de inscripción
Recomendamos separarlo del formulario de autorización, porque muchos clientes nuevos se confunden con el botón "Iniciar sesión". Dos enlaces uno al lado del otro no ocuparán mucho espacio y reducirán el tiempo de búsqueda. Además, el formulario siempre debe estar visible, por lo que es mejor colocarlo en el encabezado del sitio. La opción más común está en la esquina superior derecha a modo de enlace (ejemplo de Aqua-Viva):
En general, el formulario debe contener los mismos campos que el formulario de pedido (y los campos de entrada obligatorios son los mismos), por lo que le recomendamos no sobrecargarlo con elementos innecesarios y crear un campo común para la dirección. Recuerda que el registro es un paso adicional para el cliente, así que no lo postergues con una lista larga. Puede solicitar una fecha de nacimiento para enviar felicitaciones y descuentos, pero no es necesario obligar al cliente a inventar un apodo o indicar un número de teléfono o dirección adicional.
Es una gran práctica ofrecer a los clientes el registro a través de las redes sociales. De esta forma, el cliente no tendrá que inventar una contraseña y, en general, el registro será más rápido. Un ejemplo de uso de esta función en el sitio web de Asos:
Esta tienda en línea es extranjera, por lo que se muestran las redes sociales populares de esos países. Para la audiencia de habla rusa, es mejor eliminar Twitter y agregar botones de VKontakte, Odnoklassniki.
Una cuenta personal es la más adecuada para que las tiendas en línea almacenen información de contacto del cliente, historial de pedidos, información sobre descuentos y bonificaciones. También es adecuado para servicios de suscripción, por ejemplo, si proporciona acceso para ver películas en el original.
Al mismo tiempo, si vende productos industriales, cuando cada pedido va acompañado de una llamada de un especialista, entonces no tiene sentido ni un carrito de compras ni un formulario de registro. Los sitios web que brindan servicios, por ejemplo, diseño o renovación de apartamentos, a menudo tampoco necesitan una cuenta personal.
Formulario de autorización
La recuperación de contraseña se realiza más comúnmente por correo electrónico, enviando al cliente un enlace a un formulario para ingresar una nueva contraseña. La generación de una contraseña “temporal” automática obliga al usuario a buscar él mismo un formulario de cambio de contraseña, lo cual es inconveniente y sólo genera molestias innecesarias para el cliente. Es mejor no permitir que esto suceda.
Formulario de suscripción al boletín
Ya hemos escrito más de una vez sobre los beneficios del email marketing y dado consejos sobre su desarrollo, por ejemplo, este artículo y su segunda parte contienen la información más detallada. Por lo tanto, el formulario de suscripción es imprescindible si desea utilizar este canal de adquisición de clientes.
El formulario debe colocarse en la página de inicio para que el usuario pueda ver inmediatamente que existe esa oportunidad. Es mejor después de toda la información básica, al final de la página (ejemplo de Lavkalavka):
Si el sitio tiene un blog y en cartas, además de bienes y servicios, anuncia nuevos artículos, puede agregar un formulario en la página general de la sección, por ejemplo, a la derecha de los artículos, como Vkusnosti por Mado hizo:
El formulario de suscripción, por supuesto, necesita un campo "Correo electrónico", y también puedes solicitar un nombre para que los correos electrónicos sean más personalizados.
Ahora que hemos decidido qué formularios deben colocarse y en qué lugar del sitio, descubramos cómo hacerlos más cómodos de completar.
- Formularios en ventanas emergentes (modales). Deben mostrarse sólo después de que el usuario haga clic en el enlace o botón deseado. No hay "ventanas emergentes" al abrir la página de inicio o cuando los clientes intentan abandonar el sitio. Un consultor en línea tampoco debería "aparecer" y ofrecerse a iniciar un chat. Este tipo de cosas irritan y repelen a los usuarios. Antiejemplo de Delicat-Servis (los chicos ahora han solucionado este problema y el formulario se abre solo después de hacer clic):
- Usando animación. Resaltemos esto como un elemento separado, ya que es un problema común. El formulario no debe parpadear, saltar por la pantalla ni flotar en el centro de la pantalla para llamar la atención. Esta animación impide que el usuario estudie el contenido principal de la página y resulta molesta cuando la visualiza durante mucho tiempo. Haga que los botones de los formularios contrasten y el cliente definitivamente no los extrañará.
- Nombre del formulario. Firme siempre los formularios para que el usuario pueda ver lo que está completando. Es correcto cuando en el título está escrito el nombre de la tarifa o servicio, pero si el título es demasiado largo, entonces añade esta información en forma de texto a continuación, como hizo Fullhousedesign:
- Nombre de los campos del formulario. Lo mejor es colocar el nombre del campo encima e indicar un ejemplo de cómo rellenar el interior del campo. Si coloca el nombre dentro del campo, se borrará al completarlo, lo cual no es del todo conveniente. También es una mala opción cuando los títulos están a la izquierda y los márgenes a la derecha; los ojos tienen que correlacionar las columnas entre sí (un mal ejemplo de formulario en el sitio web de la Casa del Libro de Moscú):
Una opción conveniente para concertar firmas y propinas (en el sitio web Xarakiri.ru):
- Campos obligatorios. Marca siempre * campos obligatorios. Arriba, al describir los formularios, indicamos cuáles elegir. La excepción son los formularios con un campo, y está claro que es obligatorio. Un ejemplo de cómo resaltar los campos obligatorios de Izto:
- Errores en los formularios. Los usuarios suelen cometer errores y no se dan cuenta, por lo que recomendamos agregar comprobaciones de entrada para la información de contacto y los campos obligatorios. Es mejor mostrar los mensajes de error como texto junto al campo correspondiente. No deberían desaparecer ni superponerse a los campos de entrada. Puedes resaltar el campo con un marco rojo, pero el mensaje también debe estar presente. Ejemplo de mensajes de error claros de Aristo:
- Confirmación de envío de datos. Una vez que el cliente haya completado todos los campos y haya hecho clic en el botón enviar, debe mostrar un mensaje de confirmación destacado para que no intente completar el formulario nuevamente. Puede utilizar ventanas modales o, si el formulario ya está en una ventana emergente, colocar el texto apropiado debajo del botón enviar. El mensaje también debe indicar exactamente cuándo los especialistas se comunicarán con el cliente o qué debe hacer a continuación. Un simple “Gracias, datos enviados” no es suficiente. Un ejemplo de confirmación de envío detallada de la empresa Cable Systems:
- Usando captcha. No recomendamos el uso de controles robóticos en los formularios, ya que obliga a los usuarios a realizar acciones innecesarias e incluso puede provocar que abandonen el sitio. Utilice métodos de seguridad que sean invisibles para los usuarios, por ejemplo, realice un seguimiento del tiempo de llenado del formulario en el servidor (si es demasiado corto, entonces el formulario lo completa un robot), agregue campos ocultos (que solo un robot puede completar ), utilizar servicios antispam para verificación, etc. Como último recurso, puedes utilizar la validación de entrada de Google:
- Guardando datos. Quizás el cliente cerró accidentalmente el formulario, hubo un error o se reinició, y para no tener que volver a ingresar los datos, guárdelos antes de enviarlos. Este consejo se aplica especialmente a los formularios largos.
- Botón de reinicio. Nunca lo coloque al lado del botón de enviar para que el usuario no haga clic en él accidentalmente. Colóquelo en otra parte del formulario o retírelo por completo. Un ejemplo de mala ubicación de botones en el sitio web de Avarit:
- Ley de Datos Personales. Para evitar multas por recopilar datos personales de los clientes, es necesario preparar documentos reglamentarios y escribirlo en el sitio web.
Resultados
Cada forma debe abordarse individualmente, por lo que es imposible describir todos los casos en un artículo. El principio fundamental que se debe seguir es un mínimo de campos. Es mejor llamar al cliente y aclararle los detalles verbalmente que obligarlo a rellenar formularios largos. Quizás el cliente tenga alguna duda adicional, entonces con una llamada solucionarás dos problemas.
Esperamos que nuestras recomendaciones le ayuden a crear formularios convenientes en su sitio web y a recopilar más pedidos. Para aquellos que quieran un análisis personal de la usabilidad de los formularios, recomendamos utilizar este servicio.
PD Si necesita información sobre cómo crear formularios (el lado técnico del problema), necesita recomendaciones sobre código, constructores convenientes, etc., luego escriba preguntas en los comentarios, haremos un artículo separado sobre este tema.
Hemos publicado un nuevo libro, Marketing de contenidos en redes sociales: cómo entrar en la cabeza de sus seguidores y hacer que se enamoren de su marca.
Un formulario de comentarios en un sitio web es un mecanismo de comunicación entre un visitante de un recurso y sus administradores.
Más vídeos en nuestro canal - aprende marketing en internet con SEMANTICA
¿Por qué necesitas comentarios?
- Respuestas a las preguntas de los visitantes.
- Interrogatorio.
- Aceptar pedidos a través del sitio web.
- Aceptar solicitudes de devolución de llamadas.
Dos tipos de comunicación con el visitante
- Envío por correo electrónico. Después de completar los campos propuestos, el formulario se envía al correo electrónico del administrador del sitio. Toda comunicación posterior se produce mediante el intercambio de correos electrónicos o sin conexión (teléfono, etc.).
- Envío al sistema de gestión de contenidos. Después de completarla, el administrador del sitio ve la solicitud en la lista de datos completados en el CMS y puede procesarla allí. De esta forma se puede implementar, por ejemplo, un libro de visitas o un sistema de preguntas y respuestas. La compra de productos en una tienda online funciona de forma similar.
En el futuro, no consideraremos en detalle el trabajo de una tienda en línea, ya que este es un tema para un artículo separado, pero nos centraremos en la retroalimentación como uno de los tipos de comunicación con un visitante del sitio.
Para procesar las solicitudes de manera eficiente y rápida, se recomienda combinar ambos tipos de envío.
Cómo hacer un formulario de comentarios en el sitio web
El desarrollo requiere conocimientos de php, html y javascript. Hay varios constructores en CMS que le permiten crear un servicio de comentarios; también puede utilizar servicios en Internet. Pero aún así, es preferible el primer método. Como administrador del sitio, debes saber exactamente qué mecanismos se utilizan para enviar mensajes.
El mecanismo de envío de una pregunta por correo electrónico funciona a través de un servidor de correo instalado en el hosting. Si no recibe correos electrónicos, es posible que deba revisar la configuración de su servidor web o verificar su buzón de correo para ver si está en la lista de correo no deseado.
Estructura
La página de comentarios puede constar de varios campos que se le pide al visitante que complete. Los campos marcados con un asterisco son obligatorios. Si una persona intenta enviar un formulario sin completar los campos con un asterisco, recibirá un mensaje que le indicará que no se puede enviar el formulario.
Como regla general, los campos obligatorios son: nombre completo, número de teléfono, correo electrónico, su pregunta. La página de comunicación más sencilla debería contener estos campos.
Además de los campos de texto, la página puede contener elementos de selección.
Ejemplo de un servicio de devolución de llamada
Puede proporcionar la posibilidad de adjuntar documentos de varios formatos. Para trabajar de forma eficaz, indique los formatos y el peso de los archivos que un visitante puede adjuntar a un mensaje.
Un ejemplo de un formulario de comentarios complejo para un pedido.
El último campo debe ser un captcha, un código de seguridad que se genera cada vez que se actualiza la página y que sirve para evitar el spam. Si no instala un captcha, pronto se cansará de limpiar la base de datos y el buzón del sitio de mensajes de spam enviados por varios bots. Actualmente, los bots pueden reconocer códigos, así que instale captchas confiables y actualice periódicamente el script de generación.
donde publicar
Normalmente, se utilizan dos tipos de colocación de formularios:
- En una página separada si el formulario contiene muchos campos.
- En la página "Contáctenos" bajo el título "Escríbanos".
No se recomienda colocar el formulario en la página principal y, más aún, duplicarlo de un extremo a otro en todas las páginas del sitio. La excepción es el servicio de devolución de llamada, que sólo puede clasificarse como se indica arriba según el método de comunicación. El formulario no funciona bien en . La excepción es la página de destino, cuyo objetivo es captar la atención del visitante y llevarlo al final de la página.
Reglas de buenos modales
Después de completar los campos y enviar el mensaje, el visitante debería recibir una respuesta en pantalla como “Gracias por su pregunta. Le responderemos en 1 hora." Si un visitante no recibe una respuesta dentro de un tiempo determinado, su favor hacia usted cae drásticamente. El hecho de ser ignorado es muy desagradable e indica que el sitio no valora a sus clientes. La retroalimentación debería funcionar y no acumular peso muerto de preguntas sin respuesta de los visitantes.
La comunicación a través de formularios es el método más rápido de comunicación con los clientes, ya que permite preparar respuestas detalladas y recopilar una base de datos única de direcciones de correo electrónico y números de teléfono. Recuerde: no tiene derecho a utilizar esta base de datos para envíos masivos ni transferirla a un tercero. Estadísticamente, su oferta funcionará si una persona está actualmente buscando su servicio o producto. Si un cliente potencial ya se ha puesto en contacto contigo, está en tu mano ofrecerle ahora exactamente lo que le interesa.
Formulario de comentarios ha sido durante mucho tiempo la forma más aceptable de comunicación entre el propietario del recurso y el usuario.
Hay muchas razones para esto. En primer lugar, utilizar un formulario de contacto facilita enormemente el envío de cartas, gracias a los campos especiales reservados para escribir texto. Esta plantilla hace que solicitar servicios específicos sea más conveniente. Otra ventaja es que los usuarios no necesitan ingresar la dirección de correo electrónico del propietario del sitio, ya que este punto ya se proporciona en el formulario de comentarios. Además, el visitante del sitio ni siquiera reconocerá su dirección de correo electrónico, lo que constituirá una posible protección contra el spam.
Entre la enorme cantidad de ventajas que tiene formulario de comentarios, sería difícil ver los defectos incluso si estuvieran ahí. Además de la comodidad para el propietario y usuario del recurso, también ahorra mucho tiempo. Esto sucede porque la persona que quiere hacer una pregunta no tiene que dedicar preciosos minutos a abrir un cliente de correo electrónico para enviar una carta. Todo lo que se requiere es ir a la página con el formulario de comentarios, ingresar el nombre, la dirección de correo electrónico, el texto deseado y el botón de enviar en los campos provistos. En cuanto a las grandes empresas, a la hora de elegir un destinatario, muchos usuarios simplemente se pierden, ya que a menudo se indican muchas direcciones de correo electrónico diferentes. ¡Y aquí el formulario de comentarios vendrá al rescate una vez más! Además, si se utiliza correctamente, puede aumentar significativamente la conversión.
Este formulario también puede contener una línea más, lo cual es muy recomendable para todos los propietarios de sitios que utilizan este tipo de comentarios. Estamos hablando de Captcha, un código que es un campo adicional donde debe ingresar ciertos números de una imagen o un conjunto de caracteres. Sin esto, la carta no será enviada. La necesidad de dicha protección surge debido al hecho de que hoy en día existen robots que pueden enviar spam desde formularios de comentarios y, gracias al código de seguridad, solo se enviarán a su buzón cartas escritas por personas reales.
Para crear un formulario de comentarios usted mismo, necesita habilidades especiales, incluido el conocimiento de HTML, JavaScript y PHP. Sin embargo, existe una alternativa mediante la cual cada propietario de un sitio puede generar fácilmente el formulario de registro, el formulario de pedido o el formulario de comentarios necesarios. A saber
Comenzar con nuestro servicio es muy sencillo. Para hacer esto, debe realizar un registro simple, después del cual puede proceder inmediatamente a crear el formulario. También es posible registrarse con un clic a través de las redes sociales.
En la primera sección, tendrá la oportunidad de personalizar la apariencia de las cartas, configurar la protección, seleccionar la acción que seguirá al envío exitoso, etc.
En la sección “Elementos” puedes agregar, eliminar o editar campos a completar. Pueden ser de texto, digitales, con imagen, etc. Además, tendrás la oportunidad de instalar botones de redes sociales.
Característica creador de formularios en línea El sitio es que, utilizando nuestro servicio en línea, puede crear un formulario de comentarios con solo unos pocos clics. Después de lo cual recibirá un código especial que deberá insertar en el sitio.
Además de los beneficios estándar como la protección contra spam, la configuración de una apariencia adecuada, etc., utilizando nuestro servicio puede editar o agregar nuevos campos rápidamente, crear formularios de varias páginas o sus propios mensajes de error. En cuanto al diseño, esto tiene sus ventajas para los usuarios avanzados, ya que pueden personalizar las propiedades CSS del formulario a su gusto y hacerlo más adecuado en estilo a su propio recurso.
Una cualidad positiva adicional del sitio es que, además de enviar cartas a sus direcciones, también se almacenan en el propio sistema, por lo que puede leer en cualquier momento incluso lo que detecta el filtro de spam. Además, en el apartado “Estadísticas” se te proporcionará un informe detallado de un periodo de tiempo determinado.
En resumen, podemos señalar otra ventaja innegable de los formularios de comentarios: que las cartas enviadas de esta manera llegarán a su correo electrónico de forma cómoda y ordenada. ¡Gracias a esto, podrás entender fácilmente quién lo envió y qué se requiere de ti!