Cómo agregar un formulario de contacto a su sitio web o blog de WordPress


Cómo agregar un formulario de contactoComo propietario de un sitio web, definitivamente debe aprender cómo agregar un formulario de contacto a WordPress. Su sitio web no es una entidad anónima. La mayoría de las personas quieren saber y ocasionalmente interactuar con quien está detrás del contenido que leen. ¿Por qué crees que hay perfiles de autor y comentarios de blog??


Por esa razón, en este artículo, aprenderá cómo agregar un formulario de contacto a su sitio web de WordPress. La publicación primero explicará las razones por las cuales es una buena idea y luego obtendrá una guía paso a paso sobre cómo incluir un formulario de contacto en su sitio a través de un complemento.

También hablaremos sobre cómo cambiar el diseño de su formulario e implementar la protección contra correo no deseado. Además, examinaremos los formularios de contacto y la protección de datos personales, algo que se ha centrado más recientemente. Finalmente, encontrará una lista de complementos que puede usar para agregar un formulario de contacto en WordPress.

Puede sonar mucho, pero no se preocupe, lo mantendremos simple!

¿Por qué debería usar un formulario de contacto en su sitio de WordPress??

Antes de entrar en cómo examinar por qué es necesario. Hay muchas buenas razones para usar un formulario de contacto en su sitio en lugar de publicar su dirección de correo electrónico directamente, por ejemplo.

  • Protección contra correo no deseado – El spam es una plaga. Lo notará rápidamente cuando tenga un sitio web de WordPress que use comentarios de blog. Una cosa que hacen los spammers es escanear automáticamente los sitios web en busca de direcciones de correo electrónico desprotegidas para que puedan agregarlos a sus listas de correo. Los formularios de contacto evitan que eso suceda al brindar a los visitantes la oportunidad de ponerse en contacto sin publicar su dirección en línea.
  • Solicite la información correcta – Las personas que se ponen en contacto con usted no siempre le envían toda la información que necesita. Con un formulario de contacto, puede solicitarlo específicamente por adelantado. También le ofrece una forma de filtrar consultas, por ejemplo, por tipo. Esto hace que su vida sea más fácil y reduce muchos de ida y vuelta.
  • Informar a sus clientes – Por el contrario, los formularios de contacto también pueden actuar como el primer punto de información. Puede incluir información para las personas que llaman para informarles sobre el tiempo de respuesta esperado y los pasos que pueden tomar por adelantado para atender su consulta. Esto reduce la probabilidad de múltiples correos electrónicos de la misma persona impaciente.

¿Convencido de que los formularios de contacto son útiles? Entonces vamos a la parte práctica de este tutorial.

Cómo agregar un formulario de contacto en WordPress con el formulario de contacto 7

Existen muchos complementos de WordPress para agregar un formulario de contacto a su sitio, tanto gratis como premium. Hablaremos de algunos de ellos más adelante en este artículo. Para el siguiente tutorial, usaremos Formulario de contacto 7.

El complemento está disponible de forma gratuita en el directorio de WordPress y ha estado constantemente entre los complementos más populares de todos los tiempos (de hecho, en el momento de escribir este artículo es en primer lugar). Además de eso, es fácil de usar, tiene una buena lista de características y complementos sensibles.

Es por eso que lo elegimos para enseñarle cómo agregar un formulario de contacto en WordPress.

Paso 1. Instalar el complemento de Contact Form 7

Instalar Contact Form 7 es tan fácil como cualquier otro complemento de WordPress. Simplemente inicie sesión en su sitio, vaya a Complementos> Agregar nuevo y escriba su nombre en el cuadro de búsqueda.

instale el formulario de contacto 7 para agregar el formulario de contacto en wordpress

Debería aparecer en primer lugar. Haga clic en Instalar ahora para descargarlo en su sitio. Cuando termine, haga clic en Activar para comenzar a usar el complemento.

Paso 2. Crea tu nuevo formulario de contacto

Después de la instalación, encontrará un nuevo elemento de menú llamado Contacto en tu barra lateral de WordPress. Hacer clic te lleva a esta pantalla.

formulario de contacto 7 menú principal

Obtiene una serie de información sobre herramientas para mejorar su formulario de contacto, como el uso de protección contra correo no deseado. Llegaremos a eso más tarde.

