Elementor

Cómo insertar un formulario en Elementor

Cómo insertar un formulario en Elementor

Tabla de contenidos

¿Qué es el Widget de Formulario en Elementor?

Los formularios permiten a los visitantes de tu sitio web interactuar contigo, haciéndote preguntas, contactando contigo o suscribiéndose a tu newsletter. Esto facilitar la comunicación y recopilación de información útil para tu tienda o proyecto.

Con Elementor puedes crear diferentes tipos de formularios. Algunos son simples y rápidos de rellenar, mientras que otros son más complejos, con varios pasos a seguir según la cantidad de información que quieres recoger.

¿Cómo usar el Widget de Formulario en Elementor?

Paso 1. Añade el Widget al lienzo

Formulario widget
Formulario widget

Haz clic en el Widget de Formulario, luego arrástralo y suéltalo dentro del lienzo.

Por defecto, el Widget crea un formulario con tres campos: Nombre, Correo electrónico y Mensaje.

Paso 2. Dale un nombre al formulario

Nombre del formulario
Nombre del formulario

En Contenido  > Campos del formulario > Nombre del formulario > cambia el nombre del formulario por “Contacto”.

Paso 3. Edita los Campos del formulario

Campos del formulario
Campos del formulario

Edita y añade campos al formulario. Cada campo recoge datos del usuario, como su nombre o su correo electrónico.

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

  • Los papeles: Duplica el elemento. Edita y cambia el nombre de cada elemento para organizar los campos.
  • La equis: Elimina el elemento.

Cuando haces clic en el nombre de un campo, verás dos pestañas: “Contenido”“Avanzado”. En ellas encontrarás opciones adicionales para personalizar el campo.

Paso 4. Contenido del Campo del formulario

Contenido
Contenido

Dentro de la pestaña Contenido, se encuentran las siguientes opciones:

  • Tipo: Selecciona un tipo de campo para filtrar datos innecesarios. Por ejemplo, si eliges Correo electrónico, los usuarios solo podrán escribir correos electrónicos válidos. Al final te dejaré una lista con todos los Tipos que existen.
  • Etiqueta: Cambia el nombre del campo, por ejemplo, Nombre, para indicar a los usuarios qué información tienen que escribir.
  • Marcador: Este campo, también conocido como «Texto de ayuda», añade una idea sobre lo que los usuarios deben escribir. Por ejemplo, en un campo llamado «Series favoritas», el texto de ayuda podría ser «Enumera tus series favoritas».
  • Requerido: Activa esta opción si es obligatorio que los usuarios completen este campo para enviar el formulario.
  • Ancho de la columna: Determina el ancho del campo. Esta opción es útil para campos donde esperas respuestas cortas o si quieres que aparezcan varios campos en una línea. Por ejemplo, si quieres que dos campos aparezcan en una línea, puedes asignarles a cada uno un ancho del 50%.

Paso 5. Campo del formulario: Avanzado

Avanzado
Avanzado

Dentro de la pestaña Avanzado encontrarás las siguientes opciones:

  • Valor por defecto: Es la información que se escribirá automáticamente en un campo a menos que el usuario decida borrarla. Por ejemplo, en un formulario que todos los miembros del departamento de Personal deben completar, donde la mayoría pertenecen a ese departamento, puedes establecer que el campo «Departamento» se complete automáticamente con la palabra «Personal».
  • ID: Da al campo un identificador único que facilitará el manejo de la información enviada.
  • Shortcode: Usa un shortcode en el campo para evitar que se repita la información varias veces.

Paso 6. Añade un nuevo campo al formulario

Añadir elemento
Añadir elemento

Usa el botón + Añadir elemento para añadir un nuevo campo al formulario.

Paso 7. Elige el tamaño del campo

Tamaño de la entrada
Tamaño de la entrada

Usa la opción Tamaño de la entrada para determinar tanto la altura del campo como el tamaño de los datos ingresados.

Paso 8. Oculta el nombre del campo

Etiqueta
Etiqueta

En Etiqueta, activa o desactiva esta opción para Mostrar u Ocultar el nombre del campo.

Paso 9. Haz que un campo sea obligatorio

Marca de obligatorio
Marca de obligatorio

En Marca de obligatorio, activa o desactiva esta opción para determinar si el campo es obligatorio o no.

Tipos del Campo de formulario
Tipos del Campo de formulario

Tipos de Campos del formulario

  • Texto: Es un campo de texto simple. Por ejemplo, un nombre.
  • Correo electrónico: Obliga a escribir un correo electrónico válido.
  • Área de texto: Permite a los usuarios enviar textos más largos. Se suele usar para el campo de Comentarios o Mensaje.
  • URL: Obliga a escribir una dirección web.
  • Tel: Obliga a escribir un número de teléfono.
  • Casilla de selección única: Añade diferentes opciones en formato de lista con casillas, pero solo se puede seleccionar una.
  • Seleccionar: Crea un menú desplegable con una lista de opciones. Se puede configurar para seleccionar diferentes opciones.
  • Casilla de verificación: Añade casillas que se pueden marcar para seleccionar múltiples opciones a la vez, permitiendo a los usuarios deseleccionar una opción específica sin afectar otras.
  • Aceptación: Esta opción es perfecta para añadir el mensaje de “He leído y acepto la política de Privacidad.”
  • Número: En este campo solo se pueden escribir números.
  • Fecha: Añade un calendario para elegir una fecha.
  • Hora: Añade un reloj para elegir una hora.
  • Subir archivo: Permite a los usuarios subir documentos al sitio web. Hay tres formas de subir archivos:
    • Correo electrónico con enlace: Guarda una copia del documento en el servidor para un seguimiento fácil, aunque es menos seguro.
    • Correo electrónico con archivo adjunto: Envía el documento por correo electrónico al dueño del sitio web sin almacenar una copia en el servidor. Hace que el documento sea más difícil de rastrear, pero más seguro.
    • Correo electrónico con ambos: Envía el documento por correo electrónico y guarda una copia del documento en el servidor del sitio web.
  • Contraseña : Añade un campo para que los usuarios ingresen contraseñas. La información que escriban estará oculta a menos que decidan mostrarla.
  • HTML: Personaliza el formulario añadiendo un código HTML.
  • Oculto: Añade un campo que los usuarios no pueden ver, pero el propietario del sitio web sí.
  • reCAPTCHA: Añade un campo reCAPTCHA para evitar que los bots envíen formularios falsos. Este campo requiere que los usuarios identifiquen palabras u objetos para verificar que son humanos.
  • reCAPTCHA V3: Integra un campo reCAPTCHA V3 para prevenir envíos de formularios falsos por parte de bots. Este campo elimina los bots al analizar el comportamiento de los usuarios en la página, sin necesidad de interacción humana directa.
  • Señuelo Incluye un Honeypot en el formulario. Este campo oculto actúa como una trampa para los robots de spam, ya que los humanos no lo ven y no lo completan. Si el campo de Honeypot no está vacío al enviar el formulario, se considera un envío de spam generado por un bot y será rechazado automáticamente.
  • Oculto: Añade una página al formulario, como cuando se usa un salto de página para iniciar una nueva sección.

Escrito por:

Richi Pérez

Richi Pérez

22/05/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Cuál es el color del signo de Aries? Signo: Aries Color: Rojo Planeta: Marte Gema/metal: Rubí Razón: Marte...

¿Qué es el widget de Ancla de menú en Elementor? El Widget de Ancla de menú en Elementor te...

¿Qué es el widget de HTML en Elementor? El Widget de HTML en Elementor te permite incrustar código...