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.

Advertisements

One thought on “Manually submitting contact form 7 (ajax) and adding extra fields

  1. Criss says:

    Hi man.
    Do you know how can I trigger a submit using javascript or jquery??

    I already tried:
    $(‘.wpcf7-submit’).trigger( “submit” )
    and
    $(‘#myFormId’).trigger( “submit”
    and
    $(‘#myFormId’).submit()

    ….but I didn’t work.

    Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s