Advanced example

In this guide, we’ll be adding multiple fields that aren’t validated by default by Age Gate, ensure you have read the adding custom form fields section before this section.

We’ll be adding an email field before the main fields and a reCAPTCHA field after the form. For this example, a standard text input will be used for the email address to best demonstrate Age Gate validation.

As before, we start by adding a fields. We’ll cover the email address first.

functions.php

add_action('age_gate/custom/before', 'my_custom_email');

function my_custom_email()
{
    $field = '<label for="custom_email_input">Email Address</label>';
    $field .= sprintf('<input type="text" name="custom_email_input" id="custom_email_input" placeholder="Enter an email address" value="%s" />', age_gate_set_value('custom_email_input'));
    echo $field;
}

Next, we’ll add a validation rule and readable field name for the email address

functions.php

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

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

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

function my_field_names($names)
{
    return array_merge($names, [
        'custom_email_input' => "Email Address"
    ]);
}

The field is now required, but allows and content, not just a valid email. To fix this, we can pipe multiple validation rules together in the age_gate/validation/rules filter:

functions.php

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

The email address field will now be both required and a valid email address.

Adding fields with custom validation

Adding the reCAPTHCA field

This time, we’ll add the field after the standard fields, so we’ll use the age_gate/custom/after action:

functions.php

add_filter('age_gate/custom/after', 'add_recaptcha_field');

function add_recaptcha_field()
{
    echo '<div class="g-recaptcha" id="recaptcha-age-gate" data-sitekey="YOURSITEKEY"></div>';
}

Replace YOURSITEKEY with your own reCAPTCHA key and secret, if you don’t have one, you can get one from the reCAPTCHA website.

Next we need to add the reCAPTCHA JavaScript, if it’s not already on your site.

functions.php

add_action('wp_enqueue_scripts', 'enqueue_recaptcha');

function enqueue_recaptcha()
{
    wp_enqueue_script('recaptcha', 'https://www.google.com/recaptcha/api.js?onload=recaptchaInit', [], '', true);
}

Adding a custom validator for reCAPTCHA

Now we have our reCAPTCHA available, we need to be able to validate it. We’ll now hook into the age_gate/validation/add_validators action to add a custom validator.

functions.php

add_action('age_gate/validation/add_validators', 'my_recaptcha_validation', 10, 1);

function my_recaptcha_validation($validator)
{
    $validator::add_validator('recaptcha', function ($field, array $input, array $params, $value) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $data = [
            'secret' => '6LebUN4aAAAAAB_1mnBLMOAnQWoPRFhQNKnuWsy6',
            'response' => $input[$field]
        ];

        $options = [
            'http' => [
                'method' => 'POST',
                'content' => http_build_query($data),
                'header'=> "Content-type: application/x-www-form-urlencoded\r\n",
            ]
        ];

        $context  = stream_context_create($options);
        $verify = file_get_contents($url, false, $context);
        $captcha_success = json_decode($verify);

        return $captcha_success->success;
    }, 'The {field} is required');
}

When adding custom validators, we use the add_validator method of Age Gate’s validation class which is passed down from the action. Then method takes 3 parameters:

Validator::add_validator(string $rule, callable $callback, string $error_message)

• $rule (string) The name of the rule
• $callback (callable) The function that handles the validation
• $error_message (string) The returned text on failure

Above, we are using this to add a validation method called recaptcha to the Age Gate validation class. Again, you’ll need to replace YOURSITESECRET with your own.

Now we need to tell the validator to use this method. We can do this in the my_validation_rules function we defined earlier.

functions.php

function my_validation_rules($rules)
{
    return array_merge($rules, [
        'custom_email_input' => 'required|valid_email',
        'g-recaptcha-response' => 'required|recaptcha'
    ]);
}

Note that g-recaptcha-response is just the name we are give by reCAPTCHA.

The final step is to add a nice name for the error message, let’s update my_field_names.

functions.php / my_field_rules

function my_field_names($names)
{
    return array_merge($names, [
        'custom_email_input' => "email address",
        'g-recaptcha-response' => 'reCAPTCHA'
    ]);
}

We have now added a reCAPTCHA field to our Age Gate, let’s put it all together for our two custom fields:

functions.php

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

function my_validation_rules($rules)
{
    return array_merge($rules, [
        'custom_email_input' => 'required|valid_email',
        'g-recaptcha-response' => 'required|recaptcha'
    ]);
}

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

function my_field_names($names)
{
    return array_merge($names, [
        'custom_email_input' => "email address",
        'g-recaptcha-response' => 'reCAPTCHA'
    ]);
}


add_filter('age_gate/custom/after', 'add_recaptcha_field');

function add_recaptcha_field()
{
    echo '<div class="g-recaptcha" id="recaptcha-age-gate" data-sitekey="6LebUN4aAAAAAPkIdFKqmxj62lbUEmYsScauZlPs"></div>';
}

add_action('wp_enqueue_scripts', 'enqueue_recaptcha');

function enqueue_recaptcha()
{
    wp_enqueue_script('recaptcha', 'https://www.google.com/recaptcha/api.js?onload=recaptchaInit', [], '', true);
}


add_action('age_gate/validation/add_validators', 'my_recaptcha_validation', 10, 1);

function my_recaptcha_validation($validator)
{
    $validator::add_validator('recaptcha', function ($field, array $input, array $params, $value) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $data = [
            'secret' => '6LebUN4aAAAAAB_1mnBLMOAnQWoPRFhQNKnuWsy6',
            'response' => $input[$field]
        ];

        $options = [
            'http' => [
                'method' => 'POST',
                'content' => http_build_query($data),
                'header'=> "Content-type: application/x-www-form-urlencoded\r\n",
            ]
        ];

        $context  = stream_context_create($options);
        $verify = file_get_contents($url, false, $context);
        $captcha_success = json_decode($verify);

        return $captcha_success->success;
    }, 'The {field} is required to prove you are human');
}

Conclusion

These are just a couple of examples of how the form can be extended, there are fairly unlimited possibilities for adding your own fields.

Make sure you look at the available validators before creating you own as it may exist already, and look at the age_gate/submission/{$status} action hook for details on how to handle the fields when the form submits