Shortcodes are widely used feature of WordPress. Many plugin and theme developers use this interesting feature to easily push custom contents inside posts or pages. But what if we could add a custom field within a Contact Form 7 (wpcf7) form? That’s exactly what I tried to do couple of days back and it was really exciting.

In case you don’t know what is wpcf7 or shortcode, please have a look at WordPress codex. Here I’ll explain how I have added the shortcode to the wpcf7 form and later fetched their values.

I have worked with WordPress 3.9.2 and Contact Form 7 v 3.8.1 to test these features.

There is the method wpcf7_add_shortcode which adds shortcode directly into contact form 7. Well while this function has its virtues, there are some disadvantages. Most of the time we cannot use the function right away because that will give us the “undefined function” error. We have to add a wrapper action to make sure that the wpcf7 plugin is loaded.

add_action( 'init', 'myplugin_wpcf7_add_shortcode', 5 );
function myplugin_wpcf7_add_shortcode() {
    wpcf7_add_shortcode('my_shortcode', 'my_shortcode', true);
}

Also this doesn’t have all the regular features of WordPress’ default shortcode. So, this is adding two additional layers of functions before the actual rendering and have to compromise with the WordPress shortcode features (like sending different custom parameters to the shortcode). So, I preferred to use the add_shortcode function of WordPress core instead of wpcf7_add_shortcode function.

So, we’ll add the shortcodes like any other shortcode with the add_shortcode function but we’ll also add a wrapper to make sure wpcf7 is loaded. The wrapper is not necessary but it is just to be safe. Here is our code.

add_action( 'init', 'myplugin_wpcf7_add_shortcode', 5 );
function myplugin_wpcf7_add_shortcode() {
    add_shortcode('myplugin_my_shortcode', 'myplugin_my_shortcode');
}

Then like any other shortcode we’ll render the shortcode in it’s function.

function myplugin_my_shortcode($atts) {
    $a = shortcode_atts( array(
        'my_param' => null
    ), $atts );
    //Do stuff here and generate HTML
    $shortcode_html = '<input type="text" name="myplugin_text" id="mylugin_text" value="'.$a['my_param'].'" />';
    //Also we can add wpcf7 shrotcode here.
    $wpcf7_shortcode = '[select myplugin_wpcf7_field id:myplugin_wpcf7_field "Option 1" "Option 2"]';
    //Render the wpcf7 shortcode
    $shortcode_html .= do_shortcode($wpcf7_shortcode);
    //Return the shortcode HTML
    return $shortcode_html;
}

Next thing we have to do is that we have to tell the wpcf7 to render our shortcodes (if any) when it is rendering any of it’s form. That can easily be done by following filter.

add_filter( 'wpcf7_form_elements', 'myplugin_wpcf7_form_elements' );
function myplugin_wpcf7_form_elements( $form ) {
    $form = do_shortcode( $form );
    return $form;
}

Well, that’s all we need to do to render a custom shortcode within a WordPress Contact Form 7 form. We can use our shortcode like [myplugin_my_shortcode my_param="Something"] and this will render a text field with value = "Something" followed by a select field with two options.

But that’s not all right? We want to get the values of the new fields we’ve just created when user submits the form. That’s fairly easy. We have to add the following action to hook the wpcf7 form before sending mail.

add_action("wpcf7_before_send_mail", "myplugin_manage_form");

Then the function to handle the hook should be like this:

function myplugin_manage_form (&$WPCF7_ContactForm) {
    $posted_data = $WPCF7_ContactForm->posted_data;
    $post_id = $posted_data['_wpcf7'];
}

Now $posted_data variable has all the posted values from the form. It is a good practice to check the post ID against our desired form. That way we don’t have to parse the whole function for every forms on the site. Let’s say we are looking for the form ID 1234. Then we can check the $post_id and go forward based on that.

function myplugin_manage_form (&$WPCF7_ContactForm) {
    $posted_data = $WPCF7_ContactForm->posted_data;
    $post_id = $posted_data['_wpcf7'];
    if($post_id != 1234) {
        return $WPCF7_ContactForm;
    }
    $input_field = $posted_data['myplugin_text'];
    $select_field = $posted_data['myplugin_wpcf7_field'];
    //Do stuff here
    return $WPCF7_ContactForm;
}

You can var_dump the  $WPCF7_ContactForm variable to see the structure. It is a pretty straight forward object and you can easily override different values of the object. Remember to return the object at the end of your function.

Hope this was helpful. Share your experience and ideas about this in the comment.