Add custom functionality to Contact Form 7

You can add custom functionality on Contact Form 7 plugin after different actions have taken place, for example when an email has been sent. Contact Form 7 triggers some JavaScript events that you can easily access, here you will find an example using JQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if( $('.wpcf7').length > 0 ) {
 
  $(document).on('spam.wpcf7', function () {
    console.log('submit.wpcf7 triggered!');
  });
 
  $(document).on('invalid.wpcf7', function () {
    console.log('invalid.wpcf7 triggered!');
  });
 
  $(document).on('mailsent.wpcf7', function () {
    console.log('mailsent.wpcf7 triggered!');
  });
 
  $(document).on('mailfailed.wpcf7', function () { 
    console.log('mailfailed.wpcf7 triggered!');
  });
}

How to add dynamic values into Contact Form 7 inputs

Contact Form 7 is a great plugin to add forms to your site, but these forms contain static inputs and sometimes we require to add inputs with dynamic values like a post ID or PHP variables like GET and POST.

This is very easy to do with the plugin Contact Form 7 Dynamic Text Extension.

This plugin adds two additional tag types to the Contact Form 7 plugin, these two types are Dynamic Text field and Dynamic Hidden field, the dynamic value for a scpecif input is generated throught a shortcode.

The plugin has it’s own shortcodes integrated, but you can create your own.

Let me put a very simple example:

Lets say you want to add a hidden input in your form which value should be the current post ID.
If you create your own shortcode it would look like this:

function cf7_add_post_id(){
 
    global $post;
    return $post->ID;
}
 
add_shortcode('CF7_ADD_POST_ID', 'cf7_add_post_id');

And the dynamic field in your form setup would look like this:

[dynamictext my-filed-name "CF7_ADD_POST_ID"]

The other way would be to use the plugin’s shortcodes.
In this case we want to have the current post ID so you would only have to add your dynamic field in the form setup like this:

[dynamictext my-filed-name "CF7_get_post_var key='ID'"]

The plugin has shortcodes for GET, POST, blog info, post info, current URL, custom fields, current user info, referrer URL.
You have all the details in the plugin’s page on wordpress.org

Contact Form 7, save submited data in the database

Create a table to store the data in the database.

CREATE TABLE `wp_tps_forms` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `form` varchar(100) NOT NULL DEFAULT '',
  `data` text NOT NULL,
  `date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
add_action('wpcf7_before_send_mail', 'save_form' );
 
function save_form( $wpcf7 ) {
   global $wpdb;
 
   /*
    Note: since version 3.9 Contact Form 7 has removed $wpcf7->posted_data
    and now we use an API to get the posted data.
   */
 
   $submission = WPCF7_Submission::get_instance();
 
   if ( $submission ) {
 
       $submited = array();
       $submited['title'] = $wpcf7->title();
       $submited['posted_data'] = $submission->get_posted_data();
 
    }
 
     $data = array(
   		'name'  => $submited['posted_data']['name'],
   		'email' => $submited['posted_data']['email']
   	     );
 
     $wpdb->insert( $wpdb->prefix . 'tps_forms', 
		    array( 
                          'form'  => $submited['title'], 
			   'data' => serialize( $data ),
			   'date' => date('Y-m-d H:i:s')
			)
		);
}

Contact Form 7, change texts on email body

For example, you receive a POST ID as a parameter, and you want to add the title of the post in the body of the email sent by Contact Form 7.
You can add the text [my_post_id] in the body of the form configuration from the admin dashboard.
Then replace it with the data you need, in this case the title, using the filer wpcf7_mail_components.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
add_filter( 'wpcf7_mail_components', 'custom_mail_components');
 
function custom_mail_components($wpcf7_data, $form = null) {
 
     if( isset( $_GET['my_post_id'] ) ){
 
        $post = get_post( $_GET['my_post_id'], ARRAY_A );
 
        $str = $post['post_title']. ' ' . get_permalink( $_GET['my_post_id'] ) ;
	$wpcf7_data['body'] = str_replace('[my_post_id]', $str , $wpcf7_data['body'] );
     }
 
     return $wpcf7_data;
}