Cómo diseñar y personalizar el formulario de contacto de Elementor

how_to_style_and_customize_elementor_contact_form_banner_image

Con Elementor, crear formularios de contacto ahora es más fácil que nunca. Todo lo que necesitas es arrastrar y soltar algunos widgets, personalizar la configuración según tus necesidades y listo.

Sin embargo, personalizar o diseñar un formulario de contacto de Elementor de manera efectiva puede cambiar mucho el aspecto de sus formularios de contacto. Un formulario de contacto simple y fácil de entender siempre obtendrá más respuestas que uno oscuro y desordenado. Por eso el formulario personalizado de Elementor es tan importante.

Simplemente puede crear, diseñar y personalizar Elementor. Sin embargo, en este artículo, aprenderá cómo personalizar un formulario de contacto de elemento o con el creador de formularios MetForm.

¿Por qué debería utilizar un formulario de contacto de Elementor?

Aumentar la tasa de conversión
Cuando un usuario encuentra la manera de mantenerse en contacto contigo y hacerte preguntas relevantes sobre los productos o servicios que ofreces, la posibilidad de conversión aumenta en gran medida. También disminuye la tasa de rebote. 

Obtener comentarios: Un formulario de contacto personalizado de Elementor puede ser una excelente manera de escuchar a los usuarios de su sitio. Si desea mejorar su servicio o enriquecer la experiencia del usuario, considere agregar un formulario de comentarios a su sitio web.

Formulario personalizado de Elementor para recibir comentarios
Reciba comentarios de su audiencia con un formulario de contacto

Mantenga un registro de las consultas: Cuando cualquier visitante de su sitio web le envía una consulta a través de un formulario de contacto personalizado de WordPress, se envía a un correo electrónico que haya proporcionado o a la lista de entradas de su panel de WordPress. Le ayuda a realizar un seguimiento de las consultas fácilmente. 

Filtrar spam: Un formulario de contacto de Elementor lo salvará de los spammers. Si publica su dirección de correo electrónico en su sitio web, existe la posibilidad de que reciba innumerables mensajes de spam.
Como resultado, es posible que no encuentre los mensajes importantes cuando los necesite. Un formulario de contacto en Elementor con una función de protección contra spam solo entregará mensajes de humanos reales, no de bots o spammers. 

formulario personalizado de Elementor para filtrar spam
Un formulario de contacto puede salvarte de toneladas de spam

Uso múltiple: Puede aprovechar un formulario de contacto por diversas razones. Ya sea para recibir comentarios, solicitudes de empleo, consultas de ventas o solicitudes de soporte, todo lo que necesita en su sitio web es un formulario de contacto. 

¿Qué necesita para diseñar un formulario personalizado de Elementor?

Solo necesita dos complementos en su sitio web de WordPress para comenzar a crear formularios de contacto de Elementor:

  1. Creador de páginas Elementor
  2. Creador de formularios MetForm

En esta guía práctica, le explicaré cómo crear un formulario de contacto de Elementor utilizando el creador de páginas Elementor y MetForm.

MetForm, que es un complemento de formulario de contacto personalizado, tiene una versión profesional y gratuita. Si bien la versión gratuita tiene todas las funciones básicas que necesitas para crear un formulario de contacto de Elementor, la versión pro te permitirá explorar algunos campos y funciones avanzadas. Además, difícilmente encontrará estas funciones avanzadas en ningún otro formulario de contacto gratuito o profesional de Elementor, por ejemplo Elementor Contact Form 7, wpfroms, Ninja Forms, etc.

Cuando se trata de Elementor, puedes usar Elementor Pro o la versión gratuita. 

 Sin más, sigamos adelante:

Instale el complemento de formulario de contacto personalizado de MetForm

Si tiene Elementor instalado, lo que necesita es instalar el creador de formularios MetForm en su sitio de WordPress. Es un complemento gratuito de creación de formularios de WordPress que presenta las funcionalidades básicas y avanzadas de un creador de formularios estándar. Este es el proceso de instalación de MetForm: 

  1. Desde su panel de administración de WordPress, vaya a ComplementosAgregar nuevo 
  2. Buscar "YoFormo”en el campo de complementos de búsqueda superior derecho.
  3. Busque MetForm en el resultado buscado y haga clic en "Instalar ahora
  4. Activar MetForm.

Cree y personalice el formulario de contacto de Elementor desde cero

Ahora que tiene todo lo que necesita para crear formularios de contacto personalizados de WordPress con Elementor, sigamos adelante y creemos un formulario de contacto desde cero.

