Cómo añadir un formulario de contacto en WordPress
Este tutorial abarca los siguientes temas:
El formulario de contacto de un sitio web te ayuda a llevar una comunicación clara y efectiva con tus clientes y a controlar mejor la conversación. Como resultado, atraes más visitantes y clientes y recibes comentarios valiosos.
A continuación se muestra un ejemplo de un formulario de contacto estándar en una página de WordPress.
En esta guía, veremos por qué necesitas añadir un formulario de contacto a tu sitio web de WordPress y cómo instalarlo.
¿Por qué deberías añadir un formulario de contacto en WordPress?
La comunicación productiva con los clientes es la base de todo negocio exitoso. Dado que la mayoría de las empresas realizan sus operaciones en línea, su sitio web de WordPress no es una excepción.
Un formulario de contacto crea un canal de comunicación entre los visitantes y usted, generando nuevas oportunidades para atraer clientes potenciales.
A continuación, enumeraremos las ventajas más destacadas de tener un formulario de contacto en tu sitio web de WordPress.
- Un formulario de contacto protege tu dirección de correo electrónico de ser explotada – Publicar tu dirección de correo electrónico en una página web pública no siempre es una buena idea. Es visible para cualquier persona, incluidos los spammers, visitantes malintencionados o bots maliciosos. Por lo tanto, existe una alta probabilidad de que termine siendo objetivo de ataques de spam y phishing. El formulario de contacto oculta el correo administrativo de tu sitio web, lo que reduce la posibilidad de ser objetivo.
- Un formulario de contacto te ayuda a eliminar los mensajes de spam – Los spambots son tan omnipresentes hoy en día que, eventualmente, todos los sitios web sufren sus ataques en algún momento. Un formulario de contacto ayuda a prevenir ataques de spam automatizados al implementar varios mecanismos de protección.
- Un formulario de contacto te permite extraer la información esencial de las consultas de tus visitantes – Algunos clientes prefieren ir directamente al grano, mientras que otros prefieren las exposiciones largas. Aunque eso no es malo, podría ser agotador leer consultas largas y filtrar solo la información esencial. Un formulario de contacto te permite controlar mejor la conversación al dividir el formulario de contacto en varios campos, lo que requiere que el visitante proporcione información específica.
- Un formulario de contacto te permite recibir comentarios de tus visitantes – Al igual que comentarios, un formulario de contacto permite a los visitantes expresar sus opiniones sobre tus servicios o contenido. La diferencia es que sus comentarios no son públicos y serás el único que los verá.
- Un formulario de contacto te ayuda a convertir más ventas – Tus servicios pueden requerir negociación de precios. A través de un formulario de contacto, puedes negociar un trato con clientes potenciales en un canal privado.
Añadir un formulario de contacto a WordPress
WordPress viene con muchas características integradas, pero un formulario de contacto no es una de ellas. Sin embargo, no tienes que preocuparte. Hay una amplia selección de plugins de formularios de contacto para elegir, cada uno con sus propias especificaciones y características únicas.
Sigue leyendo para saber cómo elegir, instalar y añadir un plugin de formulario de contacto a tu sitio web de WordPress.
-
Paso 1.Elige un plugin de formulario de contacto de WordPress
Tu configuración debería comenzar investigando los plugins de formulario de contacto disponibles. Todos los formularios de contacto ofrecen la misma funcionalidad básica, pero hay plugins con características exclusivas que pueden adaptarse mejor a tu negocio.
Recomendamos WPForms, uno de los plugins más populares y versátiles de WordPress. Tiene una interfaz intuitiva con un constructor de arrastrar y soltar, lo que le permite crear formularios de contacto hermosos y funcionales con facilidad. Sin mencionar que es bastante fácil de usar, por lo que es ideal para principiantes.
La versión gratuita WPForms Lite viene con todas las características clave que un formulario de contacto debe poseer y es perfecta para iniciar tu negocio.
La versión premium WPForms Pro agrega varias características valiosas como la integración con PayPal, Stripe, herramientas de personalización y muchas más funciones avanzadas.
Los usuarios de SiteGround pueden comprar WPForms Pro a un precio promocional desde su Área de cliente > Marketplace > Ventajas de socios.
-
Paso 2.Descargar un plugin de formulario de contacto
Una vez que hayas hecho tu elección, es hora de descargar e instalar el plugin del formulario de contacto. Para este ejercicio, usaremos WPForms.
Para empezar, inicia sesión en tu panel de WordPress. Si tienes dificultades para iniciar sesión, consulta esta guía en cómo iniciar sesión en tu sitio web de WordPress.
Navega a la sección Plugins y selecciona Añadir nuevo. Usa la barra de búsqueda en la esquina superior derecha y escribe “wpforms”. El primer resultado es Contact Form by WPForms – Drag & Drop Form Builder for WordPress. Haz clic en el botón Instalar ahora para descargar el plugin en tu sitio web.
Una vez que se complete la descarga, Instalar ahora se convertirá en un botón Activar.Presiónalo para activar el plugin.
-
Paso 3.Crear un formulario en WordPress
La activación creará una nueva sección para WPForms en tu panel de WordPress. Haz clic en WPForms > Todos los formularios para ver la lista de todos los formularios creados con el plugin. Para crear uno nuevo, pulsa el botón Añadir nuevo.
Entrarás en un nuevo panel de control donde podrás configurar tu nuevo formulario. Comienza escribiendo un nombre de etiqueta para tu formulario en el campo Pon nombre a tu formulario. Luego, selecciona una de las plantillas prefabricadas colocando el cursor sobre ellas y presionando el botón Usar una plantilla. Si deseas comenzar desde cero, coloca el cursor sobre la plantilla Formulario en blanco y presiona Crear un formulario en blanco.
El panel cambiará automáticamente a la sección Campos, donde puedes añadir, editar o eliminar campos de tu formulario de contacto.
Pulsa Añadir campos para ver los tipos de campo disponibles a la izquierda. Para añadir un campo, haz clic y mantén pulsado el botón del ratón sobre él, arrástralo a la sección derecha debajo de la etiqueta del formulario y suéltalo.
Puedes añadir varios campos y colocarlos en orden descendente. Después de agregar todos los campos, puede reorganizarlos manteniendo presionado el botón del mouse sobre un campo y arrastrándolo hacia arriba o hacia abajo para presionar los otros campos.
Los campos tienen etiquetas preestablecidas, pero puedes cambiarlas. Para editar un campo, haz clic en él y la sección izquierda del editor cambiará a la pestaña Opciones de campo.
En la subsección General, puedes cambiar el nombre del campo (Etiqueta) y añadir una descripción que aparecerá como texto debajo del campo (Descripción).
Cambiando el control deslizante a Obligatorio, puedes hacer que el campo sea obligatorio para completar el formulario o no. Los campos obligatorios están marcados con un símbolo de estrella roja junto a sus etiquetas.
En Avanzado y Lógica inteligente, puedes ajustar la configuración avanzada como textos de marcador de posición, clases de CSS, etc.
Para guardar el formulario de contacto o cualquier modificación nueva, haz clic en el botón Guardar.
-
Paso 4.Configurar las notificaciones del formulario de contacto
Las notificaciones del formulario de contacto son mensajes de correo electrónico enviados automáticamente desde tu sitio web a tu dirección de correo electrónico. De esta manera, serás informado cada vez que un usuario envíe una consulta en tu formulario de contacto.
Puedes controlar la configuración de notificaciones desde el panel de control de WPForms >Ajustes > Avisos. WPForms habilita las notificaciones por defecto, pero puedes activarlas o desactivarlas usando el botón deslizante Activar los avisos.
La activación de las notificaciones habilita la sección de configuración que controla varios parámetros de los correos electrónicos. Junto a cada configuración, puedes ver el menú Mostrar etiquetas inteligentes. Permite que el formulario de contacto extraiga información de la entrada del visitante y la muestre en el correo electrónico.
Enviar a dirección de correo electrónico define la dirección de correo electrónico que recibirá notificaciones cada vez que un visitante envía una entrada en su formulario de contacto. Por defecto, WPForms establece automáticamente la dirección de correo electrónico administrativa de su sitio web de WordPress. Esta dirección se especifica con la etiqueta {admin_email}. Puedes reemplazar la dirección con otra dirección de correo electrónico o añadir varios correos separados por coma.
Asunto del correo electrónico define la línea de asunto de cada correo de notificación enviado por tu formulario de contacto. Puedes cambiar el texto o incluso añadir etiquetas inteligentes que muestren información proporcionada por los visitantes en los campos del formulario de contacto.
Por ejemplo, puedes configurar el asunto para que muestre el nombre del visitante enviado al formulario de contacto. Para hacerlo, abre el botón Mostrar etiquetas inteligentes junto a la Asunto del correo electrónico y selecciona Nombre en Campos disponibles.
Ahora, cada nueva notificación incluirá el nombre del visitante en la línea de asunto junto con el texto de la línea de asunto.
Nombre del remitente establece el nombre del remitente que aparece en tu cliente de correo electrónico cuando recibes la notificación. Dado que su sitio web envía el formulario, WPForms extrae el título del sitio de la configuración general de WordPress. Puedes establecer un nombre personalizado o añadir una etiqueta inteligente que extraiga el nombre del visitante que envió el formulario.
Correo electrónico del remitente muestra la dirección del remitente de la notificación. Dado que su sitio web envía las notificaciones del formulario de contacto, la dirección se establece automáticamente en el correo electrónico administrativo de su sitio web de WordPress. Si usas un plugin SMTP y envías correos desde otra dirección, puedes configurarlo en la configuración Correo electrónico del remitente.
Responder-A establece la dirección en el campo Responder a del correo electrónico de notificación. Si eliges responder a la notificación, esta dirección será el destinatario de la respuesta. Si Responder-A está vacía, la dirección del destinatario es la dirección de Correo electrónico del remitente.En general, es una buena idea incluir la dirección de correo electrónico del visitante que envió el formulario. De esta manera, puedes seguir comunicándote si tienes preguntas sobre el envío de su formulario. Puede agregar una etiqueta inteligente que obtenga el correo electrónico enviado por el visitante en el formulario de contacto.
Mensaje de correo electrónico define el texto del cuerpo de la notificación. Por defecto, WPForms establece la etiqueta inteligente {all_fields}, que muestra la información de todos los campos del formulario de contacto. Puedes personalizar el cuerpo del texto mostrando solo los campos seleccionados o agregando más información del sitio web usando otras etiquetas inteligentes.
Una vez que hayas terminado de configurar las notificaciones, presiona el botón Guardar para confirmarlas.
-
Paso 5.Configurar las confirmaciones del formulario de contacto
La confirmación es la acción de seguimiento que notifica a los visitantes del envío exitoso del formulario. Puede ser un mensaje corto, una redirección a otra página de tu sitio web o una redirección a una URL externa.
Puedes configurar los ajustes de confirmación desde el panel de control de WPForms > Ajustes > Confirmaciones.
WPForms ofrece tres tipos de confirmación que puedes seleccionar desde el menú desplegable Tipo de confirmación.
WPForms ya ha configurado el Tipo de confirmación a Mensaje y ha añadido un mensaje predeterminado. Puedes cambiar el texto en el cuadro del editor de texto.
En lugar de un mensaje, puede optar por redirigir a los visitantes que completaron el formulario a otra página en su sitio web. Puedes hacer esto seleccionando Mostrar la página en el menú Tipo de confirmación.
El menú Página de confirmación enumera todas las páginas publicadas en tu sitio de WordPress. Aquí, puedes elegir la página que los visitantes verán como confirmación de que el formulario de contacto se ha completado con éxito.
El último tipo de confirmación es Ir a la URL (redireccionar). Un envío exitoso del formulario de contacto redirigirá a los visitantes a la dirección que especifique en el campo URL de redirección de confirmación. La redirección puede llevar a una página de tu sitio web o cualquier dirección web externa.
Para guardar la configuración de confirmación, presiona el botón Guardar en el panel de control de WPForms.
-
Paso 6.Configurar la protección contra correo no deseado
Sin ninguna protección contra spam, tu formulario de contacto podría ser un objetivo fácil para los bots de spam. Esto podría ensuciar la bandeja de entrada de tu correo electrónico con numerosos mensajes no deseados. Además, los ataques de spam podrían sobrecargar tu servidor SMTP ya que el formulario de contacto envía correos desde tu sitio web.
Por lo tanto, mantener tu formulario de contacto a salvo de ataques de spam es crítico.
En el panel de control de tu formulario, navega a Ajustes > Protección contra spam y seguridad.
WPForms tiene varios mecanismos de protección contra spam funcionando en segundo plano. Puedes desactivarlos o activarlos cambiando el control deslizante Activar la protección antispam.
Recomendamos mantener esta opción habilitada para aumentar la seguridad de tu formulario de contacto contra el spam.
También puedes instalar complementos para aumentar aún más la seguridad de tu formulario. De la lista También disponible, puedes elegir entre una amplia gama de módulos de seguridad premium y gratuitos que puedes incorporar a tu formulario de contacto. Algunos de ellos requieren actualizar a WPForms Pro, mientras que otros requieren pasos adicionales para ser activados. Haz clic en el botón Primeros pasos del complemento elegido para ver las instrucciones detalladas.
Cómo añadir un formulario de contacto a una página o publicación de WordPress
Una vez que creas un formulario de contacto, debes determinar su ubicación en tu sitio web. WordPress te permite añadir el formulario de contacto en cualquier página o publicación.
La configuración estándar para la mayoría de los sitios web es una página estática que contiene el formulario de contacto. Por lo general, esta página se llama Contacta con nosotros o Contactos y es la última página en tu menú de navegación de WordPress. Para obtener más información, consulte este tutorial sobre menús de navegación de WordPress.
Añadir el formulario de contacto se realiza editando una página o publicación desde tu creador de páginas de WordPress.
Añadir un formulario de contacto en el editor de bloques de Gutenberg
Gutenberg ha sido el editor de WordPress por defecto desde la versión 5.0. Para abrirlo, ve a la sección Páginas o Entradas de tu sitio web, coloca el cursor sobre la página o publicación y haz clic en Editar. Si estás a punto de crear una nueva página para el formulario de contacto, presiona Añadir nueva.
Dentro del editor, selecciona el área donde quieres colocar el formulario y pincha en el botón Añadir un bloque (signo “+”). Aparecerá una nueva ventana emergente con los bloques disponibles. Usa la barra de búsqueda, escribe “wpforms” y selecciona el bloque WPForms.
Gutenberg insertará el formulario de contacto en el área seleccionada. Elige tu formulario existente en el menú desplegable Selecciona un formulario.
El formulario se mostrará cómo lo ven los visitantes. Para confirmar los cambios en la página, presiona el botón Publicar (para una página nueva) o Actualizar (para una página existente).
Alternativamente, puedes insertar el formulario de contacto usando su shortcode. Primero, vuelve a la sección WPForms en tu panel de WordPress y selecciona Todos los formularios. Aquí puedes ver tus formularios existentes. Copia el código en la columna correspondiente Shortcode.
Ve al editor de páginas y presiona el botón Añadir un bloque (signo “+”). Usa la barra de búsqueda para encontrar el bloque Shortcode o selecciónalo de la lista completa de bloques.
El bloque se insertará en la página. Pega el shortcode previamente copiado en el campo Shortcode. Gutenberg no visualizará el formulario de contacto. Pulsa el botón Actualizar o Publicar y visita la página para confirmar que el formulario de contacto ha sido insertado.
Si se hace correctamente, la página debería mostrar el formulario de contacto en lugar del código corto.
Añadir un formulario de contacto en el editor clásico
Si prefieres usar el Editor clásico, añadir un formulario de contacto se hace insertando su shortcode directamente en el área del cuerpo de la página.
WPForms hace las cosas un poco más fáciles. En lugar de volver al panel de control del plugin para obtener el código corto, WPForms añade un botón Añadir un formulario en la barra de herramientas del Editor clásico.
Una vez que lo presionas, aparece una nueva ventana emergente. Selecciona tu formulario en el menú desplegable Selecciona a continuación un formulario para insertar y confirma con el botón Añadir un formulario.
Esto insertará automáticamente el código corto del formulario de contacto en el cuerpo de la página. Para guardar los cambios, presiona el botón Actualizar o Publicar.
Cómo añadir un formulario de contacto a la barra lateral
Muchos temas cuentan con un área de sitio web de barra lateral. WPForms te permite añadir tu formulario de contacto como un widget a esta sección.
En tu panel de WordPress, navega a la sección Apariencia > Widgets. Haz clic en la pestaña Barra lateral y presiona el signo “+” (Añadir un bloque).
Aparecerá una ventana emergente con una lista de los widgets disponibles. Usa la barra de búsqueda para encontrar WPForms y selecciona su widget.
El bloque de widgets del formulario aparecerá en la pestaña de la barra lateral. Elige el formulario de contacto del menú desplegable Selecciona un formulario.
El editor de widgets visualizará el formulario de contacto en la pestaña de la barra lateral. Pulsa el botón Actualizar para guardar los cambios.
Ahora, el formulario de contacto se mostrará en la barra lateral en todas las páginas y publicaciones.
Prueba la funcionalidad del formulario de contacto
Ahora que el formulario de contacto está añadido a tu sitio web en el lugar deseado, debes confirmar que está funcionando correctamente. Para hacerlo, simplemente visita el front end de tu sitio web y navega a la página donde está el formulario de contacto, completa la información requerida en el formulario y envíalo.
Si no recibes ningún mensaje de tu formulario de contacto, debes configurar tu WordPress para usar SMTP en lugar de la función PHP mail(). Por defecto, WordPress usa la función PHP mail() para enviar correos cuando es necesario. Esto incluye enviar los correos desde tus formularios de contacto. Muchos proveedores de correo electrónico marcarán los mensajes enviados de esta manera como spam, por lo que es posible que estos mensajes nunca lleguen a sus destinatarios.
SMTP usa autenticación que conduce a una alta capacidad de entrega de correo electrónico y, por lo tanto, es más probable que se entreguen los correos electrónicos del formulario de contacto. Para configurar tu WordPress para usar SMTP, puedes seguir las instrucciones en nuestro tutorial completo.
Resumen
En pocas palabras, solo puedes beneficiarte de tener un formulario de contacto en tu sitio web. Ya sea que administres una tienda en línea o un blog, te permite comunicarte con tus visitantes, recibir comentarios valiosos o atraer más clientes.
Hay muchos plugins que pueden añadir esta funcionalidad a tu sitio web de WordPress. Solo es cuestión de elegir el que mejor se adapte a tu negocio. Esperamos que este artículo te aclare las cosas y te ayude a tomar la decisión correcta.