Field Icons for WPForms

Un icono dentro del campo ocupa el sitio donde el visitante escribe

Pones un sobre en el campo del correo y un teléfono en el del número. El formulario se ve más ordenado, pero ahora el icono comparte espacio con lo que el visitante teclea, y un dato largo tiene menos sitio del que tenía antes de añadirlo.

Un icono dentro del campo no es solo decoración: su tamaño y su lado cambian el espacio que queda para escribir, así que conviene decidirlos mirando el formulario ya relleno.

Field Icons for WPForms es un complemento de WPForms que coloca iconos de Font Awesome dentro de los campos de entrada. Eliges el icono de una biblioteca, ajustas su tamaño, su posición y su alineación, y lo sitúas a la izquierda o a la derecha del campo. Mientras lo haces ves los cambios en una vista previa en vivo.

Qué puedes ajustar en cada icono

• Biblioteca de Font Awesome: eliges el icono entre una colección amplia.
• Tamaño, posición y alineación: se ajustan por separado, sin tocar código.
• Izquierda o derecha: el icono se coloca en el lado del campo que prefieras.
• Vista previa en vivo: ves el resultado mientras cambias cada ajuste.
• Carga ligera: el complemento carga solo los recursos que necesita.
• Sin configuración previa: funciona con WPForms sin pasos de preparación adicionales.

Probar los iconos en un formulario de contacto

Imagina un formulario con nombre, correo, teléfono y mensaje. Una combinación que puedes probar es un icono a la izquierda en los tres campos cortos, todos del mismo tamaño, y compararla con la versión sin iconos. Pruébala antes de publicarla, porque el aspecto depende de tu tema y del ancho de pantalla.

1. Elige el campo y el icono que mejor lo describe.
2. Ajusta tamaño, posición y alineación mirando la vista previa.
3. Repite en los demás campos con el mismo tamaño para que se vean como un conjunto.
4. Abre el formulario en el móvil y escribe en cada campo un dato largo, como un correo completo.

Cuánto sitio deja el icono y de dónde sale

• Es un complemento de WPForms: se aplica a los formularios que ya construyes con ese plugin.
• Si el icono no se entiende solo, mantén el texto de la etiqueta.
• Los iconos salen de Font Awesome, así que el catálogo disponible es el de esa biblioteca.
• Un icono grande en un campo estrecho deja menos espacio para escribir. Compruébalo en pantallas pequeñas.

Cómo poner el primer icono

Necesitas WPForms instalado y al menos un formulario creado. El complemento se integra con el plugin base, de modo que los ajustes de iconos se hacen sobre ese formulario.

1. Instala y activa el complemento en el mismo sitio donde está WPForms.
2. Abre un formulario existente o crea uno de prueba.
3. Elige el campo de entrada al que quieres añadir el icono.
4. Selecciona el icono y fija tamaño, posición, alineación y lado.
5. Guarda el formulario y revisa el resultado en la página donde se publica.

Alternativas para dar estilo a los campos

Si prefieres no añadir un complemento, la vía directa es escribir tu propio CSS en el tema y colocar los iconos a mano. Tendrás control total, a cambio de mantener ese código tú mismo. En el catálogo, WPForms Pro es el plugin base sobre el que trabaja este complemento.

Preguntas sobre Field Icons for WPForms

¿Con qué formularios funciona?

Con los creados en WPForms. Es un complemento de ese plugin y actúa sobre sus campos de entrada.

¿Puedo poner el icono a la derecha?

Sí. Puedes colocarlo a la izquierda o a la derecha del campo y ajustar además su posición y su alineación.

¿Veo el resultado antes de publicar?

Sí, hay una vista previa en vivo de los cambios mientras personalizas el icono. Aun así, revisa el formulario en la página real y en el móvil.

¿Añade muchos archivos a la página?

El complemento está pensado para cargar solo los recursos necesarios para mostrar los iconos.