How to apply Material Design to Contact Form 7

person Angusfolder_openUncategorisedaccess_time February 24, 2017

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

That’s the intro to Material Design that Google has up on It’s a bit confusing though, if I had to sum it up myself, I’d say:

Material Design is a set of guidelines that outlines how your website or app should look and behave.

It’s been steadily gaining popularity for the last couple of years, and has really taken off now that Google have actually applied the guidelines to Android and most of their apps.

There are many WordPress themes that apply Material Design as a whole, and that’s great, but the good thing about Material Design is that it can be applied to as much or as little of your website or application as you like. One of the most popular and recognizable parts of the guidelines is the form styles. Today I’ll show you how to very simply apply Material Design to your WordPress forms.


Here’s what we’ll be creating. Try filling it out to see the interactivity in action.

Step 1. Install Contact Form 7

Contact Form 7 is the most popular plugin for WordPress. It doesn’t do everything out of the box, but there are extensions that can make it do just about anything. The first step in adding Material Design to your WordPress forms is to download and install Contact Form 7.

Step 2. Install Material Design for Contact Form 7

Material Design for Contact Form 7 is a free plugin that enhances Contact Form 7 by applying Material Design to the form elements. Download and install the plugin by searching for “Material Design for Contact Form 7” from the Plugins > Add New page in your WordPress dashboard.

Step 3. Create your form

If you installed Contact Form 7 correctly, you’ll see a new menu item in your WordPress dashboard called “Contact”. If you click that, you’ll see that as part of the install process, a “dummy” form was created. Click on it’s title to edit it, or if you prefer, click “Add New” at the top of the screen to start from scratch. Click save right away (even though we’re going to make changes in a bit).

Step 4. Add the form to your page

On the form edit screen, just under the title, you’ll see a section that says “Copy this shortcode and paste it into your post, page, or text widget content:” and below it there is a shortcode. Go ahead and copy the shortcode. Once it’s copied, open up a new tab and go to the edit screen of the page or post where you’d like the form to appear (E.g. your contact page) and paste the shortcode into the content section where you’d like the form to appear.

Save the page and preview it. You’ll see that the form is displaying, but it does NOT yet have Material Design applied.

Step 5. Add Material Design to your form

Now it’s time to apply the magic. Go back to the form editing screen and look at the right side of the page. You should see a meta-box titled “Material Design”. In it, you’ll see that there’s some example code. This code is actually the default form but with Material Design applied. The next step is to delete your existing form fields (I.e. the form editor should be blank) and copy the example code from the Material Design meta-box into the form editor.

Note: If you changed your form earlier by adding or editing fields, don’t delete it or you’ll lose your changes. Instead, read along with the rest of the tutorial and then come back later and make the required changes to your form once you understand what to do.

Once you’ve copied the code into the form editor, save the form then go back to your preview page and refresh. Your form should now have material design applied. There’s no need to copy the shortcode again because that doesn’t change, it just references our current form, so whenever we make changes to the form, they will appear on the page automatically.

Step 6 and 7 (optional) – Have a quick look over the documentation

If you’re happy with your form as-is, then you’re done! But if you want to add other types of fields (like a dropdown box or checkboxes/radios) then there’s still a bit more to learn.

The “Material Design for Contact Form 7” plugin adds Material Design to your forms by wrapping the form tags in shortcodes. There’s a different shortcode that wraps each different form tag, so you’ll need to look at the available shortcodes in the documentation to figure out how they all work.

To read the documentation, click on “Documentation” in the Material Design meta-box, or click “Help” at the top of the screen, and then choose “Material Design”.

From this point you should be fine to make any further changes to your form, using the documentation as a guide. As a quick outline though, here’s how the process goes for adding a new field to your form.

  1. Choose a field type from above the form editor, click it and fill out the details to create your field.
  2. Click “Insert Tag” to add it into your form.
  3. Open the documentation and find the appropriate shortcode and parameters to wrap your new field with.

That’s it!

