Pavia Fernandez 69 • San Sebastian PR 1.787.528.0151

Widget de formularios de Elementor-Pro

Cómo usar el Widget de formularios -Pro o Elementor Form: Con el widget Formulario, no tienes que abandonar la página que estás diseñando cuando estás creando un nuevo formulario. En este tutorial, revisaremos todas las opciones disponibles en este widget.

Campos de formulario

Nombre del formulario: Aquí puede insertar el nombre del formulario.
Campos del formulario: una lista de todos los campos del formulario. Puedes duplicar, agregar o eliminar camposs como lo desees. También puedes arrastrarlos y soltarlos para cambiar el orden.

Funeraria Rios Caldas
La Casa del Bordado
Colon Pratts 360
Comercio Local
Tomassini Dental Laboratory
On Stage
Anunciate Ahora 360
Moto Theme
Laboratorio San Sebastian

Al hacer clic en cada campo, se muestran todas sus configuraciones.

  • Tipo: elija el tipo de campo que desea.
  • Etiqueta: el nombre del campo, que se muestra en el formulario y en el correo electrónico que recibe del usuario.
  • Texto en el Campo: el texto dentro del campo, que ayuda al usuario a completar el campo.
  • Requerido u Obligatorio: establezca el campo según sea necesario, si no desea dar al usuario la opción de omitir el campo.
  • Ancho de columna: le permite establecer el ancho del campo. Esto es útil cuando quiere obtener varios campos en una fila. Si desea obtener 3 campos en una fila, por ejemplo, deberá configurar cada campo 33% de ancho. Los Campos siempre deben de sumar 100 y lo mínimo 99
  • Mensaje: un campo de área de texto que le permite establecer el número de filas que se muestran.

Tipos de campos

  • Texto: un campo de texto simple. Campo de ejemplo que usaría este tipo: Nombre
  • Tel: un tipo de número de teléfono. El teclado se ajusta automáticamente para este tipo.
  • Correo electrónico o Email: un tipo de correo electrónico. Incluye validación para correo electrónico.
  • Area de Texto un tipo de área de texto que le permite establecer el número de filas.
  • Número: un tipo de número. El teclado se ajusta automáticamente para este tipo.
  • Selección: un tipo de selección que permite al usuario elegir de una lista desplegable de opciones. Las opciones se crean al escribir líneas de texto separadas en la configuración de Opciones.
  • URL: con este tipo, el usuario puede completar la URL o dirección de su sitio web.
  • Casilla de Selección Múltile: un tipo de casilla de verificación permite al usuario verificar una o más de las opciones. Las opciones se crean de nuevo escribiendo líneas de texto separadas en la configuración de Opciones. Con este tipo, también tiene la configuración de ‘Lista en línea’, que permite mostrar las casillas de verificación en una línea horizontal.
  • Radio: le permite al usuario verificar y seleccionar una opción. Las opciones se crean nuevamente escribiendo líneas separadas. Con este tipo, nuevamente tiene la configuración de Ajustes en Línea -‘Inline List’.
  • reCAPTCHA: agregue un reCAPTCHA a su formulario para verificar que el usuario no sea un robot. Puede establecer el tamaño como normal o compacto, y el estilo como claro u oscuro.
  • Honeypot: esta técnica antispam funciona al agregar un campo que no es visible para el usuario, pero que todavía es visto por los robots de spam. De esta forma, si el robot de spam llena automáticamente el campo, el envío de spam puede ser reconocido y bloqueado.
  • Oculto: agregue un campo oculto que no sea visible para el usuario pero que envíe un campo como parte del formulario de contacto.

Tamaño de entrada: permite establezcer el tamaño de los campos, desde el más pequeño al más grande.
Etiquetas: puedes elegir mostrar u ocultar las etiquetas en el formulario.

Botón de enviar

  • Texto: permite elegir el texto que se muestra en el botón Enviar.
  • Tamaño: puedes establezcer el tamaño del botón Enviar.
  • Ancho de columna: facilita establezcer el ancho del botón por porcentaje.
  • Alineación: para establezcer la alineación a la derecha, centro, izquierda o justificada.
  • Ícono: te permite agregar un icono al botón Enviar de la lista de iconos de fuentes increíbles.
  • Posición del icono: antes o después del texto en el botón.
  • Espaciado de iconos: establezce el espacio entre el icono y el botón.