Más importante aún, encontrará una lista de todos los formularios de contacto en su sitio. Incluye un formulario de muestra que, en teoría, puede usar de inmediato. Haz clic para comenzar a editar o presiona Añadir nuevo en la parte superior de la pantalla Ambos te llevarán aquí:

Cómo agregar un formulario de contacto a WordPress con el formulario de contacto 7

Parece un poco críptico al principio, pero no te preocupes, lo entenderás pronto.

Para trabajar, su formulario de contacto necesita campos. Los campos son donde los visitantes ingresan su nombre, dirección de correo electrónico o el mensaje que desean enviarle, o cualquier otra cosa que desee que agreguen.

Contact Form 7 crea aquellos con un poco de HTML más etiquetas personalizadas. Todo entre denota un campo de su formulario de contacto más la descripción de texto que le pertenece. Los campos reales se crean entre corchetes..

¿Eso significa que para crear un formulario de contacto necesita aprender lenguajes de programación? Afortunadamente, el complemento viene con herramientas para generarlos automáticamente.

Paso 3. Configure su formulario

Por el momento, el formulario predeterminado que tenemos en el back-end se verá así en la página.

Configuración de formulario de contacto
Formulario de ejemplo “agregar un formulario de contacto en WordPress”

Todo es estándar. Supongamos que desea agregar un menú desplegable para elegir el propósito de ponerse en contacto con usted. De esa manera, puede ver de inmediato los mensajes a los que debe dar prioridad.

Para hacerlo, primero debe colocar el cursor donde desea que aparezca el menú en el formulario de contacto. En este caso, eso es entre la dirección de correo electrónico y el asunto.

Haga clic en el menú desplegable en la barra de herramientas en la parte superior. Te lleva a este menú:

formulario de contacto 7 crear menú desplegable

Aquí le mostramos cómo completar diferentes campos:

  • Tipo de campo – Elija si el campo es obligatorio para enviar el formulario de contacto o no.
  • Nombre – Esto denota el nombre utilizado en la etiqueta. No aparecerá para los visitantes, pero le facilita recordar el propósito de la etiqueta y también configurar el correo electrónico enviado a su cuenta más tarde.
  • Opciones – Ingrese las opciones disponibles para los visitantes utilizando el menú desplegable. Pon uno por línea. También tiene la opción de permitir múltiples selecciones y usar un elemento en blanco como predeterminado.
  • Id / atributo de clase – En este lugar, puede asignar una clase o id de CSS al campo. Esto es muy útil para un estilo personalizado. Hablaremos de eso más tarde.

Así es como lo completamos:

rellenado formulario generador de etiquetas formulario de contacto 7

Cuando esté satisfecho, haga clic en Insertar etiqueta para ponerlo en forma.

agregar etiquetas de formulario para el menú desplegable al formulario de contacto 7

Tenga en cuenta que una vez que comprende cómo funcionan las etiquetas, también puede crearlas o hacer cambios en el campo de texto. Por ejemplo, para hacer que el nuevo menú desplegable sea un campo no obligatorio, simplemente puede eliminar el asterisco después de Seleccione. Cuanto más use el complemento, mejor comprenderá cómo funciona.

Ahora todo lo que queda es agregar una etiqueta. Ese es el texto que acompaña al campo del formulario de contacto para explicar lo que hace. Simplemente copie y pegue el código existente de otros campos y luego ajústelo a sus necesidades.

agregue código html para formar etiquetas en el formulario de contacto 7

Paso 4. Editar configuración de correo electrónico

A continuación, debe configurar el correo electrónico que se le envió desde el formulario de contacto. Como era de esperar, haces esto bajo el Correo pestaña en la parte superior.

configurar la configuración de correo del formulario de contacto 7

Encontrará los campos rellenados previamente con etiquetas similares a las del formulario de contacto anterior. También le proporciona etiquetas de campo disponibles, incluidas las nuevas que haya creado anteriormente (si ha guardado el formulario). Puede usarlos para personalizar cómo recibirá los mensajes de su formulario de contacto.

