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.