WordPress – Contact Form 7でブラウザを閉じても入力内容を保持するGarlic.jsを使う

WordPress
この記事は約4分で読めます。
スポンサーリンク

以前ご紹介したGarlic.jsをWordPressのプラグイン「Contact Form 7」で利用する方法です。
フォームの <form> タグにカスタムデータ属性(data-persist=”garlic”)を追加する必要があるわけですが、フィルターフックを使う方法とJavaScriptを使う方法の2つの方法をご紹介します。

Garlic.jsのダウンロードや設置については本記事では割愛しますので、詳しくは「ブラウザを閉じても入力内容を保持するGarlic.js」をご覧願います。

スポンサーリンク

JavaScriptを使う方法

まずはショートコードでIDを追加してJavaScriptでデータ属性を追加する方法です。

ショートコードにhtml_idを追加

Contact Form 7では、ショートコードに html_id を追加することで <form> タグにidを追加することが出来ます。
例えば、testForm というidを追加したい場合は、下記のようにショートコードに html_id=”testForm” と追記します。

Shortcode
[contact-form-7 id="358" html_id="testForm" title="テストフォーム"]
form 要素に id や class 属性を追加できますか? | Contact Form 7 [日本語]

JavaScriptでformタグにカスタムデータ属性を追加

そして、JavaScriptの getElementByIdプロパティでフォームのIDを取得し、datasetプロパティでカスタムデータ属性を設定します。
スクリプトはフッターに記入するのが良いと思います。テーマにCocoonを使用している場合は、tmp-userフォルダの footer-insert.php に追記するのが良いと思います。

JavaScript
<script type="text/javascript">
const form = document.getElementById('testForm');
form.dataset.persist = "garlic";
</script>
Document.getElementById() - Web API | MDN
Document の getElementById() メソッドは、 id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返します。要素の ID は指定されていれば固有であることが求められているため、特定の要素にすばやくアクセスするには便利な方法です。
HTMLElement: dataset プロパティ - Web API | MDN
dataset は HTMLElement インターフェイスの読み取り専用プロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。これは文字列のマップである (DOMStringMap) で、それぞれの data-* 属性の項目です。

フィルターフックを使う方法

WordPressの do_shortcode_tag フックを使う方法もあります。
別記事の「ショートコードで出力されるHTMLを変更する do_shortcode_tagフック」で紹介している方法です。子テーマの functions.php に追記します。
カスタマイズ箇所はここだけですし、HTMLとして出力されるので、こちらのほうがスマートですね。

PHP
add_filter( 'do_shortcode_tag', function( $output, $tag, $attr ) {
	if ( 'contact-form-7' === $tag || 'contact-form' === $tag ) {
		$output = str_replace( '<form ', '<form data-persist="garlic" ', $output );
	}
	return $output;
}, 10, 3 );

以上、ご参考になれば幸いです。
ありがとうございます。

コメント

タイトルとURLをコピーしました