Correos electrónicos y opciones

  • Correo electrónico a -To: establece a dónde se envía el correo electrónico. Puede configurar varios correos electrónicos, separando cada correo electrónico con una coma.
  • Asunto del correo electrónico -Email Subject: establezca el asunto del correo electrónico.
  • Desde el Correo electrónico de -From Email: esto configurará el campo de dónde se envía correo electrónico.
  • De -From Name: esto establecerá el nombre de la persona que envió el correo electrónico.
  • Responder a -Reply To: cuando recibes el correo electrónico y respondes, este es el correo electrónico al que se enviará la respuesta. Para responder al usuario que envió el mensaje, elija la opción ‘Campo de correo electrónico’.
  • Metadatos: incluya más información en el correo electrónico, como Fecha, Hora, URL de la página, Agente de usuario, IP remota y Crédito.
  • Enviar HTML: esta opción enviará las notificaciones por correo electrónico en HTML.
  • Redirigir a: agregue el enlace al que se redireccionará automáticamente al usuario después de enviar el formulario correctamente.
  • Mensajes personalizados: edite los mensajes que verá el usuario: mensaje de éxito al enviar el Correo, mensaje de error, mensaje de campo obligatorio y mensaje no válido.

Tenga en cuenta que el widget Formulario tiene una nueva interfaz de usuario así que asegúrese de leer el siguiente artículo de nuestro blog para encontrar la nueva ubicación de la configuración:

https://elementor.com/pro-v140-form-integrations/

Utilizar Contact Form DB para guardar todos los mensajes en una tabla

El widget Elementor’s Form funciona perfectamente con el popular plugin Contact Form DB, que le permite guardar todos los mensajes enviados en su sitio en una tabla organizada.

En el panel de contacto de DB de formulario de contacto, podrá ver todos los mensajes enviados en su sitio. Puede elegir entre diferentes formularios, ver todos los detalles de los formularios enviados, así como exportar los resultados.

 

Personalizar el formulario

Personalizar

  • Espacio entre columna: establezca el espacio exacto entre las columnas de los campos del formulario.
  • Espacio entre las filas: establece el espacio entre las filas

Etiquetas

  • Espaciado: establezca el espacio entre las etiquetas y los campos.
  • Color del texto: establezca el color de las etiquetas de los campos
  • Tipografía: personaliza la tipografía de la etiqueta

Campos

  • Color de texto: establezce el color del texto de entrada (El texto que el usuario rellena)
  • Tipografía: establece la tipografía del texto de entrada.
  • Color de fondo: establezca el color de fondo de los campos.
  • Color del borde: establezca el color del borde de los campos.
  • Ancho del borde: establece el ancho de los bordes del campo.
  • Radio de borde – Establece el radio del borde. El valor predeterminado tiene un borde de borde redondeado.

Botón

  • Normal | Al Pasar el Mouse o Ratón sobre el Botón: – Elije cambiar la configuración de los botones para los estados normal y estacionario.

Normal

  • Color del texto: establece el color del texto del botón.
  • Tipografía: configura la tipografía para el texto del botón.
  • Color de fondo: establezca el color de fondo para el botón.
  • Tipo de borde: elija el tipo de borde del botón.
  • Ancho: establece el ancho del borde.
  • Color: establece el color del borde.
  • Radio de borde: le da al botón una forma de borde más redondeada.
  • Relleno de texto: inserte el espacio entre el texto y el borde del botón.

Flotar o Mouse sobre el Botón

  • Color del texto: establezca el color del texto para el botón del modo estacionario.
  • Color de fondo: establezca el color de fondo para el botón del modo estacionario.
  • Color del borde: establece el color del borde en el modo estacionario.
  • Animación: agregue animación al pasar el mouse sobre el botón.

Campo HoneyPot

Honeypot Field

Una actualización reciente ha incluido un filtro de spam agregado que funciona detrás de escena. La técnica Honeypot funciona al agregar un campo de formulario que está oculto para el usuario pero que es visto por el spambot. De esta manera, la experiencia del visitante es la misma, pero si el formulario se envía con el campo oculto lleno, se reconoce como spam y se filtra. Para usar esta opción, agregue un elemento al formulario y en el menú desplegable llamado tipo seleccione honeypot.

