1. Home
  2. /
  3. Web Design & Development
  4. /
  5. WordPress
  6. /
  7. How to use Contact Form 7 to save form data in a custom post with ACF fields?

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

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 the 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 be stuck in some data-saving concerns.

To explain further let’s 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 the 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.

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.

Create a page and add the contact form 7 shortcode.

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

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' );

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 the 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.

Handle contact form submissions on the frontend

Now, when contact form 7 is submitted .. it makes an ajax request and posts all the data to the 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('example@example.com', 'Urgent attention needed on exampel.com 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!

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now