MW WP FORMで確認画面時に不要な内容を削除する方法【WordPressプラグイン】

WordPressのフォーム作成の代表的なプラグインのひとつMW WP FORMで確認画面や送信完了画面時に表示させたくない内容を削除するための方法をご紹介します。

functions.phpとstyle.cssの編集が必要です。

サンプル画像

分かりやすくするために非表示にしたいエリアは色を付けています。

コード

functions.phpに以下のコードを追加します。

/*-------------------------------------------*/
/* MW WP FORM フォームより前の文章を非表示にする */
/* ※使い方※ */
/* 1.<div class="contact_msg"></div>の中に非表示にしたい文章を入力する */
/* 2.cssで.contact_msg_hiddenにdisplay:none;のスタイルを適用する */
/*-------------------------------------------*/
function my_enqueue_scripts_mwwpfrom() {
	if( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}
	//jQueryに記述したい内容を入力する(シングルコーテーションとダブルコーテーション注意)
	$script = "
jQuery(function($){
	if($('div').hasClass('mw_wp_form_confirm')){
		$('.contact_msg').addClass('contact_msg_hidden');
	} else if ($('div').hasClass('mw_wp_form_complete')) {
		$('.contact_msg').addClass('contact_msg_hidden');
	} else if ($('span').hasClass('error')) {
		$('.contact_msg').addClass('contact_msg_hidden');
	}
});
";
	wp_add_inline_script( 'jquery-core', $script, 'after' );//インラインスクリプトを追加する
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts_mwwpfrom' );

次に、スタイルシート(style.cssなど)に以下を追加します。

div.contact_msg_hidden{
	display:none;
}

コードの解説

MW WP FORMは、確認画面と送信完了画面とフォームの項目にエラーがあった場合、現在の状態を表すclassが追加されます。現在のフォームがどのような状態かを判断するための分岐が14行目からの条件分岐です。

if($('div').hasClass('mw_wp_form_confirm')){
	$('.contact_msg').addClass('contact_msg_hidden');
} 

1つめの条件はdvi要素にmw_wp_form_confirmというclassがあればcontact_msgがあるところにcontact_msg_hiddenを追加すると書いています。

contact_msg_hiddenを追加することでスタイルシートで定義したdisplay:none;が反映されて画面上から見えなくなるということです。

使い方

まずは、MW WP FORMでお問い合わせフォームを作成します。お問い合わせフォームの作成の方法については省略します。

次に、非表示にしたい内容をMW WP FORMのフォームを編集画面上に入力します。

表示をテキスト表示に切り替えます。非表示にしたい内容を<div class="contact_msg"></div>で囲みます。

今回はMW WP FORMのフォームを編集画面上で編集しましたが、固定ページや投稿ページの編集画面上でも同様のdviタグとclassを追加すれば動作します。ただし、MW WP FORMのショートコードが同一ページ上にある必要があります。

クラシックエディタの場合はMW WP FORMのフォームを編集画面と同様の手順でdviタグを追加できますが、ブロックエディタの場合は別の手順が必要です。

ブロックエディタの場合

デザイングループの中にあるカラムブロックを選択します。

カラムのパターンは100を選択します。100は列の幅が100%ということを指していると思います。100が通常の幅です。非表示にしたい項目を縱2列にしたい場合は50/50や33/66など、適した幅を選択してください。

ドキュメント概観のリストビューからカラムの親ブロックを選択します。

カラムブロックの設定から高度な設定を選択します。追加CSSクラスにcontact_msgと入力します。

以上の手順でdviタグにclassを追加できます。カラム内に段落などのブロックを追加して非表示にしたい文章を作成していきます。

まとめ

不要な情報を非表示にすることで確認画面や送信画面がすっきりして見やすくなります。

フォームのあるページに文章をたくさん入力しているページがある方は参考に編集してください。

MW WP FORMはフックが多くて扱いやすいですが、開発終了の発表がありました。

すでにMW WP FORMを使ってフォームを運用している方向けのカスタマイズ方法になってしまったのが残念です。