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 material.io. 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.

Demo

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.

Comments

  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.

      Thanks,
      Angus

      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.

      Thanks,
      Angus

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="">