プログラム初心者のcakephp2.x・wordpress情報

プログラム初心者のcakephp2.xの技術情報・wordpressやAPI関連も覚書（PHP・mySQL）

wordpressのカスタマイズ　プラグイン「contact　form 7」 で値の受け渡し+確認画面+完了画面を追加できるのか?

wordpress

今回かなりは時間がかかってしまった。2日がかりでもろもろ解決。

 

●やりたかったこと

１．特定のページについての問い合わせフォームを作成し、フォームにそのページの値を渡して、送信すること。

２．渡した値は編集不可にすること。

３．確認画面＋送信完了画面を用意すること

●利用するプラグイン「contact　form 7」

標準では確認画面・完了画面が用意されていない。

 

1．コレは単にgetで渡した値を引き継げばいい。（問い合わせ用フォームに遷移する場合）ページ遷移しないで、そのページにフォームがある場合は、必要な値をプラグインに渡せばいい。

具体的にはfunction.phpに追加します。

 

function my_form_tag_filter($tag){
  if ( ! is_array( $tag ) )
  return $tag;

//post IDをgetでフォームに渡す記述　URLにhttp://localhost/contact?postid=1とかつけて遷移
  if(isset($_GET['postid'])){
    $name = $tag['name'];
    if($name == 'postid')
      $tag['values'] = (array) $_GET['postid'];
  }

//そのページにフォームがある場合は直接値を渡す。
  $postid = get_the_ID();
  if(isset($postid)){
    $name = $tag['name'];
    if($name == 'postid')
      $tag['values'] = (array) $postid;
  }
  return $tag;
}
add_filter('wpcf7_form_tag', 'my_form_tag_filter', 11);

 更にcontact form 7の設定画面で、投稿IDを受け取るテキストフィールドを用意しておく。

<p>投稿ID<br /> [text* postid] </p>

 このままだと単にテキストフィールドに値があるだけなので、修正できてしまう。

ここの値を修正されたら意味がない。

 

２．そのためこの受け取った値を入れたテキストフィールドを編集不可にします。

こちらの記事にそのやり方が載っていました。

 

contact form 7プラグインの/wp-content/plugins/contact-form-7/modules/text.phpファイルを修正します。関数function wpcf7_text_shortcode_handlerを探します。先頭にあります。（20130308時点）

 

