Manually submitting contact form 7 (ajax) and adding extra fields

Some time you need to perform some tasks before the contact form 7 is submitted but there is no easy way to do that to stop submitting the contact form for some time.

For example, you want to wait for an ajax request to respond before submitting contact form 7.

Here is the workaround.

1. Create contact form at wp-admin if not created already
2. Create required fields (for validation)
3. Place form shortcode in your page and view page in browser
4. Copy form html and place that html in a function and call that function instead of shortcode
5. Add your extra fields in form html if needed (don’t provide names for the fields you don’t want to post for example credit card field)

an example function might be similar as following

function cf7_custom_form($formId)
{
    $nonce = wpcf7_create_nonce($formId);

    return '<form action="" method="post" class="" id="mcp7form">
<div style="display: none;">
        <input type="hidden" name="_wpcf7" value="' . $formId . '">
        <input type="hidden" name="_wpcf7_version" value="4.6.1">
        <input type="hidden" name="_wpcf7_locale" value="en_US">
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f' . $formId . '-o2">
        <input type="hidden" name="_wpnonce" value="' . $nonce . '"></div>
..... cf form 7 fields
   <input type="text" id="cc" value="4242424242424242">
   <input type="submit">
   </form>
   ';
}

call that form instead of shortcode by passing the contact form7 id

for example

echo cf7_custom_form(331);

Add following javascript for form

$(function() {
	//get form
	var $form = $("#mcp7form");

	var id = $form.find('input[name="_wpcf7"]').val();
	var unitTag = $form.find('input[name="_wpcf7_unit_tag"]').val();

	var url = '#/wpcf7-<?php echo $formId?>-o2';

	if (0 < url.indexOf('#')) {
		url = url.substr(0, url.indexOf('#'));
	}

	jQuery.post(url,
			$form.serialize() + "&_wpcf7_is_ajax_call=1&_wpcf7=" + id + "&_wpcf7_request_ver=" + jQuery.now(),
			function(data) {
                jQuery('.wpcf7-mail-sent-ok').show();
                eval(data.onSentOk);

			}, 'json'
		);

As you see our custom form is submitting instead of contact form 7 but it will be received at backend as original contact form was submitted so you can continue using hooks, filters or email customization at backend with original form.