Soporte prioritario
Help Center > Themes > Tema Hello Biz > Formulario Lite

Formulario Lite

Última actualización: septiembre 3, 2025

Esta publicación ha sido traducida mediante traducción automática, por lo que puede haber ligeras inexactitudes o diferencias en la redacción en comparación con el original. Pedimos disculpas por cualquier inconveniente que esto pueda causar. Por favor, contáctenos si necesita que aclaremos algo para usted.

Añadir el widget

Para acceder y usar un widget:

  1. En el editor de Elementor, haga clic en +.
    Se muestran todos los widgets disponibles.

  2. Haga clic o arrastre el widget al lienzo. Para obtener más información, consulte Añadir elementos a una página.

¿Qué es el widget Formulario Lite?

Recopilar información de los visitantes puede ser una de las cosas más importantes que su sitio web puede hacer por usted.

El widget Formulario Lite le permite crear de forma rápida y eficiente un formulario que permite a los visitantes enviar información que se le envía por correo electrónico y se almacena en su área de administración de WP.

Vea todas las opciones disponibles con el widget Formulario Lite.

Caso de uso común

Alex quiere aceptar reservas por correo electrónico para su bar deportivo. Ponen una llamada a la acción en su página de inicio que está vinculada a un formulario de reservas. Cuando los usuarios completan el formulario con una solicitud de reserva, se envía a la dirección de correo electrónico del bar para que Alex pueda reservar una mesa.

Casos de uso adicionales

  • Haga que los visitantes rellenen un formulario para suscribirse a su boletín.
  • Recopile solicitudes de empleo utilizando un formulario en su sitio.
  • Los visitantes de su sitio pueden enviar un formulario para que uno de sus representantes pueda ponerse en contacto con ellos.

Añadir un widget de formulario lite: paso a paso

En el siguiente ejemplo, crearemos un formulario de reservas. Los clientes que deseen reservar una mesa rellenan el formulario y, cuando lo envían, el propietario del bar, Alex, recibirá un correo electrónico. La información también estará disponible en el área de administración de WP.

Añadir un formulario

Para añadir un widget Formulario Lite:

  1. Añada un widget Formulario Lite al lienzo.
  2. Seleccione uno de los diseños de formulario preestablecidos.
  3. Abra el campo Texto.
  4. En el panel, en el cuadro de texto Encabezado, introduzca ¡Reserve ahora!

  5. En el cuadro de texto Descripción, introduzca Garantice su lugar enviándonos una solicitud de reserva.
    El widget Formulario Lite tiene campos para Nombre, Correo electrónico y Mensaje de forma predeterminada. Sin embargo, también nos gustaría llamar a la gente para confirmar su reserva, así que añadiremos un campo de Teléfono.
  6. En el panel, abra la sección Campos del formulario.
  7. Haga clic en Añadir elemento.
  8. Utilice el menú desplegable Tipo, seleccione Tel.
  9. En el campo de texto Etiqueta, introduzca Teléfono.
  10. Active la opción de requerido a Sí.
  11. Arrastre el nuevo campo para que esté debajo del campo Correo electrónico.
    Ahora nos aseguraremos de que los envíos del formulario vayan al lugar correcto.
  12. Cierre la sección Campos del formulario.
  13. Abra el campo Acciones después del envío.
  14. En el campo Para, introduzca su dirección de correo electrónico.
  15. En la línea de Asunto, introduzca Solicitud de reserva.

    Cuando los usuarios envían su formulario haciendo clic en el botón Enviar, se envía un correo electrónico a la dirección que introdujo. El envío también se almacena en su administración de WP. Para obtener más información, consulte Gestionar los envíos de formularios.

Ajustes para el widget de formulario lite

Puede personalizar sus widgets utilizando contenido, estilo y otros parámetros avanzados, lo que le ofrece una gran flexibilidad para adaptarlos a sus necesidades. Haga clic en las pestañas de abajo para ver todos los ajustes disponibles para el widget Formulario.

Pestaña Contenido

Añada, elimine y edite campos de formulario, pasos, botones y controles. Determine lo que sucede después de que los visitantes envíen sus respuestas.

Seleccione una de las plantillas de formulario para empezar con su diseño.

  • Encabezado: Introduzca un encabezado para su formulario en el cuadro de texto. El encabezado debe ser lo más corto posible, con menos de cinco palabras.
  • Etiqueta HTML del encabezado: La etiqueta HTML indica a los motores de búsqueda y al software de accesibilidad la importancia del elemento. Recomendamos dejar la configuración predeterminada, pero puede utilizar el menú desplegable para cambiar la etiqueta HTML.
  • Descripción: Introduzca cualquier detalle que desee dar sobre su formulario.

Asigne un nombre a su formulario.

