How to make a contact form 7 material design

Contact form 7 material design can be introduced to add a new form design. CF7 material design is an addon that can be used by adding Googles “Material design theme”. It applies the default material design colors through using WordPress customizer. So one can easily change the fonts and the colors as one’s preference.

Material design will provide you the look. After using the design your contact form will become a new look. So, Today will know about it and how it works.

Feature of contact 7 form material design:

There are some unique features that include-

  • Material design is a set of guidelines with the shortcodes.
  • It provides an outline about how the contact form will look on the screen.
  • It allows adding Google’s “ Material Design” to WordPress form.
  • The short-codes are made to cover CF7 form tags and provide a material design theme to the tags.
  • It allows making regular contact systems more sophisticated and stylish form.
  • Its premium version offers some extra features.

Some new features for version 2.0:

  • Text and selection fields come in box form and have a variety of outline.
  • Text area has an inward label.
  • Variation of new buttons such as Elevated that’s used as default, non-elevated and outlined.
  • Better browser experience that supports including IE11, iOS8+, and all modern browsers.
  • Customize the CSS feature having syntax highlights.
  • Through the original or legacy styles, you can select to continue the app.
  • One can easily customize the margins, borders, padding, and fonts.

Supported features for individual’s version:

It has two versions. Currently, supported version includes-

  • Dark and light theme.
  • Checkbox.
  • Text input.
  • File uploading field.
  • reCaptcha.
  • Submission button.
  • forms include quiz sections.

Another Pro version supported features are-

  • Color and fonts can be customized.
  • Fields are arranged into columns.
  • Radios and check-boxes are turned into Switches.
  • Support direct e-mailing.
  • Leading icons are added for text and selected fields.

The most important thing is that one can easily upgrade to pro version at any suitable time without exiting the WordPress.

Other plugins with which it works well:

There are some other plugins with which Material design contact 7 is compatible. These are as follows-

  • Contact form 7 live preview.
  • Contact form 7 style.
  • Multiple upload field for contact form 7.
  • Contact form 7 multi-step forms.
  • Conditional fields for Contact Form 7.
  • Invisible recaptha for WordPress.
  • MailChimp for WordPress.


How to activate contact form 7 Material design:

At first, go to ‘plugin’ and then ‘Add new’. Then type ‘Material design’ in the search box. Then it will appear in the plugin list and Click on the ‘Install Now’ button.

If the plugin is already installed then just activate it by clicking ‘Active’.

How to use this plugin:

From the contact form menu when you will click the edit option of your existing contact form you will get a pre-generated material design shortcodes in the right side. It will something line below


[md-text label=”Your name”]
[text* your-name]

[md-text label=”Your email”]
[email* your-email]

[md-textarea label=”Your message”]
[textarea* your-message]

[submit “Send”]


This is the material design default code. If you want then you can customize it. If you want to add some new elements then you have to click the material design button which you will find on the right side of the contact form. After clicking the material design button a new window will appear name material design shortcode generator.

Material design shortcode

Click on any item to add on your contact form. Place the cursor where you want to add the item.

Let’s say, You want to add the radio button. So, Click on the material design button and then click the radio item. It will generate the code like below:

[md-radio label=””]
{{A single radio form tag goes here}}


Then you have to go to the contact form default radio option and copy the tag and paste it where the line with curly brackets. Like below:

{{A single radio form tag goes here}}


[md-radio label=”Yes/No”]
[radio radio-497 label_first default:1 “Yes” “No”]


Also, you will get the necessary documents by clicking ‘Help’. The ‘Help’ button is found on the top right side of the screen. Then select ‘Material Design’ from the CF7 editor screen.

For easy contact form 7 styling with plugins: If one wants a quick styling form then choose some plugins those works better. Such as-

Contact form 7 style: It has a numerous number of previously preset styles for that one can easily choose a suitable and preferable style for one’s screen. Most popular among these is Valentines and Christmas style.

To apply this style at first go to ‘contact styles’ then ‘quick edit’ option. In a quick edit option, you have to select the style that you want. And then click ‘update.’

You can also add your own style just by clicking ‘contact style’ and then ‘add new’

Material design for contact 7 form is an amazing and common plugin for constructing WordPress contact forms. It has over 3 million active installers worldwide.  It’s so simple to use.  So anyone can use it without any hassle.

Related Post

Leave a Reply

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