Integración de Webhook, MailPoet y MailChimp

Con Form, puede integrarse rápidamente con cualquier servicio de marketing por correo electrónico a través de webhook y Zapier. También puede integrarse con MailChimp y MailPoet con la integración integrada de Elementor. Echa un vistazo a estos videos tutoriales de Zapier y MailChimp.

Email de confirmación

Si desea enviar un correo electrónico de confirmación a sus suscriptores, utilice el tutorial How to send Confirmation Email | Cómo enviar el Email de Confirmación.

SOLUCIÓN DE PROBLEMAS

Para procedimientos de solución de problemas, consulte los siguientes artículos:

http://docs.elementor.com/article/202-i-followed-all-of-your-instructions-and-still-don-t-get-form-mes-messages-what-can-i-do

Actualización al Widget de Formularios

El martes 16 de enero de 2017 Elementor hizo una gran actualización a Widget de Formularios.

Hoy, presentamos varias funciones para el widget Elementor Form, que incluye 6 nuevos campos: Cargar o subir de archivos, Casilla de Verificación de Aceptación, Selectores de Fecha y hora, Campos de Contraseña y HTML.

El widget Form fue uno de los primeros widgets incluidos en Elementor Pro cuando se lanzó por primera vez. Desde entonces, hemos agregado muchas funciones de formulario útiles, como nuestra integración reciente a varios servicios de automatización de marketing y CRM.

Hoy, estamos renovando los formularios de Elementor, agregando 6 nuevos campos de formulario y ampliando la funcionalidad de varios campos existentes. Con estas nuevas mejoras, puedes utilizar el generador de formas visuales de Elementor para diseñar cualquier tipo de formulario que desees.

Ejemplo de Formulario
Ejemplo de Formulario

Subir archivo

¿Estás ontratando nuevos empleados? Probablemente necesites los CV de tus candidatos enviados con su formulario de solicitud.

El nuevo campo Subir Archivos permite a los visitantes subir archivos directamente dentro del formulario.

La carga de archivos de Elementor es extremadamente flexible y ofrece muchas opciones de personalización. Éstas incluyen:

Tamaño máximo de archivo de carga: limita el tamaño máximo de archivo que recibirás. Aunque tu proveedor de hosting o alojamiento establece el límite del tamaño de los archivos que puedes subir, ahora puedes establecer un límite más pequeño con este control.

Tipos de archivo permitidos: establece qué tipos de archivos puede subir o cargar el usuario. Esto es importante para asegurarte de obtener el archivo correcto de tus usuarios y mejorar la seguridad del formulario.

Varios archivos permitidos: permite que el usuario cargue varios archivos a la vez. Al activarlo, se agregará el control ‘Máximo de archivos‘, que limita la cantidad de archivos cargados.

Todos los archivos cargados pasan por comprobaciones de seguridad y validaciones integradas en los formularios de Elementor, lo que garantiza que tu sitio web nunca se vea comprometido.

Formulario de Aceptacion
Formulario de Aceptacion

Campo de aceptación

El campo de aceptación garantiza que tus usuarios acepten ciertos requisitos de tu elección. Este requisito puede ser tus Términos de uso, autorización para enviar correos electrónicos o cualquier otra aprobación, ofreciéndote protección futura como propietario del sitio.

Como se esperaba de un campo de aceptación, puedes configurarlo para que sea un campo obligatorio. También tiene la opción de configurar el campo de aceptación como marcado por defecto.

Además de usar este campo como campo de aceptación, también funciona como un campo de Encasillado de Verificación Unico que puede usarse para cualquier otro propósito.

Selector de Fecha y Hora
Selector de Fecha y Hora

Campo de fecha

El campo de fecha permite a los usuarios enviar una fecha preferida dentro del envío de su formulario. Esto es extremadamente práctico para empresas basadas en reservaciones como restaurantes y hoteles. Puedes establecer una fecha mínima y máxima, por lo que es más fácil para el usuario elegir la fecha correcta.

Activa HTML5 nativo para que se use el selector de fecha del navegador en lugar del selector de Elementor. En los dispositivos móviles, el HTML5 nativo se usará automáticamente, ya que los selectores de fecha nativos en los navegadores móviles cuentan con un mejor apoyo técnico.

