1. Web Design
  2. WordPress
  3. WordPress Plugins

Crea un formulario de contacto de WordPress

Scroll to top

Spanish (Español) translation by Xiomara Reynoso (you can also view the original English article)

No importa si estás ejecutando un blog simple o un negocio adecuado a través de tu sitio web. Proporcionar un canal adecuado para la comunicación entre tú y tus clientes o visitantes beneficia a todos. Puedes hacerlo a través de comentarios, cuentas de redes sociales o un formulario de contacto, etc. Cada uno de ellos tiene sus propias ventajas y desventajas.

Los formularios de contacto son el camino a seguir en entornos más formales o si necesitas información personal de los clientes. En esta publicación, aprenderás a cómo crear un formulario de contacto en WordPress de forma gratuita. Puedes tomar un poco de tiempo, pero los beneficios hacen que valga la pena el esfuerzo.

¿Por qué necesitas un formulario de contacto?

Comencemos esta discusión haciendo otra pregunta. ¿No es más simple simplemente proporcionar alguna dirección de correo electrónico y otra información de contacto relacionada en una página de Contactanos en algún lugar del sitio web? Por supuesto, podemos hacer eso, pero el tiempo que ahorres durante la configuración inicial se perderá varias veces cuando tengas que filtrar todo el spam.

Cualquiera que haya administrado un sitio web modestamente popular sabe que Internet está lleno de robots de spam. Siguen raspando páginas web para cualquier información que puedan obtener para publicar spam. Esto podría incluir publicar enlaces sospechosos en los comentarios o enviar correos electrónicos a cualquier dirección de correo electrónico en la que puedan poner sus manos mientras raspan una página.

Para ti, esto básicamente significa ser bombardeado con correos electrónicos no deseados que puedan contener enlaces potencialmente dañinos. También podría dar como resultado la pérdida de ingresos si la sobrecarga de spam te impide leer un correo electrónico importante de los clientes.

Obtén la información que necesitas

Es posible que tus clientes no siempre sepan exactamente qué información deben proporcionar para que puedas resolver rápidamente su problema. Cuando creas tu propio formulario de contacto, puedes configurarlo de manera que los clientes o visitantes que lo completen proporcionen toda la información necesaria.

Muéstrales recursos adicionales

Una vez que los usuarios hayan completado un formulario de contacto, puedes mostrarles información adicional en función de su entrada en el formulario de contacto. Esto puede incluir cosas como tiempos de respuesta esperados, artículos de ayuda u otras formas de contactarlo.

¿Cómo crear un formulario de contacto de WordPress?

WordPress tiene un ecosistema robusto basado en complementos que te brindan una gran variedad de opciones cuando se trata de configurar un formulario de contacto. En este tutorial, utilizaremos un complemento gratuito para crear nuestro formulario de contacto.

Ve a Plugins > Agregar nuevo dentro de tu panel de administración de WordPress y luego busca formulario de contacto. Esto te mostrará un montón de complementos. Lee sus reseñas y características para ver cuál sería ideal para ti ahora y en el futuro cercano.

Contact Forms in WordPress Plugins DirectoryContact Forms in WordPress Plugins DirectoryContact Forms in WordPress Plugins Directory

Para nuestro tutorial, usaremos el complemento Forminator que te permite crear un montón de otras formas en el futuro si surge la necesidad. El primer paso es instalar y activar el plugin.

Después de eso, debes navegar a Forminator > Dashboard y luego hacer clic en el botón Crear en la sección Formularios.

Forminator Dashboard Create FormForminator Dashboard Create FormForminator Dashboard Create Form

El complemento viene con un montón de plantillas básicas para tipos comunes de formularios. Simplemente seleccionaremos Contáctanos y luego haremos clic en Continuar.

Forminator Contact Us FormForminator Contact Us FormForminator Contact Us Form

Especifica un nombre para el formulario de contacto para que sea más fácil de identificar para ti más adelante, en caso de que decidas crear un montón de otros formularios.

Forminator Contact Form NameForminator Contact Form NameForminator Contact Form Name

Verás que hay algunos campos ya agregados en la siguiente pantalla que incluyen Nombre, Dirección de correo electrónico, Número de teléfono y Mensaje. El asterisco junto al nombre y la dirección de correo electrónico significa que se han marcado como obligatorios.

Forminator Pre-Added Contact Form FieldsForminator Pre-Added Contact Form FieldsForminator Pre-Added Contact Form Fields

Puedes hacer clic en el botón Insertar campos para agregar otros campos al formulario. Hemos agregado un menú desplegable de Seleccionar para elegir un departamento que manejará esta presentación y un campo de entrada para especificar el número de cuenta para una fácil identificación en nuestro caso. Haz clic en Configuración para el campo desplegable de Seleccionar para que completarlo sea un requisito.

Forminator Select Dropdown RequiredForminator Select Dropdown RequiredForminator Select Dropdown Required

Edita la etiqueta del menú desplegable para leer Elegir departamento y proporciona una lista de departamentos para que las personas los seleccionen.

Forminator Select OptionsForminator Select OptionsForminator Select Options

Finalmente, haz clic en Aplicar para aplicar todas estas configuraciones a nuestro menú desplegable.

Forminator Apply SettingsForminator Apply SettingsForminator Apply Settings

Siempre puedes verificar cómo se verá tu formulario haciendo clic en el botón Vista previa antes de publicarlo.

Forminator Preview and PublishForminator Preview and PublishForminator Preview and Publish

Haz clic en el botón Publicar y verás un código corto. Coloca el shortcode donde quieras que aparezca el formulario de contacto.

Forminator Published Form ShortcodeForminator Published Form ShortcodeForminator Published Form Shortcode

Para este tutorial, lo he colocado en la página de contacto y se parece a la imagen de abajo.

Forminator Published Contact FormForminator Published Contact FormForminator Published Contact Form

El complemento también te da la opción de agregar un reCAPTCHA de Google al formulario para contrarrestar los envíos de spam. Es fácil de integrar una vez que obtienes tus claves y secretos de Google.

Como habrás notado, el formulario de contacto en sí viene con un estilo muy mínimo para que se mezcle fácilmente con el resto del diseño del sitio web. Hay cuatro estilos diferentes en la pestaña Apariencia para elegir y todos proporcionan un estilo mínimo al tiempo que brindan un aspecto único al mismo tiempo. Incluso puedes decirle al complemento que se deshaga de todo el estilo y use el CSS en el tema del sitio web para darle estilo.

Personalización del comportamiento de envío de formularios

Es una buena práctica dar a los usuarios algún tipo de reconocimiento de que has recibido tu envío después de hacer clic en el botón Enviar mensaje. Casi todos los complementos de formularios de contacto tendrán algunas configuraciones que puedes configurar para redirigir a los usuarios a alguna otra página después de un envío exitoso o mostrarles un mensaje personalizado.

Forminator le da la opción de personalizar el comportamiento de envío de formularios visitando Forminator > Forms desde el panel de administración de WordPress. Selecciona el formulario cuyo comportamiento desea modificar y, a continuación, ve a la ficha de Comportamiento. En nuestro ejemplo, simplemente les decimos a los usuarios que apreciamos su envío y que nos dirigiremos a ellos dentro de las 48 horas.

Form Submission BheaviorForm Submission BheaviorForm Submission Bheavior

Reflexiones finales

Nuestro objetivo en este tutorial era mostrarte cómo crear un formulario de contacto para tu sitio web de WordPress con el mínimo esfuerzo. Comenzamos la publicación explicando por qué debes agregar un formulario de contacto a tu sitio web en lugar de simplemente colocar tu información de contacto en una página web. Después de eso, pasamos a discutir cómo podemos usar complementos gratuitos para crear un formulario de contacto básico de WordPress.

Con suerte, ahora deberías tener un formulario de contacto básico que pueda mostrarte la información enviada por los usuarios. Eventualmente, podrás crear formularios de contacto más complicados que te brinden un control granular sobre el flujo de usuarios e información de un paso a otro.

Para obtener más información sobre las opciones para crear formularios de contacto en WordPress, incluidos algunos consejos sobre algunos de los mejores formularios de contacto prémium y los mejores complementos de WordPress de creación de formularios disponibles, consulta algunas de nuestras otras publicaciones aquí en Envato Tuts +.