Add HTML5 placeholder without losing Field label in Gravity Forms

Gravity form is wordpress best and must have form plugin that everyone should be installed in their WordPress single installation. Gravity form can help us to create simple forms e.g contact-us forms, quote forms, inquiry forms, appointment forms and share box form and also we can create more complex, advance and dynamic form e.g multi-page forms, survey forms. questionnaire forms, billing forms, shopping forms and also Email notification system. Thanks to the Gravity forms team to give us such rich options to create anything we need.

form_editor
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest
multi_page
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Apart from its feature still sometime there are more feature that some of us need but not included by default. Luckily we have addons for that purpose and we can install them to achieve some custom requirement. there are many addons that are available to download.

It’s Easy to Extend Gravity Forms to Integrate with Some Popular Web Applications and Online Services. Gravity Forms allows you to quickly and easily integrate with a range of third party services such as PayPal and provides for even deeper integration with WordPress through our pool of optional Add-Ons. Create and publish your WordPress forms in few minutes. No technicalities, just quick and easy form-building. Select your fields, configure your options and easily embed forms on your WordPress powered site using the built-in tools. That’s way more satisfying (and less fattening) than a peanutty candy bar any day.

form-survey-field1
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Now a days when we have HTML5 fields and forms tags there is a option of placeholder that is very handy and useful. Its add a text in a field so user can read what should or can be add in this field. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

How to add HTML5 placeholder text in Gravity form fields with out loosing field label ?

How can add an HTML5 placeholder, that doesn’t use the field label the way the 3rd party plugins do. The field label and the placeholder are not the same thing and using one for the other is a poor hack. The HTML5 placeholder was not designed to replace to field label, rather to be used in conjunction with it. I am currently only aware of one plugin which adds placeholders the correct way and that is Gravity Perks, it is a premium plugin so if that’s not for you there is an alternative method which involves adding some code to your theme’s functions file, however it doesn’t add placeholders to the same number of field types that Gravity Perks does.

Here’s the full code, what it does is add a placeholder option to the field settings panel in the form editor. Just copy and page it in your child-theme functions.php file and go to form and check your required field.

After adding this snippet you can check placeholder field in Gravity form fields panel like this.

HTML5 placeholder in Gravity Forms
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

This have been updated recently by Alex Gravity form lead developer to improve compatibility with ajax enabled forms. If you don’t know how to create child-theme then please read WordPress codex or Themify detailed article. Also you need the latest Gravity form version and WordPress version to make sure its works.

If you want to assigning the label as the HTML5 placeholder attribute on the input and hiding the label. This can be accomplished through the use of a plugin, I think these are currently the only two plugins available in the WordPress plugin repository

If you only have a few fields a bit of jQuery would accomplish it as well, the following example would add the placeholder Name to field 1 of form 5 for example

If you have more than a few fields than you can use first snippet and can add to your themes functions file that will add placeholders to the fields settings panel in the form editor. Gravity Forms Focuses on Simplicity, Ease of Use and Smooth Integration with WordPress that’s why I recommend it to everyone. We will share more Gravity form tips and Gravity form hacks that can be very useful. If you have some other hack or snippet to achieve this you can share with it and we will add with your name as credit. Keep visiting out other articles and be  a expert of WordPress.

gravity-form
  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Pinterest

Since I am using WordPress I never go back and this is my favorite tool. Let us know what you think about this hack or Gravity form by commenting below and don’t forget to share this on social media as you know sharing is caring.

Web consultant and Web Designer with over 7 years of professional and creative experience. Jamil is passionate about creating modern and user friendly websites that help businesses attract more customers and increase sales. He received bachelor and master in Business Administration and also co-founder of www.prepareddevelopment.com

Pin It on Pinterest

Share This