Con este vídeo de la Zona Código aprendes a transformar el aspecto de cualquier formulario de Contact Form 7 en un diseño moderno y profesional añadiendo una única clase CSS.
Contact Form 7 no incluye opciones de diseño.
Eso significa que tus formularios heredan los estilos del tema y en muchos casos el resultado es un formulario plano y poco atractivo.


Con este snippet creas una clase CSS que al aplicarla al formulario activa un diseño completo:
- bordes suaves que cambian de color al hacer foco con un sutil resplandor azul,
- esquinas redondeadas,
- un botón de envío a ancho completo con efecto de elevación al pasar el ratón
- y estilos propios para los mensajes de validación y de respuesta.
Solo necesitas añadir la clase al formulario desde los ajustes de CF7 y pegar el CSS.
Vídeo: cómo estilizar Contact Form 7 como formulario moderno
Código CSS para el formulario moderno de CF7
Vídeos relacionados: