• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
September 10, 2015

Creating a Custom Gravity Forms Field With Multiple Hidden Fields

Posted by Emily Fox

In this blog post I’m going to run through how to add a custom Gravity Forms field that will add multiple hidden fields. This field would easily allow you to add multiple fields that are the same across different forms, saving you time when creating new forms. In my instance, I was hooking DemandBase into Gravity Forms, this required adding 40 additional hidden fields to each form for DemandBase to populate.

This code can go in your functions.php file, however I would strongly recommend adding it as a plugin. This ensures that it is not removed with any theme changes or updates.

Creating the Button / Custom Field

Note: I ended up removing the gform_add_field_buttons and gform_field_type_title filters in favor of extending the GF_Fields class instead.

One of the first things you will do when adding a custom field is add the field button to the field toolbox. This can be done by hooking into the gform_add_field_buttons filter. I did not end up using this as it was a lot easier to accomplish what I was trying to do by extending the GF_Fields class.

Once the new field box is added to your toolbox, you will want to assign a title to it. You can add a title using the gform_field_type_title filter. This displays before the Field ID, visible above a field when you hover over it. This is not the field label.

Rendering the Form Fields

The gform_field_input filter allows you to modify the field input. This is triggered before the form input field is created. In the below example, we are first checking that the field is our custom field, we don’t want to modify the input of any other fields. If it is our custom field, we want to render the input fields by looping through an array of all the fields. I called a custom_fields() function which just returned a simple array of fields i.e.

function custom_fields() {
    return array('one_field', 'another_field', 'a_third_field');
}

This was needed to match the field names to each field for the DemandBase field mapping. I added the field name as a class on that input and used that to dynamically map each field. We’re rendering each field with the name value of input_{fieldid}.{inputnumber} and an id of input_{fieldid}_{inputnumber}. This allows us to store all the input values for each field under the singular field ID, similar to how checkboxes or other multiple select fields work within Gravity Forms.

One unexpected issue I ran across was that you can’t use 10, 20, 30 etc. for the input number and must start with 1. Gravity Forms will remove the trailing zero, which causes conflicts with inputs 1, 2, and 3. My workaround for this was lines 18 – 20 below. The $i variable starts at 1, each foreach loop increases it by 1. If it is divisible by 10 then it adds another 1 and continues. The first input name is therefore input_{fieldid}.1 when it gets to the 10th item in the array the input name is input_{fieldid}.11 and so on.

Storing the Fields

Once you have rendered the fields you will need hook into the gform_editor_js_set_default_value action hook. This field allows you to define default field properties when creating a new field type. It is needed for the form entry submission to register the custom fields created. We are hooking into Gravity Forms’ SetDefaultValues() function, allowing us to inject JavaScript in. Once again, we first want to check that we’re in our new field type, not modifying another field. We then loop through each of our custom fields and create a new Input.

Extending the GF_Field Class

The form fields wasn’t working exactly as I wanted, the stored entry submission was not displaying in the admin area and I had an error on form submission that my custom field data array was being converted to a string. This was caused because the form was trying to save using the default GF_Field class, which works kind of as a catch all for fields not defined. To resolve this I exteded the GF_Field class. This allowed me to remove some of the filters I had setup as they were now managed through my new class.

The functions get_form_editor_button and get_form_editor_field_title are used to create my button and custom field type title, rather than using filters. The get_field_content function allows me to remove the hidden field label from the form, this is taken from the GF_Field_Hidden class (gravityforms/includes/fields/class-gf-field-hidden.php).

The get_value_entry_detail function was needed to fix the error I got when submitting a form, this code was taken from the GF_Field_Checkbox class (gravityforms/includes/fields/class-gf-field-checkbox.php). It treats the entry submission for our custom field as an array of data, which it is, rather than a string. By storing the data correctly, it also allows the data to display correctly in the form entry data when viewing it in the admin area.

Additional Resources

  • Gravity Form Documentation
  • WP Smith – How to Create a Custom Form Field in Gravity Forms with a Terms of Service Form Field Example
  • AgencyUK – Custom Multiple Input Form Form Gravity Fields

Hopefully this post helps you add your custom Gravity Forms field and saves you a lot of time!

– Emily Fox

Gravity FormswordpressWordpress how-to
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.