Introduction

Material Design for Gravity Forms is an addon of the Gravity Booster plugin. It lets you apply Google’s material design UI on Gravity forms with one click. You can also customize multiple settings like font size, font weight, letter spacing, and many more with this addon.

Requirements

Material Design for Gravity Forms works only after you have installed and activated the following plugins.

• Gravity Forms: Material Design for Gravity Forms has been specially built for Gravity Forms. Once you enable the addon on any specific form then it automatically modifies the HTML structure of fields to be compliant with the material design library.
• Booster for Gravity Forms: Material Design for Gravity Forms is built on top of Gravity Booster for Gravity Forms. it is a free plugin that lets you style different parts of the form without coding. So, to access the material design options you need to have Booster for Gravity Forms installed and activated.

Installation

Material Design for Gravity Forms is a premium plugin and after your purchase, you will get a zip file.

Follow the step-by-step guide below to install and activate the addon.

• Get the material design addon by clicking here. After your purchase, you will immediately get the download link for the addon in your email. This direct download link is valid for a limited time. You can download your purchased add-on anytime from your WPMonks account.
• Now login to your WordPress backend and go to Plugins -> Add New. From here click on the upload button. Browse the zip file you just downloaded and then upload it. After the plugin is successfully uploaded then don’t forget to click on the Activate button.

Steps to Apply Material Design on Gravity Forms

The process of applying material design on Gravity Forms is pretty straightforward. Since material design addon is a no-code solution, you have to click on a couple of options and your form will immediately get transformed.

• From your WordPress backend navigate to Forms -> Booster. 
• Select the form on which you want to apply material design. 
• Now go to the Material Design panel and check the Enable Material Design option. The form preview will immediately refresh and show you the form with the material design.
• Click on the Save button and the form with the material design will show on the front end as well.

Material Design Customization Options

Material design addon comes with plenty of customization options to make your forms unique and help them stand out.

• Theme Color: This sets the primary color of the material theme, which shows as active borders when you click inside any field. It also sets the color of the checkbox and radio input boxes. The next, previous, and submit buttons also get color from this setting. The value of the theme color can be set using the color picker which also accepts values in hex, RGB, and HSL.
• Style: You can choose from filled and outlined design options.
• Font Family: You can choose from 100+ font families. These will be applied on all the different parts of the form like labels, inputs, textarea, and buttons.
• Font Size: This sets the font size for the labels.
• Line Height: This sets the space between labels and input fields.
• Letter Spacing: It adds space between characters of the label.
• Font Style: This setting can be used to make the labels bold, uppercase, and underlined.
• Helper Font Size: This option is for setting the font size of the field descriptions.
• Helper Line Height: It sets the space between two lines of field descriptions.
• Helper Letter Spacing:  It sets the space between characters of field description.
• Helper Font Style: It can be used to set the text of field descriptions to bold, uppercase and underline.

Similarly you can do font size, line height, letter spacing, and font style options for sections, choice texts as well as submit buttons.

All the design changes you make in the material design addon are live previewed. Once you are happy with the changes then you publish them by clicking on the save button.

Material Design Supported Fields

We are constantly working on adding new fields to list of supported fields for material design. The following fields are supported as of now:

• Text, Number, Email, Website, Date, Phone, Post Title, Post Tags, Quantity, Post Custom, Field, Name, Select, Option, Shipping, Checkbox, Post Category, Radio, Address

Frequently Asked Questions

Once Enabled will material design get applied on all Gravity Forms?

Material Design gets applied on the form which you enable it on. We have took great care in making sure that it doesn’t change any part of the site except the form you have enabled it on.

I have a Gravity Form Field that is added by a plugin and it doesn’t get converted to material Design. What should I do?

Please use the contact form and send us an email with the name of the plugin you are using to add a new field. We will make that field compatible with the Material design add-on.

How often does this addon receive updates?

We are constantly working on improving this addon. If you face any issues then get in touch with us and we will update the plugin with the fix.

Material design is not working as expected on my site. What should I do?

Since material design heavily relies on CSS and expects the CSS to be well written sometimes it may happen (rare) that it doesn’t look as it should. In that case, we will be happy to help you out to make your form fully compatible with material design.