How to Add a Custom Attribute to a Gravity Forms Field

In Gravity Forms, fields contain attributes.

These attributes or custom field settings are present under the General, Appearance or Advance tabs of the field.

The form fields have a general set of attributes under specific categories. For example:

• General
  • Field Label
  • Description
  • Rules

• Appearance
  • Placeholders
  • Description Placement
  • Custom Validation Message
  • Custom CSS Class

• Advanced
  • Admin Field Label
  • Default Value
  • Visibility
  • Allow field to be populated dynamically
  • Enable Conditional Logic

Now while these field settings work well for most use cases. But there could be a need to add an extra setting or two.

Case in point a custom select field to pick a highlighting option.

On a recent project, we had a requirement, where the client needed a simple select field attribute to pick a highlight option for default Gravity Form fields. The client preferred using this option over entering a CSS class, as it was less prone to error and easy to follow.

So, in this case, we had to create a custom field attribute and associate it with the field.

Similarly, you can add Let’s take a look at how this can be done.

[space]

Adding Custom Settings to Gravity Forms Fields

The way to go about this, is to implement two simple steps! 🙂

#Step 1 Display a Custom Setting

To display a custom setting under say a field in the ‘General‘ section, you have to add a function on the ‘gform_field_standard_settings‘ hook as follows:

add_action( 'gform_field_standard_settings', array( $this, 'wdm_gf_add_custom_field' ), 10,  2);

Similarly, if the field has to be displayed under the ‘Appearance‘ or ‘Advance‘ section the ‘gform_field_appearance_settings‘ or the ‘gform_field_advanced_settings‘ hook has to be used respectively.

The field can then be displayed as follows:

public function wdm_gf_add_highlight_field( $position, $form_id )
{
    if ($position == 50) {
         // retrieve the data earlier stored in the database or create it
          $highlight_fields = array('First Choice'=>'First Choice','Second Choice'=>'Second Choice','Third Choice'=>'Third Choice');
           ?>
           <li class="hightlight_setting field_setting">

                    <label for="highlight_field" class="section_label">
                           <?php esc_html_e('Highlight', 'gravityforms'); ?>
                    </label>

                  // add field type: Start Section A

                    <select id="highlight_field" onchange="SetFieldProperty('highlightField', this.value);">
                    <?php  foreach ($highlight_fields as $key => $value) { ?> 
                         <option value="<?php echo $key;?>"> <?php echo $value; ?> </option>
                    <?php  }  ?>
                    </select> 

                // End Section A

            </li>
       <?php
       }
   }

#Step 2 Store the Custom Setting Value

To display the custom attribute field for all fields and then store the value, here’s what you need to do!

// save the custom field value with the associated Gravity Forms field
add_action('gform_editor_js', array($this, 'wdm_editor_script'), 11, 2);

public function wdm_editor_script()
{
  ?>

   <script type='text/javascript'>

   // To display custom field under each type of Gravity Forms field
   jQuery.each(fieldSettings, function(index, value) {
     fieldSettings[index] += ", .highlight_setting";
   });

   // store the custom field with associated Gravity Forms field
   jQuery(document).bind("gform_load_field_settings", function(event, field, form){
     
     // save field value: Start Section B
     jQuery("#highlight_field").val(field["highlightField"]);
     // End Section B

    });

   </script>

   <?php
}

Making the Code Generic

Instead of a select field if you want to display another field type, all you need to do is replace a few lines, under Section A and Section B.

For example, if you want to show a checkbox instead of a select field then you’ll have to add the below under the Section A

<input type="checkbox" id="field_cust_value" onclick="SetFieldProperty('custField', this.checked);" /> 

and Section B respectively.

jQuery("#field_cust_value").attr("checked", field["custField"] == true);

That’s about it! 🙂

[space]

You can customize the code to add the custom attributes on certain Gravity Forms fields too (instead of all fields).

 If you have any questions, regarding what we’ve discussed so far, do let me know, and I’ll try my best to help you out! 🙂