Esto es lo que significa cada campo:

  • A – La dirección de correo electrónico a la que se enviarán los mensajes. Por lo general, puede dejar esto como está.
  • Desde – Remitente del correo electrónico. De manera predeterminada, está configurado con el nombre de la persona que usa su formulario de contacto.
  • Encabezados Adicionales – Espacio para campos de encabezado de mensaje adicionales. La configuración estándar envía su respuesta al correo electrónico de la persona que se contacta con usted, no al correo electrónico del que proviene (es decir, su sitio) cuando presiona Respuesta. También es posible poner destinatarios a CC o BCC allí.
  • Cuerpo del mensaje – El cuerpo del correo electrónico que recibirá.
  • Excluir líneas con etiquetas de correo en blanco de la salida – Cuando marca esto, si alguna de las etiquetas usadas está vacía, el complemento las excluirá del mensaje.
  • Usar tipo de contenido HTML – Por defecto, el mensaje se envía en texto sin formato. Marque esta casilla para usar HTML en su lugar.
  • Archivos adjuntos – Si su formulario permite la carga de archivos, las etiquetas para estos archivos pertenecen aquí. También puedes usarlo para adjuntar archivos alojados en su servidor.
  • Correo (2) – Una plantilla de correo adicional que a menudo se usa como autoresponder. Marque para activar.

Las opciones estándar son bastante buenas. Lo único que necesitamos cambiar para nuestro ejemplo es la línea de asunto.

configurar un filtro en su programa de correo

Usando el formato anterior, ahora puede configurar un filtro en su programa de correo para ordenar los mensajes por línea de asunto, dando prioridad a las consultas comerciales. Eso es todo acerca de la configuración de correo por ahora.

Paso 5. Agregar un mensaje de formulario

El siguiente es el Mensajes lengüeta. Tiene la capacidad de configurar los mensajes que sus visitantes pueden encontrar al usar el formulario.

configurar mensajes de formulario para el formulario de contacto 7

Estos son mensajes de error, mensajes de éxito o simplemente sugerencias sobre cómo usar el formulario correctamente. Encontramos que estos ya son bastante buenos, por lo que generalmente dejamos todo como está. Si tiene una razón para cambiar alguno de ellos (por ejemplo, para adaptarse al tono de su sitio web), siéntase libre de hacerlo.

Paso 6. Personalizar configuraciones adicionales

Finalmente, llegas a la configuración adicional.

forma de contacto 7 configuraciones adicionales

Por defecto, estos están vacíos. Puede hacer cosas diferentes, desde limitar la capacidad de que solo las personas que hayan iniciado sesión envíen el formulario de contacto para configurarlo en modo de demostración con fines de prueba. No es importante para nuestros propósitos, pero puede encontrar todas las diferentes opciones en documentación.

Paso 7. Agregue el formulario a su sitio web

Ahora que ha terminado de configurar el formulario, es hora de obtenerlo en su sitio. Lo primero que debe hacer es guardar el formulario con el botón del mismo nombre.

Antes de hacer eso, es posible que desee agregar un nombre en la parte superior. Esto hará que el formulario sea más distinguible en caso de que crees varios.

Una vez que haya guardado su formulario, aparecerá un código corto en la pantalla:

formulario de contacto 7 shortcode para agregar formulario de contacto a wordpress

Lo usará para colocar el formulario donde desee. Lo primero que debe hacer es marcarlo y copiarlo. Una vez hecho esto, vaya a la página donde desea colocar el formulario. Por ejemplo, puede simplemente crear una nueva página y nombrarla Contacto. Pegue el shortcode en el editor de WordPress.

formulario de contacto 7 shortcode en el editor de wordpress

Cuando ahora publique la página y vaya al front-end:

Formulario de contacto 7 formulario en la página

Ahí está. Observe el menú desplegable que creamos anteriormente. Ahora es parte del formulario de contacto según sea necesario.

Simple, verdad? Además, puede usar el mismo método para colocar el formulario en cualquier otro lugar.

Paso 8. Incluir un formulario de contacto en una barra lateral (opcional)

No hay nada más fácil que colocar el formulario de contacto en una barra lateral. Solo ve a Apariencia> Widgets. Agregue un widget de texto a cualquier área widgetizada donde desee que aparezca el formulario de contacto y pegue el shortcode.

agregar formulario de contacto al widget de wordpress

¡No olvides guardar el widget! Cuando ahora vuelve al front-end de su sitio, ahí está:

formulario de contacto en el widget de WordPress

Acaba de dominar los conceptos básicos para agregar un formulario de contacto en WordPress. Aún no hemos llegado al final. Todavía hay muchas cosas que hacer para mejorar aún más sus formularios.

Formularios de contacto en WordPress – Próximos pasos

Una vez que tenga el formulario en su sitio, el trabajo no termina. Todavía hay algunas cosas importantes que cuidar, por ejemplo, diseñar su formulario, protegerlo de los spammers de correo electrónico e implementar medidas de protección para los datos personales. Hagamos esto en orden:

Cambiar el diseño del formulario

Idealmente, no hay necesidad de cambiar el estilo de su formulario de contacto. Esto es probable en nuestro caso porque Contact Form 7 usa código HTML estándar como etiqueta o input [type = "text"] para crear campos de formulario.

En buenos temas de WordPress, estos se definen en la hoja de estilo. En consecuencia, el formulario de contacto probablemente se ajuste automáticamente al diseño de su sitio. Puede ver esto en el sitio web de ejemplo anterior. En caso de que aún necesite hacer ajustes, tiene varias opciones.

Como se mencionó, los formularios del Formulario de contacto 7 tienen un marcado HTML estándar. Simplemente puede cambiar el CSS asociado y, por lo tanto, el aspecto de los formularios. Solo tenga en cuenta que esto también tiene consecuencias para otros campos de entrada en su sitio que comparten el mismo marcado.

Además, cada formulario creado con Contact Form 7 viene con un código específico del complemento. Puede encontrar el código utilizando las herramientas de desarrollador en su navegador.

cambiar el diseño del formulario de contacto a través de css

Por ejemplo, puede realizar cambios en el estilo de todo el formulario utilizando .wpc7-form Clase CSS Tenga en cuenta que tiene consecuencias para todos los formularios creados con el Formulario de contacto 7, pero deja intactos otros campos de entrada en su sitio.

Si desea ser aún más específico y cambiar el estilo solo para formas particulares, tiene suerte. Como puede ver en la captura de pantalla anterior, cada formulario del Formulario de contacto 7 obtiene su propia identificación CSS.

Puede usar esto para orientar elementos por formulario. Además, es posible dar a los elementos en sus formularios sus propias clases e identificadores CSS.

agregue la clase css y la identificación al formulario de contacto formulario 7

Con esos, puedes apuntarlos aún más específicamente.

En resumen, lo que sea que desee cambiar el diseño de sus formularios, tiene todas las herramientas para hacerlo..

Implementación de protección contra spam

El spam es un gran tema cuando se trata de la web y los sitios web en general. Si deja su dirección de correo electrónico desprotegida en su sitio, hay muchos programas automáticos que los recogerán y comenzarán a enviarle ofertas no solicitadas, correos electrónicos de pesca y cosas peores.

Desafortunadamente, lo mismo es cierto para los formularios de contacto. A menos que establezca medidas para evitarlo, también hay programas que pueden enviarle correo no deseado a través de formularios de contacto.

Afortunadamente, Contact Form 7 ofrece formas fáciles de prevenir esto. Uno de ellos es simple: incluya un cuestionario en su formulario que los bots no puedan responder, como una ecuación simple.

formulario de contacto 7 protección contra spam mediante cuestionario

La etiqueta de prueba lo hace posible. Es tan fácil de usar como todas las otras etiquetas en el Formulario de contacto 7 y puede encontrar información adicional aquí.

Aparte de eso, hay reCAPTCHA. Este es un servicio de Google para combatir el spam. Necesita una clave API e integrarla con el Formulario de contacto 7. Encuentre instrucciones aquí. Esto podría tener consecuencias para proteger la información personal. Más sobre eso en la siguiente sección.

Puede usar la etiqueta reCAPTCHA para agregarla a su formulario. El creador de Contact Form 7 también tiene un complemento Captcha llamado CAPTCHA realmente simple que puedes usar para el mismo propósito.

También tiene la capacidad de usar complementos de terceros para la protección contra correo no deseado. El más conocido es, por supuesto., Akismet y el Formulario de contacto 7 ofrece instrucciones detalladas sobre cómo usar los dos juntos.

