How to use Contact Form 7 to save form data in a custom post with ACF fields?

Hi, I hope this question makes sense.. sometimes we are in a situation where we have to get some inputs from the public or website visitors through forms and with or without approval list those submissions on a front end. With this post I am going to explain how we can do this easily with the use of Contact Form 7 and Advanced Custom Fields (ACF) plugins.

Well, to start let us first configure Contact Form 7 and ACF plugins on the WordPress website.

Secondly, make sure you are using the updated WP, Contact Form 7 and ACF versions. If not, you might stuck in some data saving concerns.

To explain further lets take an example where we are going to implement a functionality where the users will share their feedback. The feedback will be listed both on front end backend.

On front end the listings will appear once the admin approves the submission.

Also, by default we will be sending all such submissions to the admin (email) as well.

1. Create a contact form

Using Contact form 7 plugin, create a form with basic fields such as Name, Email, Your Story, Image, etc.

You can create the form as per your requirements.

2. Create a page and add the contact form 7 shortcode.

Use the form shortcode which you have created in the step 1.

3. Create a custom post type

You can use any plugin or do custom code in your themes functions.php file to create a custom post type. Sharing an example of how you can do so using themes functions.php file.

function create_custom_posttype(){
	register_post_type( 'patientstories',
            'labels' => array(
                'name' => __( 'Patient Stories' ),
                'singular_name' => __( 'Patient Story' )
			'menu_icon' => 'dashicons-welcome-write-blog',
            'public' => true,
            'has_archive' => false,
            'show_in_rest' => false,
			'supports' => array( 'title', 'editor', 'thumbnail' ),
			'publicly_queryable' => false
add_action( 'init', 'create_custom_posttype' );

4. Now, using ACF add as many fields as you have created in the contact form.

Use ACF to create a field group and attach it with custom post type you have created in the above step.

ACF fields will carry as many fields as you want and will have all the fields for which you are collecting the data from the front end users.

5. Handle contact form submissions on the frontend

Now, when a contact form 7 is submitted .. it makes an ajax request and posts all the data to server resulting in an email notification sent to the configured recipients.

And, since we want to capture the submitted form data and list it under custom post type. We have got a pretty easy way.. ACF provides a way to update its custom field values on sharing the post id.

So, here is an example of how we can handle form submissions and store the submitted data (with status : Draft, to handle admin approval concerns).

function save_stories_to_patientstories_cpt($contact_form){
	$submission = WPCF7_Submission::get_instance();
    if (!$submission){
	$posted_data = $submission->get_posted_data();
	$new_post = array();
	if( isset($posted_data['your-name']) && !empty($posted_data['your-name']) ){
       $new_post['post_title'] = $posted_data['your-name'];
    } else {
	$new_post['post_type'] = 'patientstories'; 
	if( isset($posted_data['your-story']) && !empty($posted_data['your-story']) ){
        $new_post['post_content'] = $posted_data['your-story'];
    } else {
	$new_post['post_status'] = 'draft';
    if($post_id = wp_insert_post($new_post)){
		update_field('field_5eeaf3b4c87b1', $posted_data['email'], $post_id);
		$uploaded_files = $submission->uploaded_files();
	    $upload_dir = wp_upload_dir(); // Set upload folder
	    $unique_file_name = wp_unique_filename( $upload_dir['path'], $_FILES['patient_image']['name'] ); // Generate unique name
		$filename         = basename( $unique_file_name ); // Create image file name
		// Check folder permission and define file location
		if( wp_mkdir_p( $upload_dir['path'] ) ) {
			$file = $upload_dir['path'] . '/' . $filename;
		} else {
			$file = $upload_dir['basedir'] . '/' . $filename;
		copy($uploaded_files['patient_image'], $file);
	   // Check image file type
		$wp_filetype = wp_check_filetype( $filename, null );

		// Set attachment data
		$attachment = array(
			'post_mime_type' => $wp_filetype['type'],
			'post_title'     => sanitize_file_name( $filename ),
			'post_content'   => '',
			'post_status'    => 'inherit'

		// Create the attachment
		$attach_id = wp_insert_attachment( $attachment, $file, $post_id );

		// Include image.php
		require_once(ABSPATH . 'wp-admin/includes/image.php');

		// Define attachment metadata
		$attach_data = wp_generate_attachment_metadata( $attach_id, $file );

		// Assign metadata to attachment
		wp_update_attachment_metadata( $attach_id, $attach_data );

		// And finally assign featured image to post
		set_post_thumbnail( $post_id, $attach_id );

    } else {
       @mail('[email protected]', 'Urgent attention needed on share story', 'There is error in uploading share story patient images or other data. Please check.');

With this, you will be able to handle the form submissions from the front end, store in db and list out under custom posts.

I hope this was useful for you!

Leave a Reply

Your email address will not be published. Required fields are marked *