Cómo crear un formulario de contacto en WordPress [paso a paso]

Eddy PfoccoriActualizado por Cisco Pfoccori el 11 de agosto de 2021

Cómo crear un formulario de contacto en WordPress

L
¿Quiere agregar un formulario de contacto a su sitio de WordPress? Tener un formulario de contacto le da a su audiencia una forma directa de ponerse en contacto con usted.

Quizás tengan una pregunta general, o quizás quieran hacer consultas sobre sus productos o servicios. De cualquier manera, un formulario de contacto les permite hacer eso.

En este artículo, le mostraremos cómo crear un formulario de contacto simple en WordPress. Y no se preocupe, no hay codificación involucrada ya que usaremos el complemento WPForms.

En esta guía:

¡Vamos a empezar!

Volver a la cima

¿Por qué utilizar un formulario de contacto?

Buena pregunta. ¿Por qué no dejar que la gente le envíe un correo electrónico directamente? Aquí hay 3 buenas razones para usar un formulario de contacto.

1. Te protege del spam

El uso de un formulario de contacto evita que reciba un montón de spam. Si divulga su dirección de correo electrónico en su sitio web, es probable que los spambots que rastrean sitios web regularmente la recojan y copien. Por lo tanto, mantenga su dirección de correo electrónico segura y utilice un formulario de contacto en su lugar.

2. Le ahorra tiempo

El uso de un formulario de contacto le permite controlar y organizar la información que necesita recopilar. Lo que, a su vez, reduce el envío de correos electrónicos de ida y vuelta. Y desde la perspectiva del usuario, tienen un lugar listo para usar para ingresar su mensaje y presionar enviar de inmediato.

3. Organiza la información

Con un formulario de contacto, recibirá información coherente y organizada de sus usuarios. Puede crear campos específicos para guiarlos a través del proceso de mensajería, de modo que solo reciba lo que sea relevante.

Volver a la cima

Cómo crear un formulario de contacto simple en WordPress (paso a paso)

Cuando inicie un nuevo blog , notará que WordPress no viene con un formulario de contacto, lo que significa que deberá usar un contacto del complemento.

En este tutorial, aprenderá a crear un formulario de contacto simple usando WPForms :

Creador de formularios de WordPress de arrastrar y soltar de WPForms

WPForms es el complemento de formulario de contacto más amigable para principiantes disponible para WordPress. Puede utilizar el generador de arrastrar y soltar para crear un formulario de contacto con solo unos pocos clics.

Para este tutorial, usaremos WPForms Lite , que es 100% gratuito. Puede actualizar a WPForms Pro en cualquier momento cuando desee crear formularios más avanzados, como una encuesta de blog .

¡Empecemos!

Paso 1: Instale WPForms

Primero, deberá instalar el complemento WPForms.

Desde su panel de WordPress, vaya a Complementos> Agregar nuevo :

agregar nuevos complementos

En el campo de búsqueda, ingrese WPForms :

instalar WPForms

Cuando lo encuentre, haga clic en el botón Instalar ahora . Una vez instalado, asegúrese de activar el complemento.

Nota: Si necesita ayuda, siga nuestra guía paso a paso sobre cómo instalar un complemento en WordPress .

Paso 2: cree un formulario de contacto simple

Una vez que haya activado el complemento, estará listo para crear su formulario de contacto.

Haga clic en el botón Agregar nuevo en el menú de WPForms para iniciar el generador de formularios de arrastrar y soltar:

agregar un nuevo formulario

Ingrese un nombre para su formulario:

Ingrese el nombre de su formulario de contacto

Y luego seleccione la plantilla Formulario de contacto simple :

Seleccionar formulario de contacto simple

Ahora, verá su formulario de contacto que se muestra con algunos campos de muestra:

Editar formulario de contacto simple

Comenzará con los campos Nombre, Correo electrónico y Mensaje. Pero puede agregar campos adicionales a su formulario de contacto arrastrándolos desde el panel de la izquierda al panel de la derecha:

Y también puede reorganizar el orden de los campos en su formulario arrastrándolos a una nueva posición:

arrastrar y soltar para reordenar campos

Si hace clic en un campo de formulario, verá las opciones para editarlo, reordenarlo o eliminarlo:

Edite, reordene o elimine campos en WPForms

