Contact Form 7 forms can be as responsive and interactive as an app, just by adding Google’s “Material Design” theme.
Contact Form 7 style
This plugin provides a bunch of shortcodes that are made to wrap around your CF7 form tags and apply a material design theme to them.
Contact Form 7 + Material Design in action
Take 30 seconds and see how your contact forms could look. Watch the video below and/or play with the live demos.
What’s new in Version 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.
- New button variants. Elevated (default), unelevated and outlined.
- Better browser support. IE11, iOS8+, plus all the modern browsers.
- Custom CSS now has syntax highlighting.
- You can choose to continue using the original/legacy styles if you prefer.
Contact Form 7 can be more interactive
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:
- Light or dark theme
- Text input (includes text, email, url, tel, number, date) – boxed and outlined variants
- Textarea with optional auto-resizing
- Select/drop-down menu – boxed and outlined variants
- Checkboxes
- Radios
- Acceptance
- File upload field
- Submit button (including loading spinner)
- Quiz
- ReCaptcha
- Other (validation/success messages etc)
Pro version:
- Customize colours and fonts
- Arrange fields into columns
- Turn radios and checkboxes into switches
- Add leading icons to text and select fields
- Group fields into sections with cards
- Direct email support
You can upgrade to pro at any time without leaving WordPress.
Works well with these other plugins:
- Contact Form 7 Live Preview
- Mailchimp for WordPress
- Conditional Fields for Contact Form 7
- Contact Form 7 Multi-Step Forms
- Invisible reCaptcha for WordPress (but not CF7 Invisible reCaptcha)
- Multifile Upload Field for Contact Form 7 (basic support)
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 for Contact Form 7 applies the default Material Design colours and fonts to your form by default, but you can use the WordPress customizer to change the fonts and colours to your liking if you’re on the Pro version.
- Upload the zip to the
/wp-content/plugins/directory and unzip - Activate the plugin through the ‘Plugins’ menu in WordPress
OR go to ‘Plugins’ > ‘Add new’, and search for ‘material design for contact form 7’ to install through the WordPress dashboard.
What is Material Design?
Material Design is a set of guidelines, written by Google, that outline how your website or app should look and behave. Most Google apps use Material Design, including Android itself.
Do I need a Material Design theme as well?
Not at all! The beauty of Material Design is that you can take as much or as little of it as you like. It’s perfectly fine to just have your forms styled with Material Design and not the rest of your site.
For more ways to add Material Design to your WordPress site (without changing your theme), see WordPress Material Design.
How do I use this plugin?
All documentation can be found by clicking ‘Help’ (top right of the screen) and then ‘Material Design’ from the CF7 form editor screen.
For a more in-depth tutorial, see How to apply Material Design to Contact Form 7.
It doesn’t look right for me!
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.
The labels are tiny
Some themes have CSS that makes the labels really small. You can fix this in the customizer (Appearance > Customize > Material Design Forms) by setting the option to force default font sizes.
I love it. I was a bit reluctant to use it, but after installing it, got the way the shortcodes need to be implemented, and it is pretty straightforward.
I just used the basics, and it works cool right out of the box.
Just purchased the PRO version and it is a really good one. Instead to spend lots of time coding to implement material forms, I nade it in minutes.
If you deal with forms to collect leads, this plugin is a must have.
Really love the plugin, has taken all of my contact forms to the next level.
Since I have moved to the pro version the support from Angus has been truly incredible and helped me out a lot.
Thanks man!
Such a crazy stuff.
I feel sorry for those users who increase their website-size only for a form
I went with Material Design to make our website appear really professional, and the Documentation was good. We needed some advanced CSS customizations for our specific theme, and we received fast support from the Material Design team that solved exactly what we needed. Great experience.
Y SE LOS PONGO EN ESPAÑOL Y EN MAYÚSCULAS PARA QUE ENTIENDAN.
LES PONGO UNA ESTRELLA PORQUE NO PUEDES PONER CERO ESTRELLAS.
SIMPLEMENTE SUBÍ EL PLUGIN Y EXPLOTÓ, PONIENDO ABAJO MI WEBSITE. POR SUERTE PUDIMOS SUBIRLO.
NO USEN ESTE PLUGIN, MEJOR USEN CONTACTFORM7 DE MANERA BÁSICA.
“Material Design for Contact Form 7” is open source software. The following people have contributed to this plugin.
Contributors
