Handwritten contact form with Contact Form 7 and Free Canvas

Introduction

I tried to incorporate my own plugin, Free Canvas, into the contact form. For the contact form, I used Contact Form 7. Free Canvas, Version 1.06 or later, supports the following.

500万以上サイトで有効化中
283ダウンロード

Preparing the “Free Canvas” tag for “Contact Form 7”

In functions.php, Write the tag of Free Canvas which is used by Contact Form 7.

/**
 * Add Free Canvas tag
 */
function custom_add_form_tag_freecanvas() {
	wpcf7_add_form_tag( 'freecanvas', 'custom_freecanvas_form_tag_handler' );
}
add_action( 'wpcf7_init', 'custom_add_form_tag_freecanvas' );

/**
 * Add Free Canvas shortcode
 *
 * @param object $tag  tag.
 */
function custom_freecanvas_form_tag_handler( $tag ) {

	$str = null;
	$unique_id = strtolower( wp_generate_password( 16, false, false ) );
	if ( ! empty( $tag->options ) ) {
		foreach ( $tag->options as $value ) {
			$attr = explode( ':', $value );
			$str .= ' ' . $attr[0] . '="' . $attr[1] . '"';
		}
		$str .= ' name="' . $unique_id . '"';
	}

	return do_shortcode( '[freecanvas' . $str . ']' );

}

Apply the Free Canvas shortcode to the tags of Contact Form 7. The attribute values for [freecanvas] are width, height, form_name, form_name2, and form_name3. The name attribute is created automatically ($unique_id), so please do not specify it on the Contact Form 7 side.

Setting up a contact form

In Contact Form 7, you create a contact form. Insert the Free Canvas tag into it.

  • Make the form_name attribute of the Free Canvas and the email attribute of the Contact Form 7 email the same.
  • Make the form_name2 attribute of the Free Canvas and the your-name attribute of the Contact Form 7 text the same.
  • Make the form_name3 attribute of the Free Canvas and the your-subject attribute of the Contact Form 7 text the same.

Preview it and you’ll see the following screen.

Coding of the Free Canvas process

Write the Free Canvas filter and its processing in functions.php.

/**
 * Free Canvas Save
 *
 * @param string $image_data  image_data.
 * @param string $name  name.
 * @param string $form_value  form_value.
 * @param string $form_value2  form_value2.
 * @param string $form_value3  form_value3.
 */
function canvas_cf7_save( $image_data, $name, $form_value, $form_value2, $form_value3 ) {

	$wp_uploads = wp_upload_dir();
	$relation_path_true = strpos( $wp_uploads['baseurl'], '../' );
	if ( $relation_path_true > 0 ) {
		$upload_dir = wp_normalize_path( realpath( $wp_uploads['basedir'] ) );
	} else {
		$upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
	}

	if ( ! empty( $form_value ) ) {
		$dirname = $upload_dir . '/signatures';
		if ( ! is_dir( $dirname ) ) {
			wp_mkdir_p( $dirname );
		}
		$filename = $dirname . '/' . sanitize_file_name( $form_value2 . '-' . $form_value3 ) . '-' . wp_date( 'YmdHis' ) . '.png';
		$image = imagecreatefromstring( $image_data );
		imagepng( $image, $filename );
		$freecanvas_files = get_option( 'freecanvas_cf7_file', array() );
		$freecanvas_files[ $form_value ] = $filename;
		update_option( 'freecanvas_cf7_file', $freecanvas_files );
	}

}
add_filter( 'free_canvas_save', 'canvas_cf7_save', 10, 5 );

When you press “Save” on the canvas, it will take the date, time, minute, and second of the year, date, time, and create a PNG file with the name and title of $form_value2 and $form_value3 added to the string. Write an associative array of email addresses and file names in the options table, named ‘freecanvas_cf7_file’.

Coding of Contact Form 7 process

Write the Contact Form 7 action hooks and their processing in functions.php.

/**
 * Mail_attach
 *
 * @param object $WPCF7_ContactForm  WPCF7_ContactForm.
 */
function mail_canvas_cf7( $WPCF7_ContactForm ) {

	$wpcf7      = WPCF7_ContactForm::get_current();
	$submission = WPCF7_Submission::get_instance();

	if ( $submission ) {

		$formdata = $submission->get_posted_data();
		$key_form_value = $formdata['your-email'];

		if ( get_option( 'freecanvas_cf7_file' ) ) {
			$freecanvas_files = get_option( 'freecanvas_cf7_file' );
			if ( array_key_exists( $key_form_value, $freecanvas_files ) ) {
				if ( file_exists( $freecanvas_files[ $key_form_value ] ) ) {
					$mail = $wpcf7->prop( 'mail' );
					$mail['attachments'] = $freecanvas_files[ $key_form_value ];
					$wpcf7->set_properties(
						array(
							'mail' => $mail,
						)
					);
				}
			}
		}
	}

	return $wpcf7;

}
add_action( 'wpcf7_before_send_mail', 'mail_canvas_cf7' );

/**
 * After send mail for Contact Form 7
 *
 * @param object $contact_form  contact_form.
 */
function canvas_cf7_after_send( $contact_form ) {

	$submission = WPCF7_Submission::get_instance();

	if ( $submission ) {

		$formdata = $submission->get_posted_data();
		$key_form_value = $formdata['your-email'];

		$freecanvas_files = get_option( 'freecanvas_cf7_file' );
		if ( get_option( 'freecanvas_cf7_file' ) ) {
			if ( array_key_exists( $key_form_value, $freecanvas_files ) ) {
				if ( file_exists( $freecanvas_files[ $key_form_value ] ) ) {
					unlink( $freecanvas_files[ $key_form_value ] );
					unset( $freecanvas_files[ $key_form_value ] );
					update_option( 'freecanvas_cf7_file', $freecanvas_files );
				}
			}
		}
	}

}
add_action( 'wpcf7_mail_sent', 'canvas_cf7_after_send', 10, 1 );

The wpcf7_before_send_mail hook retrieves the file name from the ‘freecanvas_file‘ and the Contact Form 7 email address $key_form_value saved in the options table by Free Canvas just before sending the email, and if it is retrieved, stores it as an attachment in the email array.

With the wpcf7_mail_sent hook, get the file name from ‘freecanvas_cf7_file‘ and the Contact Form 7 email address $key_form_value saved in the options table in Free Canvas after sending the email, and if you can get it, delete the file created in Free Canvas and update the options table. If you want to keep the file you created, please comment out the 59 lines.

In the code, your-email is the form_name attribute of the Free Canvas and the email attribute of the Contact Form 7 email.

How it works

この記事を書いた人