Una vez que haya terminado de personalizar su formulario, haga clic en el botón Guardar .

Paso 3: Configure las opciones generales de su formulario de contacto

A continuación, configurará la configuración de su formulario de contacto, así que vaya a Configuración> General :

Configuración general de WPForms

En este panel, puede configurar lo siguiente:

  • Nombre del formulario : cambie el nombre del formulario si lo desea.
  • Descripción del formulario : proporcione una descripción al nombre del formulario.
  • Enviar texto del botón : cambie el texto del botón de envío.
  • Habilite el honeypot anti-spam : evite que los spambots envíen formularios. (Esta función se habilita automáticamente en todos los formularios de WordPress. Si decide utilizar otra forma de prevención de spam, desmarque esta opción).
  • Habilitar Google Invisible v2 reCAPTCHA : agrega reCAPTCHA para evitar spam.

También hay opciones para agregar varios nombres de clases CSS personalizados, pero no son necesarios al crear un formulario de contacto simple.

Nota: El complemento WPForms Lite es compatible con GDPR, ya que no se recopilan cookies ni detalles de los usuarios. Si está utilizando el complemento WPForms Pro, obtendrá configuraciones adicionales para deshabilitar las cookies de usuario y deshabilitar los detalles del usuario si lo desea. Puede encontrar más detalles sobre cómo crear formularios compatibles con GDPR aquí.

Cuando haya configurado la configuración general, haga clic en Guardar .

Paso 4: Configure las notificaciones del formulario de contacto

La configuración de Notificaciones le permite saber por correo electrónico cada vez que alguien envía un formulario de contacto en su sitio web:

Notificaciones de WPForms

Todos los campos se rellenan previamente cuando crea el formulario y, a menos que necesite cambiarlos, funcionarán bien.

  • Enviar a la dirección de correo electrónico : las notificaciones predeterminadas van a la dirección de correo electrónico del administrador que está configurada en su sitio. (Puede cambiar la predeterminada o agregar varias direcciones de correo electrónico si lo desea).
  • Asunto del correo electrónico : completado previamente con el nombre del formulario.
  • De nombre : precargado con su nombre de usuario.
  • De correo electrónico : rellenado previamente con la dirección de correo electrónico de su usuario.
  • Responder a : precargado con la dirección de correo electrónico de su usuario.
  • Mensaje : contiene el mensaje del usuario del formulario.

Si usa etiquetas inteligentes , también puede enviar una notificación al usuario cuando envíe un formulario de contacto para informarle que lo recibió y que se pondrá en contacto en breve.

Cuando haya completado la configuración de notificaciones, haga clic en Guardar .

Paso 5: Configure las confirmaciones de su formulario de contacto

La configuración de Confirmación le permite mostrar un mensaje a los usuarios cuando completan su formulario:

Configuración de confirmación de WPForms

Puede elegir entre 3 tipos de confirmación cuando un usuario envía un formulario de contacto:

  • Mensaje : muestra un mensaje de confirmación simple.
  • Mostrar página : lleva a los visitantes a una página de agradecimiento en su sitio.
  • Ir a URL (redireccionamiento) : envía a los visitantes a una página de otro sitio web.

Cuando haya completado la configuración de confirmación, haga clic en Guardar .

Volver a la cima

Cómo agregar su formulario de contacto en WordPress

Ahora que ha terminado de crear su formulario de contacto, está listo para agregarlo a su sitio.

Echemos un vistazo a 3 lugares donde puede agregar su formulario de contacto.

1. Agregue su formulario de contacto a la página de contacto

El primer lugar para agregar su formulario de contacto es la página de Contacto . Puede editar su página de contacto existente o crear una nueva.

A continuación, le mostramos cómo agregarlo a su página de contacto utilizando el Editor de bloques de Gutenberg .

Vaya al bloque donde desea agregar el formulario de contacto y haga clic en el icono “+” . Busque WPForms y haga clic en el icono de WPForms para agregarlo al bloque en su página:

agregar bloque WPForms

Ahora, seleccione su formulario de contacto del menú desplegable WPForms:

seleccionar formulario de contacto

Guarde su borrador y obtenga una vista previa de la página:

Nota: En este ejemplo, puede ver la opción reCaptcha habilitada en la esquina inferior derecha.