Hay otros, por ejemplo Formulario de contacto 7 Honeypot o WPBruiser. Para esto último, necesitas un extensión pagada para que funcione con el Formulario de contacto 7. También hay más opciones que puede encontrar fácilmente.

Nota al margen importante: formularios de contacto y GDPR

Es posible que tenga en cuenta que recientemente ha habido algunos cambios en las leyes de privacidad de Internet en Europa. El 25 de mayo de 2018, el Reglamento General de Protección de Datos (GDPR) entró en vigor.

Trajo una serie de cambios a las leyes que se refieren al uso de información personal en línea. También amenaza con fuertes multas para cualquier persona que viole las regulaciones.

¿Por qué es eso importante? Los formularios de contacto recopilan datos personales. Por esa razón, si cae bajo la jurisdicción de las regulaciones (y la mayoría de la gente lo hace ahora), debe prestar atención a algunas cosas.

Primero lo primero: no somos una oficina legal!

A continuación, encontrará una serie de consejos sobre cómo hacer que su formulario de contacto cumpla con GDPR. Estos consejos han sido recopilados de la mejor manera posible..

Sin embargo, nadie aquí en websitesetup.org es abogado ni jugamos uno en la televisión. Por esa razón, lo siguiente no reemplaza una consulta de derecho profesional y no debe verse como asesoramiento legal.

De acuerdo, tanto por la parte “si tiene problemas, por favor no regrese y nos demande”. Vayamos a los consejos!

Consejos para hacer que su formulario de contacto cumpla con GDPR

A continuación, le mostramos cómo crear formularios de contacto conscientes de la privacidad:

  1. No recopile datos que no necesita – Los formularios de contacto le permiten elegir qué campos incluir. Si hay datos que realmente no necesita, deje de recopilarlos. De esa manera, si hay una violación, no puede perderla.
  2. Deshabilitar cualquier seguimiento – Si está utilizando un formulario de contacto que rastrea cookies, agentes de usuario y / o IP de usuario, debe deshabilitarlo para cumplir con GDPR. El formulario de contacto 7 aparentemente no lo hace, así que no hay nada que hacer. Verifique su formulario de contacto de elección si usa cualquier otra cosa.
  3. Obtenga el consentimiento absoluto – Agregue una forma a su formulario para que las personas den su consentimiento para que recopile sus datos. Por ejemplo, el Formulario de contacto 7 ofrece un caja de aceptación. Importante: no establezca la casilla de verificación para que esté habilitada de forma predeterminada. Los usuarios tienen que hacer eso ellos mismos. Además, incluya un mensaje que diga lo que recopila y con qué propósito, además de un enlace a su política de privacidad.
  4. Tener una política de privacidad – Hablando de eso, según el RGPD, cada sitio web profesional debe mostrar una política de privacidad que explique qué datos recopilan y cómo los usan. También debe dar a los visitantes la posibilidad de solicitar sus datos personales y eliminarlos. Este es un tema más complejo del que podemos cubrir aquí. Utilice el siguiente enlace para encontrar más información..
  5. Implementar HTTPS – El uso de SSL / HTTPS cifra el intercambio de datos entre el navegador y el servidor. Esto es importante para que los formularios de contacto mantengan seguros los datos personales. También se considera una práctica común ahora. Consulte nuestra guía sobre cómo implementarlo.

De todo lo que hemos leído, lo anterior debería ser suficiente para que los formularios de contacto cumplan con la nueva ley. Por supuesto, hay más sobre este tema para los propietarios de sitios web. Puedes encontrar más aquí y aquí.

Otros excelentes complementos de formulario de contacto para WordPress

Además del Formulario de contacto 7, hay muchos más complementos para crear formularios de contacto en WordPress. Aquí hay algunos otros buenos candidatos.

Jetpack Forms (gratis)

formas de jetpack

Jetpack es un conjunto de complementos potentes producidos por WordPress.com (consulte nuestra comparación de WordPress.org vs WordPress.com). Estos incluyen un módulo para crear formularios de contacto. Cuando lo enciende, puede comenzar a ingresar formularios en su sitio web de WordPress directamente desde el editor de publicaciones y páginas.

