Los formularios son esenciales para cualquier sitio web, desde formularios de contacto simples hasta flujos de registro complejos de varios pasos. Elementor Pro incluye un widget de formulario integrado que elimina la necesidad de un plugin de formulario separado en muchos casos. En esta guía, cubrimos cómo crear formularios de contacto, formularios de registro y formularios de varios pasos utilizando Elementor Pro, junto con opciones de integración para servicios de marketing por correo electrónico y CRM.
Este tutorial requiere Elementor Pro. La versión gratuita de Elementor no incluye el widget de formulario.
Descripción general del widget de formulario de Elementor
El widget de formulario de Elementor admite estos tipos de campos:
| Tipo de campo | Caso de uso | Notas |
|---|---|---|
| Texto | Nombre, empresa, línea de asunto | Entrada de texto de una sola línea |
| Correo electrónico | Recopilación de direcciones de correo electrónico | Incluye validación de formato de correo electrónico |
| Área de texto | Cuerpo del mensaje, comentarios, descripciones | Texto de varias líneas con filas configurables |
| Tel | Números de teléfono | Activa el teclado numérico en móviles |
| Número | Cantidades, presupuestos, calificaciones | Validación de min/max/paso |
| URL | Direcciones de sitios web | Validación de formato de URL |
| Seleccionar | Selecciones desplegables (país, categoría) | Selección única o múltiple |
| Radio | Elección única entre opciones (tipo de servicio) | Opciones visibles sin desplegable |
| Checkbox | Selecciones múltiples (intereses, servicios) | Selecciones múltiples permitidas |
| Fecha | Fechas de citas, fechas de eventos | Selector de fecha nativo |
| Hora | Programación de citas | Control de selección de hora |
| Subida de archivos | Envío de currículum, documento, imagen | Tipos de archivo y límites de tamaño configurables |
| Aceptación | Términos y condiciones, consentimiento GDPR | Checkbox requerido con enlace |
| Oculto | Datos de seguimiento (URL de página, referente) | No visible para el usuario |
| reCAPTCHA | Protección contra spam | Checkbox v2 o invisible v3 |
| Honeypot | Anti-spam (invisible para humanos) | Campo oculto que atrapa bots |
Creando un formulario de contacto
Paso 1: Agregar el widget de formulario
- Abre cualquier página en el editor de Elementor
- Busca "Formulario" en el panel de widgets
- Arrastra el widget de formulario a tu diseño
- El formulario predeterminado incluye campos de Nombre, Correo electrónico y Mensaje
Paso 2: Configurar los campos del formulario
Para un formulario de contacto estándar, esta configuración de campos funciona bien:
- Nombre (Campo de texto, requerido) – Texto de marcador: "Tu nombre"
- Correo electrónico (Campo de correo electrónico, requerido) – Texto de marcador: "[email protected]"
- Asunto (Campo de texto, opcional) – Texto de marcador: "¿Cómo podemos ayudar?"
- Mensaje (Campo de área de texto, requerido) – Texto de marcador: "Cuéntanos sobre tu proyecto...", Filas: 5
- reCAPTCHA o Honeypot para protección contra spam
Paso 3: Configurar acciones después de enviar
Bajo la sección "Acciones después de enviar", configura lo que sucede cuando un usuario envía el formulario: For related information, see our guide on Elementor complete guide.
- Correo electrónico: Envía los datos del formulario a tu dirección de correo electrónico (o múltiples direcciones)
- Redirigir: Envía al usuario a una página de agradecimiento después del envío
- Popup: Muestra un popup de confirmación
- Webhook: Envía los datos del formulario a una URL externa (Zapier, Make, API personalizada)
- Mailchimp / ConvertKit / Drip: Agrega suscriptores a listas de marketing por correo electrónico
- Slack: Envía notificaciones a un canal de Slack
- Discord: Envía notificaciones a un webhook de Discord
Paso 4: Estilizar el formulario
En la pestaña Estilo, personaliza la apariencia visual: For related information, see our guide on Elementor templates and kits.
- Diseño del formulario
- Campos apilados: Campos apilados (ancho completo) o en línea (uno al lado del otro)
- Estilo de campo: Borde, color de fondo, padding, radio de borde, color del estado de enfoque
- Estilo de etiqueta: Familia de fuentes, tamaño, color, espaciado
- Estilo de botón: Color de fondo, color de texto, borde, efectos al pasar el mouse, opción de ancho completo
- Mensajes: Colores y tipografía de mensajes de éxito y error
- Agrega un widget de Formulario a tu página
- En la lista de campos del formulario, agrega un campo de tipo "Paso" entre grupos de campos
- Cada campo de Paso crea un nuevo paso con un botón de "Siguiente" y "Anterior"
- Estructura de ejemplo:
- Paso 1: Nombre, Correo Electrónico, Teléfono (Información Personal)
- Paso 2: Empresa, Presupuesto, Cronograma (Detalles del Proyecto)
- Paso 3: Mensaje, Carga de Archivo (Información Adicional)
- Agrega un widget de Formulario y configura los campos (Nombre de Usuario, Correo Electrónico, Contraseña)
- Bajo "Acciones Después de Enviar", agrega la acción "Registrar"
- Asocia cada campo del formulario con el campo correspondiente de usuario de WordPress
- Establece el rol de usuario predeterminado para nuevos registros
- Opcionalmente, redirige a los usuarios a su página de cuenta después del registro
- Google reCAPTCHA v3: Detección de spam invisible que puntúa las presentaciones sin interacción del usuario. Recomendado para la mayoría de los formularios
- reCAPTCHA v2: La casilla de verificación "No soy un robot". Más visible pero puede reducir las finalizaciones de formularios
- Campo Honeypot: Un campo invisible que los bots completan. Si el campo contiene datos, la presentación es rechazada. No se requiere interacción del usuario
- Campo de Aceptación: Una casilla de verificación obligatoria (consentimiento GDPR, aceptación de términos) que también actúa como un disuasivo para bots
Creando un Formulario de Múltiples Pasos
Los formularios de múltiples pasos son útiles para formularios largos (registros, solicitudes, encuestas) donde mostrar todos los campos a la vez puede abrumar a los usuarios. Elementor Pro admite formularios de múltiples pasos de forma nativa. For related information, see our guide on creating landing pages with Elementor.
Cómo Configurar Pasos
Los formularios de múltiples pasos muestran un indicador de progreso que muestra en qué paso se encuentra el usuario. Esto reduce la complejidad percibida y mejora las tasas de finalización en comparación con mostrar todos los campos a la vez.
Creando un Formulario de Registro de Usuario
Elementor Pro puede crear formularios de registro de usuario de WordPress sin un plugin separado:
Nota: WordPress requiere que un administrador apruebe nuevos usuarios por defecto. Puedes cambiar esto en Configuración → General → Membresía si deseas que los usuarios se registren libremente.
Integración con Servicios de Marketing por Correo Electrónico
Elementor Pro se integra directamente con plataformas populares de marketing por correo electrónico:
| Servicio | Tipo de Integración | Pasos de Configuración |
|---|---|---|
| Mailchimp | Nativo (integrado) | Agregar clave API → Seleccionar lista → Mapear campos |
| ConvertKit | Nativo (integrado) | Agregar clave API → Seleccionar formulario → Mapear campos |
| ActiveCampaign | Nativo (integrado) | Agregar credenciales API → Seleccionar lista → Mapear campos |
| Drip | Nativo (integrado) | Agregar token API → Seleccionar cuenta → Mapear campos |
| GetResponse | Nativo (integrado) | Agregar clave API → Seleccionar campaña → Mapear campos |
| MailerLite | Nativo (integrado) | Agregar clave API → Seleccionar grupo → Mapear campos |
| HubSpot | Vía Webhook | Crear conexión Zapier/Make con acción de webhook |
Para cada integración, el proceso es: ingresa la clave API de tu servicio en la configuración de integración de Elementor, luego selecciona el servicio como una "Acción Después de Enviar" en tu formulario. Mapea los campos de tu formulario a los campos del servicio, y los suscriptores se agregarán automáticamente cuando se envíe el formulario.
Estrategias de Protección contra Spam
Los formularios de contacto atraen bots de spam. Elementor Pro proporciona varias opciones de prevención de spam:
Recomendamos usar reCAPTCHA v3 combinado con un campo Honeypot. Esto proporciona dos capas de protección contra spam sin ningún impacto visible.
en la experiencia del usuario.
Elementor Forms vs Plugins de Formulario Dedicados
| Característica | Elementor Forms | Gravity Forms | WPForms |
|---|---|---|---|
| Constructor Visual | Dentro del editor de Elementor | Arrastrar y soltar separado | Arrastrar y soltar separado |
| Lógica Condicional | Básica (mostrar/ocultar campos) | Avanzada | Avanzada |
| Integración de Pagos | Botón de PayPal | Stripe, PayPal, Square | Stripe, PayPal, Square |
| Cálculos | No | Sí | Sí (Pro) |
| Múltiples Pasos | Sí | Sí | Sí |
| Subida de Archivos | Sí | Sí | Sí |
| Gestión de Entradas | A través de envíos de Elementor | Gestor de entradas completo | Gestor de entradas completo |
| Requiere Constructor de Páginas | Sí (Elementor Pro) | No | No |
Elementor Forms es suficiente para formularios de contacto, inscripciones a boletines y formularios de registro simples. Para formularios complejos que requieren procesamiento de pagos, lógica condicional avanzada o gestión sofisticada de entradas, los plugins de formulario dedicados como Gravity Forms o WPForms son más apropiados.
Preguntas Frecuentes
¿Puedo usar formularios de Elementor sin Elementor Pro?
No. El widget de Formulario es exclusivo de Elementor Pro. Si necesitas formularios con la versión gratuita de Elementor, utiliza un plugin de formulario separado como Contact Form 7 (gratis), WPForms Lite (gratis) o Gravity Forms (premium).
¿Dónde se almacenan las presentaciones de formularios de Elementor?
Las presentaciones de formularios se almacenan en la base de datos de WordPress y son accesibles en Elementor → Presentaciones en el panel de administración. Puedes ver, exportar (CSV) y eliminar presentaciones. Las presentaciones también se envían a las direcciones de correo electrónico que configures en la acción de Correo Electrónico.
¿Pueden los formularios de Elementor aceptar subidas de archivos?
Sí. Agrega un tipo de campo de Subida de Archivos a tu formulario. Puedes configurar los tipos de archivos aceptados (PDF, JPG, PNG, DOCX, etc.) y el tamaño máximo del archivo. Los archivos subidos se almacenan en la biblioteca de medios de WordPress y se vinculan a la presentación del formulario.
¿Cómo añado lógica condicional a los formularios de Elementor?
Elementor Pro admite lógica condicional básica: mostrar u ocultar campos según el valor de otro campo. En la configuración del campo, habilita "Condicional" y establece las condiciones (por ejemplo, mostrar el campo "Empresa" solo cuando se selecciona el botón de opción "Soy un negocio"). Para lógica condicional avanzada (cálculos, condiciones de múltiples niveles), un plugin de formulario dedicado puede ser más adecuado.
¿Puedo crear formularios emergentes con Elementor?
Sí. Crea una plantilla emergente en Elementor, agrega un widget de Formulario dentro de ella y establece condiciones de activación (clic, porcentaje de desplazamiento, intención de salida, retraso de tiempo). Esto es útil para inscripciones a boletines, imanes de clientes y ofertas promocionales sin añadir un formulario al diseño de la página principal.
¿Cómo prevengo el spam en los formularios de Elementor?
Utiliza Google reCAPTCHA v3 (invisible) combinado con un campo Honeypot para una protección de dos capas. Esto bloquea bots automatizados sin añadir fricción para los usuarios reales. Para formularios con alto volumen de spam, considera añadir un campo de Aceptación (casilla de verificación requerida) como una tercera capa.
Obtén Elementor Pro con Constructor de Formularios
Accede al widget de Formulario, Constructor de Temas, Constructor de WooCommerce y más de 100 widgets Pro. Crea formularios visualmente sin plugins adicionales.
Explora Elementor Pro →
