Material Design for Contact Form 7

Descripción

Contact Form 7 forms can be as responsive and interactive as an app, just by adding Google’s «Material Design» theme.

Estilo de Contact Form 7

Este plugin proporciona una cantidad de shortcodes creados para rodear tus etiquetas de formulario de CF7 y aplicarles un tema de material design.

Contact Form 7 + Material Design en acción

Take 30 seconds and see how your contact forms could look. Watch the video below and/or play with the live demos.

¿Qué es lo nuevo en la Versión 2.0?

  • Uses the new Material Design. Text and select fields now come in boxed and outlined variants. Textareas now have an inner label. Check out the screenshots below.
  • Nuevas variantes de botones. Elevados (por defecto), no elevados y con contornos.
  • Mejor soporte de navegadores. IE11, iOS8+, más todos los navegadores modernos.
  • CSS personalizado ahora posee resaltado de sintaxis.
  • Puede elegir continuar usando los estilos originales/heredados si lo prefiere.

Contact Form 7 puede ser más interactivo

Make your form fields react to user input more intuitively. Field labels start as placeholders and float up when you focus the field. Checkboxes and radios animate when you click them. Submit buttons include the Material Design ‘ripple’ effect. And more!

Currently supported:

  • Tema claro u oscuro
  • Entrada de texto (incluye texto, correo electrónico, url, tel, número, fecha) – variantes encuadradas y con contorno
  • Área de texto con tamaño automático opcional
  • Menú de selección/cuadro desplegable – variantes encuadradas y con contorno
  • Checkboxes
  • Radios
  • Aceptación
  • Campo de carga de archivo
  • Botón de envío (incluyendo ruleta de carga)
  • Cuestionario
  • ReCaptcha
  • Otros (mensajes de validación/éxito, etc.)

Versión pro:

  • Customize colours and fonts
  • Arrange fields into columns
  • Convertir botones de radio y casillas de verificación en interruptores
  • Agregados íconos principales a los campos de texto y menús de selección
  • Group fields into sections with cards
  • Soporte por medio de correo electrónico directo

Puede actualizar a pro en cualquier momento sin salir de WordPress.

Funciona bien con estos otros plugins:

  • Contact Form 7 Live Preview
  • Mailchimp para WordPress
  • Conditional Fields for Contact Form 7
  • Contact Form 7 Multi-Step Forms
  • Agregado reCaptcha invisible para WordPress (pero no reCaptcha invisible de CF7)
  • Multifile Upload Field para Contact Form 7 (soporte básico)

Responsive Contact Form

Material Design for ContactForm7 is a fully responsive Contact Form 7 theme. It adapts to your screen size and works on any device.

Contact Form Style

Material Design para Contact Form 7 aplica los colores y fuentes de Material Design por defecto a su formulario, pero puede usar el personalizador de WordPress para cambiar las fuentes y los colores a su gusto si está en la versión Pro.

Capturas

  • Un formulario simple
  • Formulario simple usando el estilo con contorno
  • Más campos de formulario, y color personalizado (característica pro)
  • Ejemplo de tema oscuro
  • Generador de shortcode
  • Generador de shortcode

Instalación

  1. Upload the zip to the /wp-content/plugins/ directory and unzip
  2. Activa el plugin desde el menú ‘Plugins’ en WordPress

O ve a ‘Plugins’ > ‘Añadir nuevo’, y busca ‘material design for contact form 7’ para instalar desde el escritorio de WordPress.

Preguntas frecuentes

¿Qué es Material Design?

Material Design es en un conjunto de convenciones, programadas por Google, que bosquejan como su sitio web o app deberían verse y comportarse. La mayoría de las apps de Google usan Material Design, incluyendo al mismo Android.

¿Necesito también un tema de Material Design?

¡Para nada! La belleza de Material Design es que puede tomar tanto mucho o poco si gusta. Está perfectamente bien tener solamente sus formularios estilizados con Material Design y no el resto de su sitio.

For more ways to add Material Design to your WordPress site (without changing your theme), see WordPress Material Design.

¿Cómo uso este plugin?

Toda la documentación puede ser encontrada al hacer clic en ‘Ayuda’ (parte superior derecho de la pantalla y luego ‘Material Design’ desde la pantalla del editor de formulario de CF7.

For a more in-depth tutorial, see How to apply Material Design to Contact Form 7.

!No se ve bien para mi!

Some themes have styles that override the material design styles. If this happens to you, post a link to your form page in the support forum and I’ll help you fix it.

Reseñas

16 de septiembre, 2019
I'm so glad to bought this application. I did a very stylish and professional form design with using material design according to my customers request. Also i tried this plugin with 3rd party cf7 plugins. that was successful working. I also asked help from support service and support service was really friendly and they solved my issue quickly. Thanks a lot 🙂
19 de junio, 2019
This plugin basically does everything you want it to do with your Contact Form 7 contact form. Responsive and nice to the eye. Even the free version makes the contact form look nice and professional without having to go out of your way to spend hours on writing css to make cf7 look good. 10/10 would install again.
Leer todas las 52 reseñas

Colaboradores y desarrolladores

“Material Design for Contact Form 7” es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

“Material Design for Contact Form 7” ha sido traducido a 8 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce “Material Design for Contact Form 7” a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

2.5.4

  • Actualización de la SDK de Freemius
  • Fix for Safari datepickers sometimes being hidden behind other elements
  • Fix one of the nags which kept appearing after being closed

2.5.3

  • Adds CSS to remove duplicate dropdown arrows from select fields on some themes
  • Adds a fast option to download the latest pro version for existing license holders

2.5.2

  • Fixes a bug with include_blank in select fields

2.5.1

  • Updates to comply with the «Contact Form 7» trademark policy

2.5.0

  • Allow exclusive checkboxes to be turned into switches
  • Fields now show invalid state after invalid form submission
  • A fix for avada theme selects

2.4.2

  • Fixed a bug with polyfilled dates in Safari

2.4.1

  • Fixed an upgrade bug
  • Added some CSS to combat some themes overriding our styles
  • Fixed terminology for switches

2.4.0

  • Exposed a JavaScript function to manually initialize the plugin scripts (for use on dynamically loaded forms).

2.3.5

  • Improve file field display
  • Activated max-width fix from 2.3.4

2.3.4

  • Added info about affiliate program in dashboard
  • Added a fix for some themes that set label’s max-width to 100%
  • Security improvements

2.3.2

  • Added translations! Russian, Japanese, French, German and Spanish

2.3.1

  • Actualizado para permitir la traducción del generador de shortcode

2.3.0

  • Plugin actualizado para poder ser traducido

2.2.2

  • Permitir default:get en menús de selección

2.2.1

  • Corregido problema de completado automático en campos delineados
  • Documentos actualizados para funcionar en el último cf7

2.2.0

  • Cambio en los campos delineados para ya no usar más svg
  • Agregados íconos como característica pro

2.1.6

  • Agregado un polyfill selector de fecha

2.1.5

  • Algunas correcciones de CSS en campos de fecha y etiquetas para iOS

2.1.4

  • Corregidas columnas en formularios con espaciados ajustados

2.1.3

  • Corregido un error de compatibilidad con PHP

2.1.2

  • Corregido un antiguo error en campos de aceptación anteriores a CF7V5

2.1.1

  • Corregido un error en el proceso de actualización de la v1

2.1.0

  • Integración con Multifile Upload Field para Contact Form 7

2.0.0

  • ACTUALIZACIÓN IMPORTANTE
  • Librería de Material Design completamente nueva
  • Campos de texto y menús de selección ahora vienen en variantes de campos encuadrados y con contornos
  • Nuevas variantes de botones. Elevados (por defecto), no elevados y con contornos.
  • Áreas de texto poseen una etiqueta interna
  • Mejor soporte para navegadores
  • CSS personalizado para resaltado de sintaxis

1.8.1

  • Corregidos algunos errores y un error que ocurría en versiones antiguas de PHP

1.8.0

  • MAJOR NEW FEATURE: Shortcode Generator UI. No more manual shortcode creation and constantly referring to the documentation.
  • Color por defecto de la etiqueta y borde de entrada oscurecidos ligeramente

1.7.7

  • Corregido un problema creado por la 1.7.6 en algunos sistemas

1.7.6

  • Actualizados los shortcode de aceptación para funcionar con la última actualización de CF7

1.7.5

  • Fixed a PHP warning when no custom styles had been set
  • GDPR compliance

1.7.4

  • Fixed a bug where you needed to toggle «Use custom styles» off and on again before it actually worked

1.7.3

  • Corregido un problema de proceso de pago

1.7.2

  • Actualizaciones tras bastidores

1.7.1

  • Corregido un error de JavaScript en el último lanzamiento

1.7.0

  • Agregada opción de personalización para el colores de botón
  • Permitir organizar las casillas de verificación y botones de radio en columnas
  • Corregido mensaje «Los cambios hechos pueden no haber sido guadados» en formularios no editados
  • Allow hiding admin customize message on front end
  • Fix close button on ad for premium version
  • Actualizado el API de Freemius
  • Mejores estilos por defecto para etiquetas de campos de texto

1.6.2

  • Agregada una correción para temas que convierten la entrada de envío a un botón

1.6.1

  • Agregada integración con el plugin Contact Form 7 Live Preview

1.6.0

  • Agregadas más opciones de personalización
  • Actualizada la SDK de Freemius
  • Agregado un shortcode para asegurar que funcionen los atributos de diseño cuando estén profundamente anidados
  • Fix a Firefox bug with select options on dark theme
  • Added some CSS to make themes less likely to override styles

1.5.18

  • Actualización del SDK de Freemius, arregla un error con el montaje/despliegue
  • Agregado un programa de afiliado – gana dinero promoviendo el plugin

1.5.17

  • Fix a bug with file inputs inside conditional field groups

1.5.16

  • Corregido un error con Safari y diseños de múltiples columnas

1.5.15

  • Agregado un enlace de personalización a los formularios de la interfaz frontal

1.5.14

  • Permitida la inegración con otros plugins
  • Documentación actualizada

1.5.13

  • Actualización de la SDK de Freemius

1.5.12

  • Corregido un error que requería seleccionar campos

1.5.11

  • Corregido un error con los valores por defecto del campo de texto

1.5.10

  • Corregido un error con el campo de cuestionario
  • Dequeue Roboto if not needed

1.5.9

  • Corregidos un par de errores de IE Edge

1.5.8

  • Corregido un error en el campo de aceptación

1.5.7

  • Corregido un error de selector de fecha en iOS
  • Corregido un conflicto de CSS con un tema de WooThemes

1.5.6

  • Mejora de los estilos de carga de archivo

1.5.5

  • Actualización de altura mínima del tamaño automático de áreas de texto

1.5.4

  • Característica: tamaño automático de áreas de texto
  • Mejor representación de los atributos y html
  • Mejor personalización para entrada de archivo
  • Alineación más consistente de casillas de verificación con etiquetas largas y cortas

1.5.3

  • Hacer que el shortcode [md-text] funcione con el selector de fecha html5

1.5.2

  • Corregido un problema de margen negativo con la cuadrícula CSS

1.5.1

  • Actualizaciones menores tras bastidores

1.5.0

  • [Versión premium] permitir convertir casillas de verificación y botones de radio en interruptores
  • Actualización para corregir espaciado vertical con la cuadrícula CSS

1.4.0

  • Agregado campo de carga de archivo

1.3.3

  • Agregadas opciones de espaciado
  • Agregado soporte para cuestionario y recaptcha

1.3.2

  • Documentos mejorados

1.3.1

  • Minor bug fixes
  • Asegurarse que el plugin CF7 esté activo

1.3.0

  • Agregada página de sub-menú del plugin
  • Add pro version info

1.2.0

  • Actualizaciones técnicas

1.1.0

  • CSS refactorizado para ser más específico
  • Agregada opción de tema oscuro

1.0.0

  • Primer lanzamiento