¿Buscas una forma sencilla de añadir un formulario de contacto personalizado a tu sitio web de WordPress?
Si añade un formulario de contacto a su sitio web, ofrecerá a los visitantes una forma rápida y fiable de ponerse en contacto con usted.
En este artículo, echaremos un vistazo a las ventajas de crear su propio formulario de contacto personalizado, y cómo puede añadir un formulario a su sitio de WordPress, paso a paso.
- ¿Por qué añadir un formulario de contacto personalizado a su sitio web?
- Cómo añadir un formulario de contacto en WordPress
- Paso 1: Elegir un plugin de formulario de contacto
- Paso 2: Instalar y activar WPForms
- Paso 3: Cree su primer formulario
- Paso 4: Personalice los campos del formulario
- Paso 5: Configurar notificaciones y confirmaciones de formularios
- Paso 6: Añadir el formulario de contacto a una página
- Paso 7: Añadir el formulario de contacto a la barra lateral
¿Por qué añadir un formulario de contacto personalizado a su sitio web?
El uso de un formulario de contacto es necesario para cualquier sitio web por algunas razones muy importantes:
- Seguridad: La primera razón, y la más importante, es la seguridad. Al añadir un formulario de contacto a su sitio web, ya no expone su bandeja de entrada de correo electrónico a los spammers.
- Disponibilidad: Con un formulario de contacto, puedes hacer que tus visitantes sientan que siempre estás disponible para ellos. Puedes configurar notificaciones instantáneas o incluso enviar los envíos a otras personas de tu equipo para que respondan.
- Generación de clientes potenciales: Puede utilizar su formulario de contacto para generar más clientes potenciales para su empresa conectándolo a su servicio de boletín electrónico o CRM.
- Organización: Un buen plugin de formulario de contacto también te ayudará a mantener tus contactos organizados. Así, a diferencia de lo que ocurre en tu bandeja de entrada, ya no tendrás que rebuscar entre montones de correos para encontrar uno en concreto.
Si utilizas Elementor, quizás quieras echar un vistazo a esta alternativa Guía para crear un formulario de contacto en Elementor con WPAstra.
¿Estás listo para añadir un formulario de contacto personalizado a tu sitio web? ¡Estás en el lugar adecuado! En este tutorial, le diremos cómo añadir un formulario de contacto personalizado a su sitio en menos de 5 minutos.
¿Está preparado? Empecemos.
Cómo añadir un formulario de contacto en WordPress
Aprenda a añadir un formulario de contacto a su sitio web WordPress en unos sencillos pasos.
Paso 1: Elegir un plugin de formulario de contacto
[Recomendado - WPForms y Plugin gratuito de HubSpot para WordPress]
El primer paso que debe dar es elija un plugin de formulario de contacto sólido fácil de usar y con todas las funciones que necesitas.
WordPress ofrece muchas opciones entre las que elegir. Le recomendamos la Plugin WPForms para WordPress que te permite crear formularios de contacto personalizados con un constructor de arrastrar y soltar y añadirlos a tu sitio en menos de 5 minutos.
Puedes empezar con la versión lite, que es ideal para crear un formulario de contacto sencillo. Pero si quieres funciones más potentes para hacer crecer tu negocio, puedes actualizarla a la versión premium, que tiene un precio asequible.
Otra gran opción es Plugin gratuito de HubSpot para WordPress que puede utilizar para captar y atraer fácilmente a los visitantes de su sitio web con un formulario de contacto. El plugin de HubSpot viene con un CRM gratuito lo que significa que puedes gestionar fácilmente tus contactos, segmentarlos en listas y ver todas las interacciones que han tenido con tu sitio web. El plugin está diseñado para mantener para cada registro de contacto una línea de tiempo actualizada de las páginas vistas del contacto, conversaciones de chat en directoenvío de formularios, etc.
Sigamos adelante y veamos cómo utilizar el plugin WPForms para añadir un formulario de contacto a su sitio WordPress.
Paso 2: Instalar y activar WPForms
Para empezar, descargar WPForms e instalarlo en su sitio web. Para ello acceda a su panel de WordPress y haga clic en Plugins " Añadir nuevo " Upload Plugin.
Ahora navega por tu ordenador y sube la carpeta comprimida que acabas de descargar. Una vez cargado el plugin, haga clic en el botón Activar para que empiece a funcionar.
Ahora está listo para empezar a crear sus formularios personalizados.
Paso 3: Cree su primer formulario
Después de instalar y activar el plugin, vaya a su panel de WordPress y haga clic en WPForms " Añadir nuevo
Esto lo llevará a la página de configuración de WPForms. Aquí puede empezar por añadir un nombre a su formulario.
Verás varias opciones de plantilla justo debajo del campo donde has añadido el nombre del formulario. En función de sus requisitos, seleccione la plantilla que mejor se adapte a sus necesidades.
Si desea crear un formulario de contacto desde cero seleccione la opción Formulario en blanco opción. Para este tutorial, vamos a seleccionar la opción Formulario de contacto sencillo plantilla. Todas las plantillas aquí vienen pre-construidas con el fin de ayudarle a empezar rápidamente.
Una vez seleccionada la plantilla serás redirigido al constructor de páginas WPForms, donde podrás empezar a personalizar los campos de tu formulario.
Paso 4: Personalice los campos del formulario
Ahora estará en la sección de campos del constructor de páginas WPForms.
Verás los campos en la parte izquierda de la pantalla y en la parte derecha verás una vista previa de tu formulario.
Puede utilizar la plantilla básica del formulario de contacto tal cual, o ampliarla y personalizarla según sus necesidades. Puedes simplemente arrastrar un campo desde tu izquierda y soltarlo en la vista previa del formulario.
Los campos se dividen en 3 categorías. Puede elegir los campos básicos de la Campos estándar sección. En la sección Campos de fantasíapuede añadir su número de contacto, dirección, URL del sitio web, contraseña, etc.
La última categoría es la Campos de pago. Los campos de esta sección están diseñados para facilitarle la aceptación de pagos. Dependiendo de sus necesidades, puede añadir los campos que desee arrastrándolos desde la izquierda y soltándolos en la sección de vista previa de la derecha.
Si lo desea, también puede configurar los detalles y ajustes de sus campos. Para ello, haga clic en Campos Opciones.
Para editar un campo, haga clic en esa opción de campo en particular en la parte de vista previa de la pantalla. A continuación, puedes editar la etiqueta del campo, el formato, la descripción, etc. en el constructor de páginas de la izquierda.
Si quieres cambiar el orden de los campos también es posible. Simplemente arrastre los campos y suéltelos en el orden que desee.
Una vez editados los campos, haga clic en el botón Guardar en la esquina superior derecha de la pantalla para guardar los cambios.
Paso 5: Configurar notificaciones y confirmaciones de formularios
Una vez que hayas terminado de añadir los campos y reordenarlos, es hora de configurar las notificaciones y confirmaciones del formulario. Para ello vaya a Ajustes " Confirmación. Seleccione ahora el tipo de confirmación que desea haciendo clic en la flecha desplegable.
WPForms le permite añadir 3 tipos de confirmación diferentes. Puede añadir un -
- Mensaje
- Mostrar una página en su sitio
- Redirigirlos a una nueva URL
Por defecto WPForms le permite mostrar a sus visitantes un mensaje de confirmación. Aquí puede agregar un mensaje para sus visitantes que aparecerá en su pantalla después de que envíen el formulario. Puede agregar una nota de agradecimiento aquí o un mensaje confirmando el envío.
Una vez que haya terminado de añadir el mensaje, haga clic en el botón Guardar para no perder la configuración.
El siguiente paso es configurar las notificaciones del formulario. Para ello, vaya a Ajustes " Notificaciones.
Activar las notificaciones le avisa cada vez que un visitante envía un formulario en su sitio. Todos los campos de las notificaciones están predefinidos. Esto hace que sea ideal para los principiantes para empezar.
Por defecto, estas notificaciones se envían a la dirección de correo electrónico del administrador que hayas configurado en el sitio. Pero tiene la opción de añadir correos electrónicos personalizados también. Si quieres añadir varios correos, sepáralos con comas.
Tendrás el nombre de tu formulario rellenado previamente en el asunto del correo electrónico. El campo del nombre del formulario se rellena automáticamente con el nombre de tu usuario. Cuando respondas a una consulta, ésta irá al correo electrónico que tu usuario rellenó en el formulario de contacto.
También puede optar por notificar a los visitantes sobre su envío utilizando Etiquetas inteligentes. Así sabrán que has recibido su formulario y que te pondrás en contacto con ellos en breve.
Paso 6: Añadir el formulario de contacto a una página
Ahora que ha creado el formulario y configurado sus notificaciones y confirmaciones, es el momento de añadirlo a una página de su sitio web. Puede mostrar su formulario en cualquier lugar de su sitio web. Puede estar en una de las entradas de tu blog, en una página de contacto o incluso en tu barra lateral.
Puede hacerlo en una página existente o crear una nueva desde cero. Sea cual sea la opción que elija, sólo tiene que añadir su código corto WPForms a la página.
Vamos a crear una página nueva yendo a su panel de control y haciendo clic en Páginas " Añadir nuevo.
Para añadir su formulario de contacto a la página, puede añadir un nuevo bloque haciendo clic en el icono + (más) de la esquina superior izquierda.
A continuación, busque el bloque WPForms.
En el campo desplegable, seleccione el formulario que acaba de crear y aparecerá en la página.
Ya está. Ahora puedes publicar tu página para que tus visitantes puedan utilizar tu nuevo formulario.
Si también quieres añadir tu formulario a la barra lateral, sigue los pasos que se indican a continuación.
Paso 7: Añadir el formulario de contacto a la barra lateral
Con WPForms también tendrás un widget de formulario de contacto. Puedes usar este widget para añadir tus formularios en una barra lateral o en cualquier otra zona de tu tema preparada para widgets. Para ello, vaya a su panel de WordPress y haga clic en Apariencia " Widgets.
Sólo tienes que arrastrarlo a cualquier área de widgets de tu tema. A continuación, seleccione el formulario que desea mostrar haciendo clic en la flecha desplegable.
Ahora añade un título a tu formulario. Haga clic en el botón Guardar para que el formulario empiece a mostrarse en tu widget. Y ya está.
Así de sencillo es crear un formulario de contacto personalizado con WPForms. Entonces, ¿qué estás esperando? Descargar WPForms ahora y añada un formulario a su sitio en 5 minutos o menos.
Divulgación: Este blog puede contener enlaces de afiliados. Si realiza una compra a través de uno de estos enlaces, es posible que recibamos una pequeña comisión. Leer información. Tenga la seguridad de que sólo recomendamos productos que hemos utilizado personalmente y que creemos que aportarán valor a nuestros lectores. Gracias por su apoyo.
Gracias por esta guía tan detallada.
Tengo un sitio relacionado con los exámenes y quiero recoger los datos del usuario (Email y número de móvil). Por lo tanto, ¿Cómo agregar 2 formularios de contacto diferentes a cada puesto?
Esperando su respuesta.
Hola Prabhat,
Para añadir varios formularios de contacto, tendrá que crear varios formularios de contacto utilizando el plugin de formularios de contacto de su elección.
Como en este post, hemos creado un formulario de contacto utilizando WPForms. Usted también puede crear más en él y luego incrustar el código corto de cada forma en la ubicación que desea mostrar en.
Si necesita más ayuda, le sugiero que abra un ticket en nuestra página web centro de asistencia.
Hola,
¿Cómo es que no recomienda su propio plugin - ConvertPro para formularios de contacto?
Hola Alfred,
Convert Pro es un plugin de generación de leads mientras que WPForms es un plugin de formularios de contacto. Convertir Pro ayuda a aumentar suscriptores y conversiones. Usted puede obtener todas las opciones necesarias para obtener más suscriptores con Convert Pro. Dado que tanto los plugins sirven el propósito diferente que no se menciona en este artículo 🙂.
El sitio web del tema Astra se superpone a la cabecera con el logotipo cuando se abre en modo móvil.
Hola Lalit,
Por favor, abra un ticket en nuestro centro de asistencia¿para que podamos echar un vistazo más de cerca y ayudar?
Hola
Cuando hago clic en enviar, no recibo el correo electrónico, incluso si el correo electrónico del administrador es correcto.
¿Hay algo que podamos comprobar?
Hola Mert,
Por favor, confirme si tiene la configuración SMTP correctamente 🙂 .
Tengo el mismo problema. Cómo puedo asegurarme de que el SMTP está configurado correctamente?
Utiliza herramientas como "SMTP Test Tool" disponible en línea para asegurarte de que todo funciona como se espera.
Hola, tengo un problema con las fuentes. He estilizado el formulario con css y funciona correctamente en mi portátil (Macbook), pero no en mi teléfono (iPhone 13) ni en dispositivos Windows, así que supongo que no funciona correctamente en ningún otro dispositivo. Se supone que es Roc Grotesk fuente, pero en esos dispositivos es Times New Roman. ¿Pueden ayudarme con esto?
Artículo muy instructivo. Pude usar el artículo y crear el formulario que deseaba usando WPForms Lite.
Usted ha mencionado buenos puntos en su artículo. Me gustaría añadir algunos pasos cortos para la adición de formularios de contacto en el sitio web wordpress. Espero que sus usuarios les gustaría.
1.Instale el plugin Contact Form 7
2.Crear un nuevo formulario de contacto
3.Personalizar el formulario de contacto
4.Generar el shortcode del formulario
5.Añade el formulario de contacto a una página o entrada
6.Probar el formulario de contacto
Para una persona no técnica, puede ser difícil utilizar wordpress. Yo personalmente conozco una empresa de TI como tecnologías Alakmalak, que le proporcionará los mejores servicios para su sitio web wordpress.