Pros and Cons of Material Design for Contact Form 7
We want to start by saying that Material Design for Contact Form 7 is not a cure-all solution. It is an extension for Contact Form 7 that creates a friendlier design for forms and, in its paid version, offers interesting options such as a pre-designed form for dark or black backgrounds (“Black Form”), transforming buttons and checkboxes into switches, and changing parameters like font size and button style.
You can find the free version of the plugin in the WordPress repository here:
https://es.wordpress.org/plugins/material-design-for-contact-form-7/
The least appealing aspect of this plugin is its complexity. The functionality it adds to Contact Form 7 isn’t very intuitive and is based on shortcodes, so it’s best to understand how these work before designing a form with this extension.
Additionally, the integrated Captcha doesn’t work properly and lets through a lot of spam. Therefore, we recommend adding Google Captcha instead. In particular, we use Advanced noCaptcha & invisible Captcha (v2 & v3) by Shamim Hasan to add Google Captcha to our forms:
To make your work easier with this plugin, we want to share 4 ready-to-use forms with their respective codes that you can copy and paste directly into Contact Form 7 + Material Design for Contact Form.
Pre-designed form templates with Material Design for Contact Form 7
Form Template 1
[contact-form-7 id=”10626″]
Code for the message body:
NAME: [your-name]
E-MAIL: [your-email]
INQUIRY: [menu-397]
CITY: [your-address]
PHONE: [number-584]
MESSAGE: [your-message]
Form Template 2 (BLACK)
[contact-form-7 id=”10627″]
Code for the body of the message::
NAME: [your-name] E-MAIL: [your-email] WHAT DO YOU PREFER: [checkbox-43] MESSAGE: [your-message]
Form Template 3
[contact-form-7 id=”10632″]
Code for the body of the message:
Name: [your-name] Email: [your-email] City: [your-address] Phone: [number-584] Option: [checkbox-613] Number: [radio-671] Attachment: [file-68] Message: [your-message]
