Adding Custom Form Fields

From Age Gate v2 you can add custom fields to the challenge form. The process has been changed slightly in v3, but primarily there is more control for developers to extend the form.

The main difference is form fields are now added via an action, not a filter.

The following steps show how this is achieved.

Adding a form field

To add a form field, you need to hook into one of the actions listed below. For the purpose of this guide, we’re going to use the age_gate/custom/after action to add a field after the standard fields.

Let’s start by adding a simple field:

functions.php

add_action('age_gate/custom/after', 'my_custom_fields');

function my_custom_fields()
{
    echo '<label><input type="checkbox" name="ag_field_terms" value="1" /> I accept the terms and conditions</label>';
}

Visiting the site should now show a new checkbox in Age Gate. However, nothing is really happening with it yet, it needs some validation.

Validating a custom form field

We want to ensure the user has ticked our new terms and conditions box, for this add a filter to age_gate/validation/rules hook

functions.php

add_filter('age_gate/validation/rules', 'my_validation_rules');

function my_validation_rules($rules)
{
    return array_merge($rules, [
        'ag_field_terms' => 'required'
    ]);
}

The key of our array contains the same value as the field name from the first part. The second part is the validator we want to use.  For more complex implementations, you can chain the rules using a pipe (|) separator.

We now have a required custom field, and submitting the form with give the desired error, but it’s not very user friendly as it reads “The Ag Custom Ag Field Terms field is required“. Let’s fix that.

Setting the display name of a custom field

To set the field name to something a little more user friendly, use the age_gate/validation/field_names filter:

functions.php

add_filter('age_gate/validation/field_names', 'my_field_names', 10, 1);

function my_field_names($names)
{
    return array_merge($names, [
    'ag_field_terms' => "terms and conditions"
  ]);
}

That’s it, the error message will now read “The terms and conditions field is required” and our custom field is ready to go.

Possible actions for custom fields:

Any of the following actions could be used to add a form field

• age_gate/form/open (Priority higher than 10)
• age_gate/logo
• age_gate/headline
• age_gate/subheadline
• age_gate/custom/before
• age_gate/fields
• age_gate/fields/after
• age_gate/custom/after
• age_gate/submit
• age_gate/additional
• age_gate/form/close (Priority lower than 10)