Estilos del Formulario CF7
Etiquetas (Labels)
Campos (Inputs y Textarea)
Botón de Envío
Vista Previa
Diseños Predefinidos
CSS Generado (Copia y pega en Apariencia > Personalizar > CSS Adicional o en tu archivo de estilos)
Que onda con Contact Form 7
Contact Form 7 es un gran amigo. Pero es feo. No es su culpa, y no es su trabajo ser lindo. Aquí te dejo una utilidad para que crees CSS customizado para Contact Form 7 y puedas ver cómo va quedando en la medida que eliges opciones. Si quieres más detalles, o saber cómo pegar el CSS en tu WordPress, más abajo te lo cuento.
Se descarga del repositorio de plugins, y aquí está el link:
Contact Form 7 (CF7 para los amigos) es uno de esos plugins que existen casi desde el inicio de la era WordPress. Genera un HTML funcional en base a un marcado de texto. Se encarga de un montón de detalles y permite hacer el formulario que quieras.
Hace de todo, no tiene “Versión Premium” y existen toneladas de plugins para añadirle funcionalidad.
Pero… CF7 no tiene estilos visuales, hereda lo que le entregue la plantilla del sitio web, por lo que la mayoría de las veces, sus formularios serán feos.
Esta herramienta sencilla que tienes a continuación, permite estilizar Contact Form 7. Generará unos paddings, unos tamaños consistentes de letras y sacará los estilos default de windows 95 de los formularios (todo eso lo tienes ya con el estilo predeterminado).
Luego, puedes presionar el botón para copiar, y en tu WordPress pegar el código CSS en el Full Site Editor.
Cómo pegar el CSS:
Para acceder al Full Site Editor en tu WordPress, haces clic en “Editar sitio” en la barra superior, y en el lado derecho, presionas estos tres botones en orden:
Ahí es donde pegas el CSS:
Agregar un comentario