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

2月 9, 2020

—

はじめに

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

MW WP Form

200,000以上サイトで有効化中

MW WP Form の設置

まず、MW WP Form でフォームを作成します。その中に、Free Canvas のショートコードを挿入します。

Free Canvas の name 属性と、 MW WP Form のフォーム識別子の key の値を、同じにします。
Free Canvas の form_name 属性と、 MW WP Form のメールの name 属性を、同じにします。

続いて、固定ページに MW WP Form のショートコードを貼り付けます。

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

functions.php へのコード記述

まず、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_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 . '/' . wp_date( 'YmdHis' ) . '_' . $name . '.png';
		$image = imagecreatefromstring( $image_data );
		imagepng( $image, $filename );
		$freecanvas_files = get_option( 'freecanvas_file', array() );
		$freecanvas_files[ $form_value ] = $filename;
		update_option( 'freecanvas_file', $freecanvas_files );
	}

}
add_filter( 'free_canvas_save', 'canvas_save', 10, 3 );

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

次に、MW WP Form のフィルターフック、アクションフックとその処理を、functions.php に書きます。

/**
 * Mail_attach
 *
 * @param object $mail  mail.
 * @param array  $values  values.
 * @param object $data  data.
 */
function mail_canvas( $mail, $values, $data ) {

	$key_form_value = $data->get( 'yourmail' );

	if ( get_option( 'freecanvas_file' ) ) {

		$freecanvas_files = get_option( 'freecanvas_file' );
		if ( array_key_exists( $key_form_value, $freecanvas_files ) ) {
			if ( file_exists( $freecanvas_files[ $key_form_value ] ) ) {
				$mail->attachments = $freecanvas_files[ $key_form_value ];
			}
		}

	}

	return $mail;

}
add_filter( 'mwform_auto_mail_mw-wp-form-6291', 'mail_canvas', 10, 3 );
add_filter( 'mwform_admin_mail_mw-wp-form-6291', 'mail_canvas', 10, 3 );

/**
 * After send mail for MW WP Form
 *
 * @param object $data  data.
 */
function canvas_mwform_after_send( $data ) {

	$key_form_value = $data->get( 'yourmail' );

	$freecanvas_files = get_option( 'freecanvas_file' );
	if ( get_option( 'freecanvas_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_file', $freecanvas_files );
			}
		}
	}

}
add_action( 'mwform_after_send_mw-wp-form-6291', 'canvas_mwform_after_send', 10, 1 );

mwform_auto_mail_mw-wp-form-6291 と、mwform_admin_mail_mw-wp-form-6291 というフィルターフックは自動返信メールと管理者宛てメールへの追加処理です。mwform_after_send_mw-wp-form-6291 というアクションフックは、メール送信直後の処理です。6291 というのは、今回の識別子なので、扱う際は適宜変更してください。

２つのフィルターフックは mail_canvas という関数で処理します。Free Canvas でオプションテーブルに保存した、‘freecanvas_file’ と、MW WP Form のメールアドレス $key_form_value からファイル名を取得し、取得できれば、メールのオブジェクトに添付ファイルとして格納します。

アクションフックは、canvas_mwform_after_send という関数で処理します。Free Canvas でオプションテーブルに保存した、‘freecanvas_file’ と、 MW WP Form メールアドレス $key_form_value からファイル名を取得し、取得できれば、Free Canvas で作成したファイルを削除し、オプションテーブルを更新します。

動作

問題点

キャンバスを必須フォームにできません。MW WP Form のバリデーション処理に詳しい方、アイデアがありましたら教えてください。

Comments