2. Agregue su formulario de contacto a una página o publicación

El siguiente lugar donde quizás desee agregar su formulario de contacto es otra página o publicación. Por ejemplo, si tiene una página de Servicios que describe sus servicios y pide a los clientes potenciales que se comuniquen con usted.

En lugar de vincular desde su página de Servicios a su página de Contacto, puede incrustar el formulario de contacto directamente en la página de Servicios.

A continuación, le mostramos cómo agregar el formulario de contacto a su página de Servicios utilizando el Editor de bloques de Gutenberg .

Busque el lugar en su página donde le gustaría insertar el formulario de contacto. Por ejemplo, tendría sentido insertar el formulario de contacto después de haber pedido a las personas que se pongan en contacto:

agregue un formulario de contacto a su página de servicios

Cuando tenga el lugar correcto, siga los mismos pasos anteriores para seleccionar y agregar el bloque WPForms.

Por ejemplo, así es como podría verse el formulario de contacto en su página de Servicios después de haber pedido a las personas que se comuniquen con usted para obtener más información:

vista previa del formulario de contacto en su página de servicios

3. Agregue su formulario de contacto a la barra lateral (o área de widgets)

WPForms incluye un widget que le permite agregar sus formularios a una barra lateral o cualquier otra área de widgets en su tema, por ejemplo, el área de widgets de pie de página.

A continuación, le mostramos cómo agregar su formulario de contacto al widget de la barra lateral.

En su panel de administración de WordPress, vaya a Apariencia> Widgets . Verá un widget de WPForms que puede agregar a cualquier área de widgets de su tema.

Por ejemplo, seleccione su barra lateral principal de la lista de opciones y haga clic en el botón Agregar widget :

Agregar el widget WPForms a la barra lateral

A continuación, agregue el título de su widget y seleccione el formulario que desea mostrar:

Seleccionar formulario de contacto

Guarde la configuración y visite su sitio web para comprobar cómo se ve en la barra lateral:

Vista previa del formulario de contacto en el área del widget de la barra lateral

Recuerde, puede usar los mismos pasos para agregar su formulario de contacto a cualquier área de widgets en su sitio. Estos varían de un tema a otro , pero lo más probable es que tenga áreas de widgets en la barra lateral y el área de pie de página.

Volver a la cima

Cómo realizar un seguimiento de las conversiones de sus formularios de contacto con MonsterInsights

Ahora que ha agregado un formulario de contacto en su sitio, querrá saber cómo está funcionando.

Y la forma más fácil de realizar un seguimiento del rendimiento de su formulario de contacto es con MonsterInsights , el mejor complemento de Google Analytics para WordPress.

Complemento de análisis de WordPress de MonsterInsights

MonsterInsights incluye un complemento de formularios que realiza un seguimiento automático de las vistas y conversiones de sus formularios.

Si aún no ha instalado MonsterInsights, siga nuestro tutorial paso a paso .

Una vez que haya instalado MonsterInsights, vaya a Insights> Addons , busque el complemento Forms y haga clic en el botón Instalar :

Instalar el complemento MonsterInsights Forms

Una vez instalado, verá que el estado cambia a Activo :

Activar el complemento de formularios de MonsterInsights

¡Y eso es todo lo que necesitas hacer!

MonsterInsights ahora comenzará a rastrear sus formularios automáticamente. Puede comprobar su rendimiento en los informes de estadísticas :

Informe de formularios de MonsterInsights

Para cada formulario, puede ver cuál está recibiendo la mayor cantidad de vistas y conversiones, y comparar la tasa de conversión.

Asegúrese de consultar también nuestra guía sobre cómo instalar Google Analytics en WordPress .

Volver a la cima

Terminando

¡Ahora sabe cómo crear un formulario de contacto simple en WordPress usando WPForms y agregarlo a su sitio! Además, sabe cómo realizar un seguimiento del éxito de sus formularios de contacto con MonsterInsights .

¿Necesitas algo de inspiración antes de crear el tuyo propio? Consulte nuestro resumen de las mejores páginas de contacto en la web para obtener más ideas.

Háganos saber si tiene alguna pregunta sobre la creación e instalación de su formulario de contacto. Y asegúrese de decirnos cómo se está desempeñando su formulario de contacto en los comentarios a continuación.

Deja un comentario