Paso 1

Cree una página de formulario de contacto de Elementor yendo a Páginas ➜ Agregar nuevo. Asigne al formulario un título adecuado y luego haga clic en "Editar con Elementor”. 

Paso 2

En el campo de búsqueda del widget Elementor, busque MetForm. Arrástrelo y suéltelo en el área de contenido de Elementor. 

Paso 3

Desde la izquierda, haga clic en “Editar formulario”. 

Si está creando un formulario por primera vez o desea crear un formulario completamente nuevo, haga clic en "Nuevo“. 

Si ha guardado el 'de' que creó anteriormente, puede editarlo haciendo clic en "Seleccionar formulario“. 

Etapa 4

Para comenzar a crear un formulario desde cero, simplemente haga clic en la plantilla de formulario de contacto en blanco. Si elige utilizar la biblioteca de plantillas de formularios de contacto prediseñadas que ofrece MetForm, puede elegir cualquier formulario de la lista de plantillas de formulario.

Como empezaremos desde cero, sigamos adelante con la plantilla en blanco para el formulario de contacto.

Paso 5

Ahora verá una ventana emergente con el área de contenido y el área de widgets de Elementor.

El área de widgets de Elementor consta de todos los widgets de MetForm y Elementor. 

Para comenzar a crear el formulario, agregue nuevas secciones desde el área de contenido de Elementor según los requisitos del formulario que va a crear.

Paso-6

Arrastra y suelta los widgets que necesitas para darle forma a tu formulario. 

Cómo diseñar y personalizar los elementos del formulario de contacto de Elementor

Ahora que ha arrastrado y soltado todos los widgets que necesita en su formulario elementor, puede editarlos a su gusto. 

Para personalizar cualquier campo o botón del formulario, simplemente haga clic en el botón o campo del área de contenido de Elementor

Puede realizar cambios en el contenido y el estilo de los campos del formulario. Además de eso, también puedes explorar la pestaña avanzada para agregar más funcionalidades. Cuando haya terminado, publique la página del formulario de contacto. 

Personalizando todo el formulario de contacto en Elementor

Si su objetivo es personalizar todo el formulario que está creando, explore la configuración del formulario que incluye MetForm. 

Bajo la Configuración general, hay opciones para personalizar las siguientes configuraciones principales de un formulario: 

  1. Título del formulario
  2. Mensaje de éxito 
  3. Inicio de sesión requerido (Sí/No)
  4. Capturar datos del navegador del usuario (Sí/No)
  5. Ocultar formulario después del envío (Sí/No)
  6. Almacenar entradas de formulario en la base de datos (Sí/No)
  7. Título de entrada
  8. Limitar el total de entradas (establecer el número)
  9. Contar vistas (Sí/No)
  10. Detener el desplazamiento vertical (activar/desactivar)
  11. Redirigir a (donde se redirigirá a los usuarios después del envío del formulario)

Enviar un correo de confirmación a los usuarios con una copia del envío

Si desea enviar un correo de confirmación a las personas que completan el formulario de contacto personalizado de WordPress, vaya al formulario de MetForm. Configuración ➜ Confirmación Pestaña. Alternar “Correo de confirmación al usuario”A Sí y luego complete los siguientes campos: 

  1. Asunto del email
  2. Email de
  3. Responder por correo electrónico a
  4. mensaje de agradecimiento

¿Cómo notificar al administrador sobre el envío de un nuevo formulario? 

Cuando se envía un nuevo formulario de contacto, generalmente se guarda en la base de datos de entradas de MetForm (si está habilitado desde la configuración general). 

Sin embargo, si desea recibir notificaciones sobre nuevos envíos, también puede personalizarlo desde el Pestaña de notificación de la configuración del formulario de MetForm. La pestaña de notificación viene con los siguientes campos: 

  1. Correo de notificación al administrador (alternar en)
  2. Asunto del email
  3. Email para
  4. Email de
  5. Responder por correo electrónico a
  6. Nota de administrador

¿Qué campos de formulario debería utilizar en su formulario de contacto de Elementor?

Los diferentes tipos de formularios requieren diferentes campos de formulario. Si está creando un formulario de contacto simple en Elementor, solo unos pocos widgets simples como texto, correo electrónico, teléfono, captcha y botón de envío son suficientes para usted. 

Por otro lado, si está buscando crear formularios como formulario de admisión, formulario de evento, formulario de reserva, etc., es posible que necesite utilizar diferentes campos de formulario y personalizarlos en consecuencia. 