If you have any questions, leave a comment below.


  1. for me columns are not working. I have used ‘ tabletwidth=”4″ desktopwidth=”6″ ‘ for two fields, but it doesn’t generated in single row?

    1. Columns are a pro version feature. If you’re not on the pro version, the width attributes will not work.

  2. gives this error
    Fatal error: Call to undefined function is_customize_preview() in C:\wamp\www\Screening\wp-content\plugins\material-design-for-contact-form-7\public\cf7-material-design-public.php on line 111

    1. Hi Rohit,

      That error indicates you’re probably using an older version of WordPress. The plugin requires at least WordPress version 4.4.

      If you’re not using an older version, please let me know. There may be something else wrong.


      1. thank you soo much Angus, it works !!

  3. Mohamed Mostafa

    how to apply RTL ?

    1. Hi Mohamed, unfortunately RTL isn’t supported in the current version. It is marked as a feature for version 2.0 of the plugin.

  4. This is awesome and everything. Is there anyway to apply this material design onto dropdown’s? Because I don’t see that like anywhere?

    Thanks for this, hey.

    1. Nevermind, lol. Sorry, I found it.

  5. I have an error on the top of the screen. I already uninstall and install all over again. What to do with this error? /wp-content/plugins/material-design-for-contact-form-7-premium/public/cf7-material-design-custom-style.php on line 71

    1. Hi Ron, this is a known issue and I will release a fix soon. For now you can fix it by going to the customiser and changing one of the settings under Material Design Forms.

    2. Hi Ron, FYI the fix for this issue has now been released. Updating the plugin will resolve the issue.

  6. With the latest version of Material design generate php fatal error.

    All sites will go down

    Got error ‘PHP message: PHP Parse error: syntax error, unexpected ‘[‘ in /site/wp-content/plugins/material-design-for-contact-form-7/public/cf7-material-design-public.php on line 422\n

    1. Hi @liberomic,

      Apologies for this. This has now been fixed in the latest release – v1.7.7.

      FYI it was an issue on versions of PHP prior to 6.0. You can read more about it here if you like.


  7. Hi what about free text in radio button for example “other” that enable a feld to let the user write something

    1. Hi Jessy,

      Currently the CF7 ‘other’ option is not supported, but we recommend using the Conditional Fields for Contact Form 7 plugin to achieve the same thing (Add an “other” option to your radios, then add a text field below that is only shown if the “other” radio is checked).


  8. Nattanit Ittiattanee

    I activate the plugin and then my site is broken. It showed error ‘ Fatal error: Cannot redeclare tgmpa() (previously declared in /home/merakiinth/domains/ in /home/merakiinth/domains/ on line 2111’ so I can’t do anything but delete the plugin

    1. Hi Nattanit,

      This is a problem with your theme. It is using an older version of the TGM Plugin Activation class.

      You should let your theme’s author know about this issue.

      If you want to try to fix it yourself you need to go to wp-content/themes/philos/framework/plugins/theme-plugins-activation.php and update the code to the latest version of TGM Plugin Activation, which you can find here:

      Important note: You will first need to check if the file in your theme contains more than just the TGM Plugin Activation class. If it does, you should only replace that part and leave the rest. If you’re not sure how to check this, you should definitely ask your theme’s author to fix it for you.


  9. I have WP 5.1 and Contact Forms 7 installed but I have installed reCaptcha v3 (the one without any need to solve some puzzle or enter text) and this reCaptcha is integrated into Contact Form 7. Will you plug-in break the reCaptcha functionality?

    1. Hi Cyril,

      The latest version of Contact Form 7 uses the invisible reCaptcha by default – this will work with my plugin.


  10. Hi,
    I have installed Material Design contact form 7 plugins in my site. Every thing works well. But Phone Number field doesn’t work.It sends vacant data.Would you please give me any way to solve this problem.
    SK Banik

    1. Hi SK Banik,

      If you’re not getting the phone number in your email notifications, it’s most likely because the mail tags in your email template are incorrect. See this page for an overview of how it works –


  11. This is a nice plugin and I have used it on my site. The problem is I am getting the getting and loading page over the HTTP request to get the page as a response. There it is not showing the material design. Is there any js method to re-init it?.

    1. Yes there is. You can call window.cf7mdInit() to re-initialize a dynamically added form.

  12. Does this plugin work with different themes perfectly?

    1. It is built to work with as many themes as possible. Some themes do weird things but usually if you post any theme issues to the forum they will be sorted out.

  13. Ignacio Ruiz-Tagle

    I´trying use it but it does not work…

    1. Hi Ignacio,

      I don’t monitor this post for support. Please post your question on the support forum.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">