Edite y cree campos para su formulario. Cada campo representa los datos que recopila de sus visitantes, como Nombre y Correo electrónico.

Hay dos iconos que aparecen a la derecha del nombre del campo:

РDuplicar este elemento del men̼. El uso de la copia ayuda a mantener la coherencia en su men̼.

РEliminar este elemento del men̼.

Cuando hace clic en el nombre de un campo, aparecen opciones adicionales en dos pestañas: Contenido y Avanzado.

En la pestaña Contenido, están disponibles las siguientes opciones:

  • Tipo: Establezca el tipo de campo para ayudar a filtrar los datos irrelevantes. Por ejemplo, establecer el tipo en correo electrónico, significa que los visitantes deben enviar direcciones de correo electrónico válidas. Consulte Tipos de campo para obtener más detalles.
  • Etiqueta: Cree un nombre para el campo, como Nombre, para indicar a los usuarios qué información deben introducir.
  • Marcador de posición: También conocido como texto fantasma, es un texto que aparece en el campo para dar información más detallada sobre el campo, por ejemplo, en un campo llamado Películas favoritas, el texto fantasma podría ser, «Enumere sus tres mejores opciones».
  • Obligatorio: Utilice el conmutador para determinar si los usuarios deben rellenar este campo para enviar el formulario.
  • Ancho de la columna: Establezca la cantidad de espacio que ocupará el campo. Esto se puede utilizar para campos en los que espera respuestas cortas o si desea que varios campos aparezcan en una línea. Por ejemplo, si desea que dos campos aparezcan en una línea, asígneles a cada uno un ancho del 50%.

Cree un campo en blanco para su formulario.

Utilice el conmutador para Mostrar u Ocultar el nombre del campo.

Utilice el conmutador para Mostrar u Ocultar si el campo es obligatorio o no. La práctica estándar es marcar estos campos para que los visitantes sepan que deben rellenarlos.

Ancho de la columna: Establezca el tamaño del área asignada para el botón. Esto afectará a la colocación del botón.

Por ejemplo, si el tamaño de su columna es del 100% y alinea el botón a la derecha, el botón estará a la derecha. Sin embargo, si establece un ancho de columna del 50% y alinea el botón a la derecha, aparecerá en el centro del formulario.

El botón Enviar envía la información del formulario al propietario del sitio web. Se añade a la última página del formulario.

Si no desea etiquetar el botón como Enviar, utilice el cuadro de texto para introducir una etiqueta diferente.

Puede añadir una pequeña imagen al botón:

  • Para no tener ningún icono, haga clic en .
  • Para subir su propia imagen .svg para usarla como icono, haga clic en
  • Para seleccionar un icono de la biblioteca, haga clic en el símbolo del icono.

Asigne un ID a su botón para que pueda identificarlo más tarde. Esto a menudo ayuda en el procesamiento de la información que recopila.

Active Sí si desea mostrar a los visitantes una página diferente después de que envíen un formulario. La página podría contener un simple agradecimiento o podría incluir información adicional como: «Nos pondremos en contacto con usted en 48 horas.»

Si activa Sí, tendrá que añadir la URL de la página.

Cuando un visitante envía un formulario, puede recibir los envíos como un correo electrónico. Utilice esta sección para definir estos correos electrónicos.

  • Para: La dirección de correo electrónico donde se recibirán los envíos.
  • Asunto: La línea de asunto del correo electrónico que se enviará a la dirección de correo electrónico en la configuración Para.
  • Mensaje: Cualquier texto e información del formulario que se enviará en el correo electrónico. La configuración predeterminada es [all-fields], incluye toda la información del formulario en el correo electrónico.
  • Correo electrónico del remitente: Añada el correo electrónico desde el que se enviará el correo electrónico.
  • Nombre del remitente: Determine bajo qué nombre se enviará el correo electrónico. Esto puede ayudarle a filtrar estos correos electrónicos más tarde.
  • Responder a: Edite esta dirección de correo electrónico si desea responder a estos correos electrónicos y que estas respuestas se envíen a una dirección diferente.
  • Cc: Envíe una copia de estos correos electrónicos a otra dirección.
  • Cco: Envíe una copia oculta de estos correos electrónicos a otra dirección.
  • Metadatos: De forma predeterminada, los correos electrónicos enviados por el formulario incluyen metadatos como la hora, la fecha, la URL de la página, el agente de usuario (información del navegador), la IP remota (dirección IP de la persona que envía el formulario), el crédito (el software que creó el formulario).
  • Enviar como: Utilice el menú desplegable para determinar si el correo electrónico enviado por el formulario está en formato HTML o plano.

Solo para usuarios de Elementor Pro.

Active Activado para activar la función de envíos de formularios. Esta función le permite acceder al envío de formularios desde WP Admin>Elementor>Envíos.

