以前ご紹介した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” と追記します。
[contact-form-7 id="358" html_id="testForm" title="テストフォーム"]
JavaScriptでformタグにカスタムデータ属性を追加
そして、JavaScriptの getElementByIdプロパティでフォームのIDを取得し、datasetプロパティでカスタムデータ属性を設定します。
スクリプトはフッターに記入するのが良いと思います。テーマにCocoonを使用している場合は、tmp-userフォルダの footer-insert.php に追記するのが良いと思います。
<script type="text/javascript">
const form = document.getElementById('testForm');
form.dataset.persist = "garlic";
</script>
フィルターフックを使う方法
WordPressの do_shortcode_tag フックを使う方法もあります。
別記事の「ショートコードで出力されるHTMLを変更する do_shortcode_tagフック」で紹介している方法です。子テーマの functions.php に追記します。
カスタマイズ箇所はここだけですし、HTMLとして出力されるので、こちらのほうがスマートですね。
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 );
以上、ご参考になれば幸いです。
ありがとうございます。
コメント