Estas son algunas características destacadas:

  • Rápido y fácil de usar
  • Alertas por correo electrónico para informarle sobre el envío de formularios
  • Haga cualquier ajuste desde el editor de WordPress
  • Una gran solución para crear formularios simples

Cuando use los formularios Jetpack, asegúrese de implementar algún tipo de protección contra correo no deseado. Estamos hablando por experiencia. Lo antes mencionado WPBruiser es una opción gratis.

HappyForms (gratis)

Logotipo de HappyFormHappyForms es relativamente nuevo en el mercado. Se integra con el Personalizador de WordPress, lo que hace que comenzar sea realmente fácil. Aparte de eso, tiene las siguientes características:

  • Ligero y rápido
  • Completamente gratuito (pero viene con la marca)
  • Le permite crear formularios mediante arrastrar y soltar
  • Muestra los envíos de formularios en el panel de WordPress
  • Viene con protección contra spam incorporada

Formulario de contacto 7 (gratis)

Formulario de contacto 7

Con Contact Form 7 puede administrar múltiples formularios de contacto diferentes con una interfaz básica fácil de usar. También tienen una versión premium, pero se entiende como una donación. La prima realmente no hace ni da nada (además de una nueva animación de carga del mouse).

  • Rápido y fácil de usar
  • Puedes hacer ajustes dentro de WordPress
  • Lógica condicional para formularios de contacto

Gran opción gratis.

Formas Ninja (freemium)

Formas Ninja

Este complemento le permite crear formularios a través de una interfaz fácil de usar. Tiene una versión gratuita pero también ofrece un Edición premium con características adicionales, complementos, soporte, diseños y más. Éstas incluyen:

  • Conéctese fácilmente con servicios comunes de marketing por correo electrónico
  • Posibilidad de aceptar pagos a través de sus formularios
  • Sincronizar formularios con CRM como Salesforce

Las membresías para Ninja Forms cuestan $ 99 / año y más.

Formas de gravedad (prima)

logotipo de gravedad

Gravity Forms es probablemente la solución premium más popular. Es bastante avanzado, tiene una buena interfaz de usuario y un excelente sistema de soporte. A diferencia de otras entradas en esta lista, este complemento es solo premium, pero obtienes mucho por tu dinero.

  • Más de 30 tipos de campos de formulario.
  • Gran rango de complementos
  • Subidas de archivos
  • La posibilidad de que los envíos de los usuarios aparezcan en el front end
  • Formularios de varias páginas
  • Lógica condicional y cálculos avanzados.

Si está interesado en Gravity Forms, sus planes comienzan en $ 59 / año.

Formas Caldera (freemium)

formas de caldera

La entrada final en esta lista también le permite crear formularios con una interfaz gráfica. Aparte de eso, tiene las siguientes características:

  • Dar a los visitantes la posibilidad de enviar sus propias publicaciones.
  • Respondedores automáticos
  • Funciones antispam
  • Formularios web completamente receptivos

Además de la versión gratuita, también hay una Edición inicial desde $ 6.24 / mes – $ 74.99 / año.

Formularios de contacto de WordPress en pocas palabras

Aprender a agregar un formulario de contacto a WordPress es algo que cualquier persona propietaria de un sitio web debe hacer. Es una de las formas más importantes para que las personas se comuniquen con usted. Un formulario de contacto hace que su sitio se vea más profesional, lo protege de los spammers, se asegura de que obtenga la información que necesita y actúa como un portero.

En este artículo, hemos cubierto cómo agregar un formulario de contacto a WordPress usando el Formulario de contacto 7. Hemos revisado el diseño avanzado y la protección contra spam para su formulario. Además de eso, la publicación cubrió el tema importante del cumplimiento de GDPR para formularios de contacto y consejos sobre cómo lograrlo. Finalmente, observamos una serie de otros complementos excelentes que puede usar para agregar un formulario de contacto a su sitio de WordPress.

Por ahora, ya sabe todo lo que necesita para agregar un formulario a su propio sitio web. Esperamos que genere grandes oportunidades y nuevos contactos interesantes..

¿Tiene alguna pregunta sobre cómo agregar un formulario de contacto a su sitio? Si es así, háganos saber en la sección de comentarios a continuación.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map