function wpcf7_text_shortcode_handler( $tag ) {
    if ( ! is_array( $tag ) )
		return '';

	$type = $tag['type'];
	$name = $tag['name'];
	$options = (array) $tag['options'];
	$values = (array) $tag['values'];

	if ( empty( $name ) )
		return '';

	$validation_error = wpcf7_get_validation_error( $name );

	$atts = $id_att = $size_att = $maxlength_att = '';
	$tabindex_att = $title_att = '';
	$readonly_att = ''; 　　　　　　　　　// ★★★★★★追加★★★★★
	$class_att = wpcf7_form_controls_class( $type, 'wpcf7-text' );

	if ( 'email' == $type || 'email*' == $type )
		$class_att .= ' wpcf7-validates-as-email';

	if ( $validation_error )
		$class_att .= ' wpcf7-not-valid';

	foreach ( $options as $option ) {
		if ( preg_match( '%^id:([-0-9a-zA-Z_]+)$%', $option, $matches ) ) {
			$id_att = $matches[1];

		} elseif ( preg_match( '%^class:([-0-9a-zA-Z_]+)$%', $option, $matches ) ) {
			$class_att .= ' ' . $matches[1];

		} elseif ( preg_match( '%^([0-9]*)[/x]([0-9]*)$%', $option, $matches ) ) {
			$size_att = (int) $matches[1];
			$maxlength_att = (int) $matches[2];

		} elseif ( preg_match( '%^tabindex:(\d+)$%', $option, $matches ) ) {
			$tabindex_att = (int) $matches[1];
			
		} elseif ( preg_match( '%^readonly$%', $option, $matches ) ) {$readonly_att = true; 　// ★★★追加★★★
		}
	}

	$value = (string) reset( $values );

	if ( wpcf7_script_is() && preg_grep( '%^watermark$%', $options ) ) {
		$class_att .= ' wpcf7-use-title-as-watermark';
		$title_att .= sprintf( ' %s', $value );
		$value = '';

	} elseif ( empty( $value ) && is_user_logged_in() ) {
		$user = wp_get_current_user();

		$user_options = array(
			'default:user_login' => 'user_login',
			'default:user_email' => 'user_email',
			'default:user_url' => 'user_url',
			'default:user_first_name' => 'first_name',
			'default:user_last_name' => 'last_name',
			'default:user_nickname' => 'nickname',
			'default:user_display_name' => 'display_name' );

		foreach ( $user_options as $option => $prop ) {
			if ( preg_grep( '%^' . $option . '$%', $options ) ) {
				$value = $user->{$prop};
				break;
			}
		}
	}

	if ( wpcf7_is_posted() && isset( $_POST[$name] ) )
		$value = stripslashes_deep( $_POST[$name] );

	if ( $readonly_att )$atts .= ' readonly="readonly"';  // ★★★追加★★★
	
	if ( $id_att )
		$atts .= ' id="' . trim( $id_att ) . '"';

	if ( $class_att )
		$atts .= ' class="' . trim( $class_att ) . '"';

	if ( $size_att )
		$atts .= ' size="' . $size_att . '"';
	else
		$atts .= ' size="40"'; // default size

	if ( $maxlength_att )
		$atts .= ' maxlength="' . $maxlength_att . '"';

	if ( '' !== $tabindex_att )
		$atts .= sprintf( ' tabindex="%d"', $tabindex_att );

	if ( $title_att )
		$atts .= sprintf( ' title="%s"', trim( esc_attr( $title_att ) ) );

	$html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '" />';

	$html = '<span class="wpcf7-form-control-wrap ' . $name . '">' . $html . $validation_error . '';

	return $html;
}

 ３箇所に記述を追加（20130308時点）

 

29行目　「$readonly_att = '';」

52行目　「} elseif ( preg_match( '%^readonly$%', $option, $matches ) ) {$readonly_att = true;」

87行目　「 if ( $readonly_att )$atts .= ' readonly="readonly"';」

 

contact form 7の設定画面で、投稿IDを受け取るテキストフィールドに「readonly」のオプションを追加します。

<p>投稿ID<br /> [text* postid readonly] </p>

 

コレで値を編集できなくなりました。ただ注意点としては、プラグインのアップデートをした際は「/wp-content/plugins/contact-form-7/modules/text.php」も最新のものに上書きされてしまうので、再修正が必要になります。アップデートの際は気をつけましょう。

 

３．それでは確認画面、完了画面の追加です。

完了画面の追加は簡単です。固定ページで、完了画面を作成し、そのページにリダイレクトさせます。

contact form 7の設定画面で設定したいフォームを選びます。その他の設定項目に以下のような記述を追加します。（URLは作成した完了ページのURLに修正してください。）

 

on_sent_ok: "location.replace('http://localhost/thanks/');"

 

 問題は確認画面です。フォームの確認画面を作るというのは、日本独特の習慣のようです。そのため海外のサイトでは確認画面がありません。でもやっぱり確認画面があったほうが安心感がありますよね。ちょっとまだ問題点は多いのですが、こちらの記事のように作成しました。簡単にご紹介するとJSによって、値のチェックと確認画面の簡易表示を実現させています。こちらのサイトからJSをダウンロードします。

 

フォームのページにダウンロードしたJS・CSSを読み込みます。

contact-form7-confirm.jsファイルは「'path' :[ ]」の部分をさがし[　]の中に確認画面が必要なページのパスを追加してください。複数追加する場合はカンマ区切りで追加すれば大丈夫です。例）「'path' :['/contact/','/form/' ]」

 

contact form 7の設定画面で、必須項目については「<span class=”title”>メールアドレス</span>」にようにタグで囲む必要があります。また、<p>[submit "送信"]</p>部分を、<p class=”submit-button”>[submit  "送信"]</p> に変更してください。

 

 実際にフォームを見て、「確認」ボタンが表示されていれば成功です！

 

個人的にはもう少し見た目とかいじりたいけど・・・・。