Contact Form 7 – Custom Form Tag

There are multiple input field types in contact form 7 like text, email, number, tel, etc.

But if you want to show a list of Posts in contact form 7 drop-down then there is no option for that.

But Contact Form 7 Provide feature using that we can create our custom form tag and render data according to our needs.

So if you want to create your own form tag then follow this article and I’m sure you will get your result.

So let’s begin……………..

Hooks Used For Custom Form Tag Generate

1. wpcf7_init
2. wpcf7_validate_text
3. wpcf7_messages
4. wpcf7_admin_init

In this tutorial, we just explain the use of the above hook and next tutorial we will provide an up and running example for your reference. Now Assume we are going to create a custom input tag named “XZM Posts”

<?php
add_action('wpcf7_init', 'xzmwpcf7_add_form_tag');
function xzm_wpcf7_add_form_tag()
{
    wpcf7_add_form_tag(
        array('xzm', 'xzm*',),
        'xzmwpcf7_custom_form_tag_handler',
        array('name-attr' => true)
    );
}
function xzmwpcf7_custom_form_tag_handler($tag)
{
    /**
     * This function responsible for frontend render custom tag
     */
}

add_filter('wpcf7_validate_xzm', 'xzmwpcf7_validation_filter', 10, 2);
add_filter('wpcf7_validate_xzm*', 'xzmwpcf7_validation_filter', 10, 2);
function xzmwpcf7_validation_filter()
{
    /**
     * This function responsible for custom tag validation
     */
}

add_filter('wpcf7_messages', 'xzmwpcf7_messages', 10, 1);
function xzmwpcf7_messages()
{
    /**
     * This function handle Error Message
     */
}


add_action('wpcf7_admin_init', 'xzmwpcf7_add_tag_generator', 15, 0);
function xzmwpcf7_add_tag_generator()
{
    /**
     * This function handel contact form 7 admin part, generate form tag and show it in tag list
     * 
     */
    $tag_generator = WPCF7_TagGenerator::get_instance();
    $tag_generator->add(
        'xzm',
        __('XZM Posts', 'xzm'),
        'wpcf7_tag_generator_xzm'
    );
}

function wpcf7_tag_generator_xzm()
{
    /**
     * Input option for custom form tag like required , name , class, id etc
     */
}