Material Design for Contact Form 7

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.