El código personalizado a veces puede requerir que le dé a su formulario un ID.

Asegúrese de que su ID de formulario sea único.

En general, los navegadores ya tienen mensajes integrados para los envíos de formularios que indican éxito o errores del formulario.

Activar Mensajes personalizados a Sí le permite crear sus propios mensajes que se mostrarán en caso de que el navegador del visitante no proporcione estos mensajes o los mensajes no se muestren por alguna razón.

Pestaña Estilo

Determina el aspecto de los elementos y controles del menú.

Determine si el encabezado y la descripción aparecerán a la derecha, a la izquierda o en el centro del formulario.

Controle el aspecto del Encabezado.

Controle el aspecto del Encabezado.

Controle el diseño de su formulario.

  • Espacio entre columnas: Si su formulario tiene más de una columna, utilice el control deslizante para establecer el espacio entre las columnas. Esto ocurre cuando hay más de un campo en una fila.
  • Espacio entre filas: Utilice el control deslizante para subir y bajar el espacio entre los campos.

Controle el aspecto de las etiquetas del formulario.

  • Espaciado: Establezca la distancia entre la etiqueta y el campo.
  • Color del texto: Determine el color del nombre del campo. Para obtener más detalles, consulte Elija un color o Utilice fuentes y colores globales.
  • Tipografía: Determine la fuente y el tamaño del nombre del campo.

    Para obtener más detalles, consulte Tipografía.

Esta sección determina el aspecto de los campos del formulario. Esto incluye el texto del marcador de posición, el borde del campo y más.

  • Color del texto: Establezca el color del texto del marcador de posición. Para obtener más detalles, consulte Elija un color o Utilice fuentes y colores globales.
  • Tipografía: Establezca el tamaño y el tipo de fuente del texto del marcador de posición. Para obtener más detalles, consulte Tipografía.
  • Color de fondo: Establezca el color del cuadro de campo.
  • o más detalles, consulte Elija un color o Utilice fuentes y colores globales.
  • Borde: Active Sí si desea un borde alrededor del campo.
  • Color del borde: Establezca un color para el borde del campo. Fpara obtener más detalles, consulte Elija un color o Utilice fuentes y colores globales.
  • Ancho del borde: Delimite el campo con un borde.
  • Forma: Seleccione una forma de borde en el menú desplegable:
    • Redondo: Los botones aparecen con esquinas suaves.
    • Redondeado: Los botones aparecen con bordes uniformemente curvados.
    • Afilado: Botones rectangulares.

Utilice el menú desplegable para seleccionar:

  • Botón: Aparecerá como un botón estándar.
  • Enlace: Aparecerá como texto.

Establezca el tamaño y el tipo de fuente para todos los botones del formulario.

Puede hacer que el botón cambie cuando los usuarios mueven el ratón:

  • Normal: Cómo aparece de forma predeterminada.
  • Hover: Cómo aparece el botón cuando los visitantes pasan el ratón por encima de ellos. El modo Hover le permite establecer una duración de transición. Esta es la cantidad de tiempo que tarda el botón en cambiar su apariencia.

A continuación, se muestran las características que pueden cambiar:

Añada un borde a su botón. Si añade un borde, también puede establecer:

Elija una de las siguientes opciones:

  • Redondo: Los botones aparecen con esquinas suaves.
  • Redondeado: Los botones aparecen con bordes uniformemente curvados.
  • Afilado: Botones rectangulares.

Determine el espacio entre el borde del botón y el texto. Para obtener más información, consulte Relleno y márgenes.

La sección Mensajes controla el estilo de los mensajes que se muestran a los visitantes después de enviar un formulario:

  • Tipografía: Determine el tamaño y el tipo de fuente utilizados en el mensaje.
  • Color del mensaje de éxito: Establezca el color del mensaje si el formulario del visitante se envió al propietario del sitio web. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.
  • Color del mensaje de error: Establezca el color del mensaje si el formulario del visitante no se envió al propietario del sitio web. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.
  • Color del mensaje en línea: Esto solo es relevante si elige mostrar mensajes personalizados. Algunos mensajes personalizados aparecen dentro del propio formulario, estos se denominan mensajes en línea y esta configuración determina su color.

Añada un fondo a su formulario. Para obtener más información, consulte Crear un fondo.

Utilice el control deslizante para determinar el ancho del formulario.

Cree espacio entre el contenido del formulario y los bordes del formulario. Para obtener más información, consulte Relleno y márgenes.

Pestaña Avanzado

Controla la colocación de tu widget, inserta enlaces, añade código personalizado y mucho más.

Obtén más información sobre los ajustes de la pestaña Avanzado.

En esta página

Compartir este artículo

Hosted with