Search
Close this search box.
Search

How to Create a Custom Field in Gravity Forms

Listen to this article

gravityforms_logoGravity 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! 🙂

Sonali Agrawal

Sonali Agrawal

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads