Contact Form 7 と Free Canvas で手書き入力コンタクトフォーム

はじめに

自作のプラグイン、Free Canvas をコンタクトフォームに組み込んでみました。コンタクトフォームには、Contact Form 7 を使用しました。Free Canvas は、Version 1.04 以降が以下の処理に対応しています。

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

Contact Form 7 の Free Canvas タグの用意

Contact Form 7 で使用する、Free Canvasタグfunctions.php に記述します。

/**
 * 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 . ']' );

}

Contact Form 7 のタグに Free Canvas のショートコードを適用させます。[freecanvas] の属性値で使用できるのは、width, height, form_name です。name 属性は、自動で($unique_id)作成しますので、Contact Form 7 側で指定しないでください。

コンタクトフォームの設置

Contact Form 7 で、コンタクトフォームを作成します。その中に、Free Canvasタグを挿入します。

Free Canvas の form_name 属性と、 Contact Form 7 のメールの email 属性を、同じにします。

プレビューしてみると以下の画面になります。

Free Canvas の処理の記述

Free Canvas のフィルターとその処理を、functions.php に書きます。

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

	$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 ) ) {
		$filename = $upload_dir . '/' . sanitize_file_name( wp_date( 'YmdHis' ) . '_' . $name . '.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, 3 );

キャンバスの「保存」を押すと、年月日時分秒を取得し、文字列にしたものに、$name で受け取った、 自動で($unique_id)作成された値を付加したものをファイル名にして、PNG ファイルを作成します。オプションズテーブルに、‘freecanvas_cf7_file’ という名前で、メールアドレスとファイル名を連想配列にしたものを書き出します。

Contact Form 7 の処理の記述

Contact Form 7 のアクションフックとその処理を、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 );

wpcf7_before_send_mail フックで、メール送信直前に Free Canvas でオプションテーブルに保存した、‘freecanvas_file’ と、Contact Form 7 のメールアドレス $key_form_value からファイル名を取得し、取得できれば、メールの配列に添付ファイルとして格納します。

wpcf7_mail_sent フックで、メール送信後に Free Canvas でオプションテーブルに保存した、‘freecanvas_cf7_file’ と、 Contact Form 7 メールアドレス $key_form_value から ファイル名を取得し、取得できれば、Free Canvas で作成したファイルを削除し、オプションテーブルを更新します。

コード内の your-email は、Free Canvas の form_name 属性と、 Contact Form 7 のメールの email 属性 です。

動作

この記事を書いた人