How to Create a Custom Field in Gravity Forms

Gravity Forms is a comprehensive form builder plugin. It has multiple form fields, a drag and drop form creator interface, custom notifications on form submissions- the works!

It also has sufficient filters and hooks to extend its functionality.

A lot of form customization requirements that come our way, involve us changing the default form fields. Apart from adding custom attributes to Gravity form fields, we have to add custom fields too!

I had to create a custom field on a recent project, and I thought the steps were worth sharing, in case you had a similar requirement.

Custom Field Creation in Gravity Forms

Creating a custom field in Gravity Forms is a matter of extending a base Gravity Forms field class. You will need to override corresponding functions to support the custom field type created.

The below code can be added to a site specific plugin you create.

class Custom_Field extends GF_Field
{
  public $type = 'custom_field_type';

  public function get_form_editor_field_settings() {
    // your code here
  }
  public function get_field_input( $form, $value = '', $entry = null ) {
    // your code here
  }
 ....
}

Let’s take for example, you want to add a custom checkbox field. In this case, you will have to override the functions as done in (plugins -> gravityforms -> includes -> fields ->) class-gf-field-checkbox.php.

You can create any field type by overriding corresponding functions of the particular type of class in Gravity Forms.

Personalizing the Custom Field

By overriding filters provided by Gravity Forms, you can personalize your custom field. For example if you want to define custom styling for your field, you can do so by adding a custom class as follows.

add_filter( 'gform_field_css_class', 'wdm_add_custom_class' );
function wdm_add_custom_class($classes, $field, $form)
{
  if ($field->type == 'custom_field_type') {
    $classes .= 'custom_field_setting';
  }
  return $classes;
}

If you want to set default values for the field, you can do so by adding a handler for the hook ‘gform_editor_js_set_default_values‘.

add_action( 'gform_editor_js_set_default_values' , 'wdm_set_default_values' );
function wdm_set_default_values()
{
  // Define the type of Gravity Forms field you are creating
  ?>
  case 'custom_field_type' : field.inputType = 'checkbox';
  field.label = <?php echo json_encode(esc_html__('Custom Field Title', 'gravityforms')); ?>;
  if (!field.label)
    field.label = <?php echo json_encode(esc_html__('Custom Field Title', 'gravityforms')); ?>;
  if (!field.choices)
    field.choices = new Array(new Choice(<?php echo json_encode(esc_html__('First Choice', 'gravityforms')); ?>), new Choice(<?php echo json_encode(esc_html__('Second Choice', 'gravityforms')); ?>), new Choice(<?php echo json_encode(esc_html__('Third Choice', 'gravityforms')); ?>));
  field.inputs = new Array();
  for (var i = 1; i <= field.choices.length; i++) {
    field.inputs.push(new Input(field.id + (i / 10), field.choices[i - 1].text));
  }
  break;
  <?php
}

For similar field type your code should be similar to the switch case present under plugins -> gravityforms -> js.php.

Summing Up

Ideally, if you can make do with default form fields, there isn’t a need to create custom fields in Gravity Forms. If creating custom fields is the only way out, (say you need this for a client or to enforce restrictions on particular fields), the above solution has you covered.

Of course this method should be employed by those who are comfortable with code. If not, you can certainly hunt for an extension plugin.

Got questions? Ask away! 🙂