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.
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.
- Choose a field type from above the form editor, click it and fill out the details to create your field.
- Click “Insert Tag” to add it into your form.
- Open the documentation and find the appropriate shortcode and parameters to wrap your new field with.
If you have any questions, leave a comment below.