Selector de Hora
Selector de Hora

Selector de tiempo

El campo de tiempo es similar al campo de fecha, solo el usuario selecciona una determinada hora del día en lugar de una fecha. En realidad, puede combinar los campos de Hora y Fecha dentro del mismo formulario, para que el usuario le envíe el momento preciso en que puede efectuarse la entrevista o reunión o servicio que solicita. Al igual que con el campo Fecha, tiene la opción de activar HTML5 nativo, de modo que se utilice el selector de tiempo del navegador en lugar del selector de tiempo de Elementor.

Información Personal
HTML Información Personal

Campo de HTML

Usando el Creador de Formularios de Elementor, probablemente te acostumbraste a construir todo el formulario visualmente. Sin embargo, hay situaciones en las que puede ser útil agregar HTML personalizado directamente al formulario. El nuevo campo HTML le brinda la flexibilidad de agregar HTML personalizado al formulario, una opción práctica y a la mano para personalizaciones, tales como agregar títulos codificados personalizados en formularios.

Campo de Contraseña
El El Creador de Formularios nos permite ahora el Campo de Contraseña

Campo de contraseña

Use este campo para permitir que tus visitantes establezcan una contraseña usando tu formulario. Permitirá a los usuarios escribir sus contraseñas sin mostrar los caracteres, para una mayor seguridad al completar el campo.

Diseña y crea cualquier formulario en WordPress

Sólo imagínate todas las cosas nuevas que puedes hacer con estas actualizaciones. Aquí te presentamos algunos casos en que puedes implementarlas rápidamente:

  • Encontrar solicitantes para un trabajo
  • Registrar invitados para un evento
  • Obtener la aprobación del usuario para tus términos y condiciones o boletín de noticias
  • Agregar tus propios titulares personalizados dentro del formulario
  • Permitir que los usuarios elijan varios productos a la vez
  • Obtener pedidos de clientes que se ajusten a los servicios y productos que ofreces

Todo esto se agrega a la ya amplia gama de posibilidades disponibles en el Generador de Formularios.

Validaciones mínimas y máximas para el número

Agregamos valores mínimos y máximos al campo numérico. De esta forma, el usuario solo podrá enviar un número dentro del rango o parámetros que especificaste.

Digamos que eres dueño de una tienda de zapatos en línea que solo envía de 2 a 10 pares de por pedido. Con las validaciones Mín. Y Máx., podrás establecer los valores mínimos y máximos dentro de ese rango de 2 a 10, asegurando que nunca obtengas una orden incorrecta de las zapatillas.

Validación telefónica

La validación de correo electrónico ya estaba incluida en nuestros formularios, y ahora también hemos agregado la validación del teléfono. De esta forma, el usuario solo puede enviar números de teléfono válidos. Los caracteres permitidos incluyen: 0-9 () * # + –.

Selección múltiple para el campo seleccionado

Una vez que actives la Selección múltiple para el campo Seleccionar, las opciones en el campo de selección serán visibles para los usuarios. El usuario puede enviar varias opciones a la vez, seleccionándolas en el campo. También puedes especificar el número de filas que aparecerán visibles para este campo.

Cualquier forma. Cualquier diseño.

Los formularios juegan un papel importante para la mayoría de los sitios web, ya que es el principal medio para obtener clientes potenciales y conversiones.

Por lo tanto, no sorprende que durante el pasado año, las solicitudes más populares que recibimos estuvieron relacionadas con la ampliación de nuestras capacidades en la creación de formularios.

Esta actualización se creó después de analizar dichas solicitudes. Aunque fue un desafío, logramos agregar todas estas nuevas posibilidades y alternativas para los formularios, manteniendo el widget tan visual e intuitivo como siempre.

Si ya eres un usuario Pro, te invito a ampliar tus formularios con la funciones añadidas. Si aún no has actualizado a Pro, ahora es el momento de unirte a nuestra comunidad premium y disfrutar del mejor generador de formularios en WordPress, junto con muchas otras características increíbles. Para hacerlo simplemente Oprime Aquí

Si te gustó este Tutorial suscríbete y recibirás en tu correo una notificación cada vez que publiquemos uno nuevo.

Deja un comentario