Para facilitarle el proceso de elegir los campos de formulario correctos, MetForm ofrece docenas de plantillas para crear una amplia variedad de tipos de formularios, como formulario de registro, formulario de encuesta de WordPress, formulario de reserva, etc. Consulta el plantillas de formulario de demostración aquí. En esta lista, también encontrará plantillas de formulario de contacto gratuitas de Elementor para crear formularios de contacto en unos segundos.

¿Cómo integrar los formularios de contacto personalizados de Elementor en cualquier página? 

Si no desea crear una página para su formulario de contacto de Elementor, sino incrustar el formulario en cualquier página, MetForm también le permite hacerlo. 

MetForm crea códigos cortos individuales para todos los formularios que crea. Además, también tendrá códigos cortos de formulario de contacto personalizados en MetForm. Para encontrar el código corto de un formulario de contacto específico que haya creado, vaya al Panel de administración de WordPress ➜ MetForm ➜ Formularios.

cómo incrustar formularios personalizados de Elementor
Copie el código abreviado del formulario de contacto personalizado e incruste el formulario en cualquier página o publicación

Allí encontrará códigos cortos de cualquier forma. Simplemente copie el código corto y luego péguelo en la página donde desea insertar el formulario de contacto personalizado de WordPress. ¡Bingo! 

Integraciones que puede utilizar para el formulario de contacto de Elementor

Si utiliza MetForm, puede integrar la API REST para enviar datos a una API de terceros. Aparte de eso, puedes integrar el formulario con Mailchimp, Google Sheet, MailPoet, Aweber, ConvertKit, GetResponse, ActiveCampaign, Zapier y Slack.

Establecer si los usuarios necesitan registrarse/iniciar sesión para completar un formulario

Por lo general, cualquiera puede completar un formulario que usted cree, a menos que decida que solo permitirá que los usuarios registrados o que hayan iniciado sesión lo completen. 

formulario de inicio de sesión personalizado de Elementor
Activar/desactivar los requisitos de inicio de sesión y registro con MetForm

Por lo tanto, si desea que solo los usuarios que hayan iniciado sesión completen el formulario, habilite el sistema de inicio de sesión. 

Por otro lado, también puedes permitir que los usuarios se registren y luego completen el formulario. 

Para habilitar el inicio de sesión y el registro del usuario, vaya a Configuración del formulario y luego haga clic en la pestaña Autenticación. Tendrá la opción de habilitar y deshabilitar el inicio de sesión y el registro de usuario para su formulario de elementor.

¿Cómo agregar métodos de pago a un formulario creado con Elementor? 

Si está utilizando MetForm para crear su formulario de contacto de Elementor, vaya a Configuración de formularios y luego haga clic en el Pago pestaña. 

formulario de pago personalizado con Elementor para crear un formulario de contacto personalizado de Elementor
Integración de métodos de pago con MetForm

Aquí encontrarás métodos de pago como PayPal y Raya que puede utilizar para cobrar los pagos de sus clientes. Tienes que configurarlos manualmente y luego alternar el método de pago. EN para los formularios con los que desea recibir pagos. 

¿Cómo integrar sistemas CRM a los formularios de contacto de Elementor?

Puedes integrar tu formulario de contacto de elementor con Contacto Hubspot, Formularios de Hubspot, Contacto Zoho, y Ayuda a explorar

integrar el formulario de contacto personalizado de Elementor con CRM
Integre sus CRM favoritos con MetForm

Lo que todos deben hacer es integrar los CRM que deseen habilitándolos y configurándolos desde el CRM pestaña.

Cómo convertir envíos de formularios de contacto en publicaciones

Es una de las mejores características de MetForm. MetForm le permite convertir los envíos de formularios en publicaciones individuales. Simplemente vaya a Configuración del formulario y luego haga clic en la pestaña "Publicar". Active el Formulario para publicar y realice los ajustes necesarios. Eso es tan simple como eso.

Cree una publicación con entradas de formulario para crear el formulario de contacto de Elementor
Crear una publicación con las entradas del formulario.

Ultimas palabras

A estas alturas ya conoce docenas de formas de crear un formulario de Elementor o un formulario personalizado de Elementor. Todo lo que necesitas es el creador de páginas Elementor y el creador de formularios MetForm. Así que no esperes más. Comience a crear sus formularios de contacto personalizados de Elementor y personalice los formularios de Elementor a su gusto. Y por último, pero no menos importante, también puedes crear una página de contacto completa usando MetForm. 

Si tiene alguna confusión o tiene alguna pregunta, no dude en hacérnoslo saber a través del cuadro de comentarios.


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *