La respuesta a esta pregunta realmente se reduce a lo que está buscando lograr con sus formularios de contacto. Hay toneladas de artículos que enumeran las mejores prácticas para diseñar las mejores prácticas, pero no hay una fórmula única para un formulario de contacto que realmente genera conversiones.
Si la tasa de conversión promedio para un formulario de contacto es del 1%, claramente las «mejores prácticas» no son las que están rompidas.
La «mejor práctica» de diseño de forma más común que encontrará es la teoría de que las formas más cortas logran tasas de conversión más altas. La idea es que cuantos más campos de formularios tenga, menos probable es que los usuarios quieran llenarlos y más difícil será para completarlos.
Sin embargo, como hemos visto antes, esta teoría no funciona en el mundo real de la optimización de la forma.
La imagen de arriba proviene de un artículo de conversión escrito por el antiguo optimizador de conversión senior de Unbounce, Michael Aagaard, que muestra cómo seguir las mejores prácticas doradas de reducir el número de campos en una forma dio como resultado tasas de conversión más bajas. Y para tirar esta teoría más allá de la ventana, las tasas de conversión aumentaron en un 19.21% simplemente optimizando las etiquetas de campo en el original.
Por lo tanto, el concepto de forma corta claramente no siempre aumenta las tasas de conversión y lo verá en muchos de los ejemplos que vemos en este artículo. Hay algunas marcas B2B serias en esta lista que sabe que están probando sus formularios y no hay muchos diseños que considere cortos.
¿Cómo son los formularios de contacto?
Un formulario de contacto es un formulario breve basado en la web publicado en un sitio web. Cualquier visitante puede completar el formulario y enviarlo para enviar un mensaje al propietario del sitio.
Detrás de escena, su formulario de contacto desencadena un mensaje de correo electrónico para generar y enviar a su bandeja de entrada de correo electrónico. Esto le permite recibir mensajes de los visitantes fácilmente sin revelar su dirección de correo electrónico a Spammers.
Si un spambot se apodera de su dirección de correo electrónico, puede terminar su agregado a todo tipo de listas de correo de spam en línea. Eso puede resultar en graves riesgos de seguridad de estafas o correos electrónicos de phishing.
Cuando usa un formulario de contacto, su dirección de correo electrónico comercial nunca se revela en su sitio web, por lo que no se puede raspar. No necesita ninguna experiencia de codificación o diseño web para crear un formulario y publicarlo en WPFORMS.
Por supuesto, los formularios de contacto no pueden detener todo el spam. A veces puede recibir spam a través de formularios en su sitio web. Pero es fácil ajustar su forma para evitar que eso suceda.
Por ejemplo, puede usar una captcha para verificar si su visitante es humano.
Y en WPFORMS, también puede configurar un denylist para bloquear las direcciones de correo electrónico que lo están enviando spam.
Mantener su sitio es importante y seguro para el spam es importante. Es por eso que WPFORMS tiene muchas herramientas anti-spam diferentes para evitar que los bots de spam envíen mensajes a su bandeja de entrada. Consulte nuestra guía para detener el formulario de contacto SPAM para obtener más detalles.
PD. ¿Sabía que WPForms Lite tiene toneladas más de opciones anti-spam que otros complementos de generadores de formularios gratuitos? Consulte esta comparación de WPFORMS LITE VS FORMA DE CONTACT 7 para obtener todos los detalles.
¿Qué es un formulario de contacto en HTML?
Los formularios de sitio web HTML deben estar encerrados dentro de las etiquetas de formulario.
Hay varias opciones de parámetros disponibles, las más comunes son: Acción: esto le permite decirle al formulario a dónde ir una vez enviado (generalmente el nombre de archivo de un script que leerá y procesará los datos del formulario que se han enviado). Nombre: generalmente es una buena idea darle un nombre a sus formularios, esto se usa para identificar de manera única su formulario en una página determinada. Método: el valor de esto debe ser post o obtener.
Los formularios generalmente se deben configurar para usar POST (ya que Get adjuntará los datos del formulario en la URL de la página, que casi siempre es una mala idea por razones de seguridad).
Hay otros métodos disponibles, pero no discutiremos estos aquí.
A veces puede ser bueno ofrecer a los usuarios de su sitio web la opción de cargar un archivo. Para esto, puede usar el archivo de tipo de campo HTML.
Si está utilizando esta opción, también debe incluir una opción adicional en la etiqueta de formulario enctype = «multipart/formy-data»
Si alguna vez necesita pedir a sus usuarios que ingresen una contraseña en un formulario, debe usar la contraseña de tipo de campo especial de texto.
El uso de esta opción enmascarará cada personaje como los tipos de usuario, lo que les permitirá escribir en secreto.
Cuando desee que sus visitantes elijan algo de una lista, puede usar una lista desplegable.
Estos a veces se conocen como opción selecciona, seleccione campos o cajas combinadas.
Por defecto, solo se puede seleccionar una opción, sin embargo, puede permitir múltiples selecciones al incluir la palabra múltiple en su etiqueta de selección (esto también alterará la apariencia del campo).
Finalmente, cada formulario debe permitir al usuario la opción de enviar los datos del formulario. Los envíos de formulario generalmente se manejan utilizando un botón HTML.
El campo del botón es un campo de tipo de entrada (como lo son los campos de texto y contraseña), sin embargo, estos campos especiales son de tipo envío.
Para especificar el texto que aparece en el botón, utilizamos el parámetro de valor para indicar nuestro valor (en el ejemplo a continuación, indicamos ‘enviemos el formulario’).
¿Cómo se hace un formulario de contacto en HTML?
La forma de diseñar un formulario de contacto simple mediante el uso de HTML, CSS y PHP se ha mostrado en esta parte del tutorial.
Cree un archivo PHP llamado Simple_Contact_Form.php con el siguiente script para mostrar el formulario de contacto utilizando solo HTML y CSS. El script PHP se agregará más tarde para validar el formulario y mostrar los datos del formulario enviados.
Ahora, ejecute el archivo simple_contact_form.php desde el servidor. La siguiente salida aparecerá después de ejecutar el script.
Ahora, agregue el siguiente script PHP al comienzo del archivo simple_contact_form.php para validar los datos del formulario, leer los datos del formulario e imprimir los datos en el navegador. Cuando el usuario haga clic en el botón Enviar, los datos del formulario se verificarán para la validación utilizando el script PHP. Si los datos enviados serán validados, los datos se imprimirán en el navegador.
Agregue el siguiente código PHP al comienzo del archivo simple_contact_form.php.
Agregue el siguiente código PHP al final del archivo simple_contact_form.php.
Si el formulario se envía manteniendo todos los campos vacíos, entonces aparecerá la siguiente salida.
Si el formulario se envía escribiendo menos de 9 caracteres en los campos de mensajes, aparecerá la siguiente salida.
Si el formulario se envía con todos los datos válidos, aparecerá la siguiente salida.
Al usar los códigos anteriores, puede crear fácilmente un formulario de contacto muy simple para su sitio. Pero este formulario no es un formulario de contacto receptivo. La forma de hacer que este formulario responda en la siguiente parte de este tutorial.
¿Qué es formulario de contacto en una página web?
¿Quiere convertir su sitio web en una máquina de generación de plomo? Aprenda a crear un formulario de contacto para su sitio web para recopilar correos electrónicos, nombres y números de teléfono de los usuarios.
La forma más fácil de crear un formulario de contacto con el sitio web es utilizar un formulario de formulario en línea. Hay docenas de sitios web y complementos (si usa WordPress) que pueden crear formularios en solo unos pocos clics, no se requiere codificación.
La mayoría de los constructores de formularios en línea tienen plantillas, por lo que no tiene que comenzar desde cero. Mire las opciones y busque una que tenga todos los campos que necesita para su sitio web.
Una vez que encuentre el formulario de contacto perfecto, puede incrustarlo directamente en su sitio web usando HTML o activar el complemento (para sitios web de WordPress).
Si desea más control sobre el proceso de creación del formulario de contacto, puede construir uno desde cero. Hay algunas formas diferentes de crear un formulario de contacto desde cero.
El código es la forma más complicada de crear un formulario de contacto, pero también es el único método que no implica un recurso de terceros. Simplemente abra su creador de sitios web y comience a codificar con HTML o PHP.
Para aquellos que no están familiarizados con la codificación, un formulario interactivo de contacto del sitio web PDF le dará la libertad de construir un formulario desde cero sin código.
Con el software de edición PDF como Adobe Acrobat, siga estos pasos para crear su propia forma interactiva:
- En Acrobat, elija Herramientas> Preparar el formulario.
- Seleccione Crear nuevo y haga clic en Inicio.
- Agregue texto, logotipos, botones y campos de entrada.
¿Cómo hacer un formulario de contactos en HTML?
- Elija un editor HTML.
- Haga un archivo con la extensión .html.
- Haga un archivo con la extensión .php.
- Genere el código PHP para capturar datos de formulario.
- Cree su formulario de contacto HTML.
Para crear código HTML, necesita un editor HTML. Ayuda a convertir el código en lo que esté tratando de hacer, en este caso un formulario de contacto.
Piense en un editor HTML como un procesador de palabras especial específicamente para crear cosas para páginas web. Utiliza cualquier editor de texto para crear código HTML, pero los editores dedicados ofrecen una mayor conveniencia y funcionalidad.
Cualquiera de las herramientas anteriores hará el trabajo, pero hay cientos de opciones si es del tipo al que le gusta buscar la solución perfecta. La mayoría son gratis, por lo que puede probar algunos y ver cuál funciona mejor para usted.
A continuación, debe darle a su sistema operativo el jefe que está creando un nuevo archivo HTML. Afortunadamente, este paso es realmente simple. Todo lo que tiene que hacer es crear un nuevo archivo con su editor HTML y guardarlo con la extensión «.html».
Simplemente nombre el archivo y sígalo con .html. Cuando se trata con el código, es mejor mantener las cosas claras, por lo que sugerimos nombrar el archivo «contact_form.html» o algo similar.
Una vez que lo haya nombrado, escriba en el campo de texto. Esto anuncia al editor que desea crear código HTML. Es algo así como cuando juegas Charades y gestas la categoría que estás haciendo antes de comenzar a actuar.
Su editor generará automáticamente el siguiente código para usted. Será lo mismo si está creando un formulario de contacto simple o un sitio web HTML completo.
¿Cómo crear un formulario en HTML paso a paso?
Para lidiar con formas largas y complejas, necesitamos dividirlos en múltiples pasos. Al mostrar solo algunas entradas en una pantalla a la vez, el formulario se sentirá más digestible y evitará que los usuarios se sientan abrumados por un mar de campos de forma.
En este artículo, le daré un tutorial paso a paso para implementar un formulario de varios pasos en su aplicación web. Se mostrarán estepers por encima del formulario que representará la barra de progreso a medida que continuemos completando los pasos del formulario. Cada paso de formulario contendrá botones nombrados anteriores. Estos botones le permitirán navegar entre los pasos.
- Cree el diseño del formulario y los elementos de paso usando HTML.
- Haga que el formulario de varios pasos funcione usando JavaScript.
- Diseñe el formulario y los elementos de paso utilizando CSS.
Configuremos un formulario HTML básico antes de implementar el navegador para los pasos de formulario. Incluirá un formulario de paso a paso, que actuará como la barra de progreso. Contendrá múltiples elementos que representarán los números de paso. Estos elementos se mostrarán como círculos con el número de paso dentro de ellos. Los pasos inacabados tendrán el color de fondo de su círculo en gris. El paso activo tendrá el color de fondo de su círculo en púrpura. Y, los pasos completos tendrán el color de fondo de su círculo en verde. Después del formulario de paso a paso, necesitamos crear un formulario con múltiples secciones. Estas secciones estarán disponibles para todos los pasos y contendrán los campos de formulario para cada paso de formulario. Cada paso contendrá un botón anterior y siguiente, que ayudará a navegar entre los pasos. Sin embargo, el último paso mostrará un botón Guardar, a través del cual puede enviar el formulario.
¿Cómo crear un formulario de contacto?
Un formulario de contacto ofrece a todos una forma clara y confiable de llegar a su negocio. También te permite controlar cuándo y cómo las personas te alcanzan, lo que te hace menos probabilidades de recibir spam. Entrega en el formulario de comunicación Vaya a la bandeja de entrada de su audiencia, para que pueda administrar sus mensajes sin dejar MailChimp.
En este artículo, aprenderá cómo crear y publicar un formulario de contacto.
Si ha configurado una bandeja de entrada de MailChimp para su audiencia, puede crear un formulario de contacto que se conecta a ella. Luego, agregue un enlace de formulario de contacto a su sitio web, correos electrónicos, publicaciones sociales o en cualquier otro lugar que desee invitar preguntas o comentarios.
El formulario de contacto predeterminado incluye un campo de correo electrónico, campo de asunto, campo de mensajes y una opción para suscribirse a su boletín. Agregue los campos de audiencia para recopilar información adicional o elija etiquetar contactos que usen el formulario. También puede editar el texto y diseñar el formulario para adaptarse a su marca.
Cuando alguien nuevo complete su formulario, los agregaremos a su audiencia como un contacto suscrito o no suscrito, dependiendo de si optan por sus correos electrónicos. Si son un contacto existente, actualizaremos su perfil según sea necesario.
Primero irá a su bandeja de entrada de MailChimp y agregará un formulario de contacto como una nueva fuente de mensajes.
Para crear un formulario de contacto para su bandeja de entrada de MailChimp, siga estos pasos.
- Haga clic en el icono de la audiencia.
- Elija la bandeja de entrada.
- Si tiene más de una audiencia, haga clic en el desplegable de audiencia y elija el que desee trabajar.
Artículos Relacionados:
