Edited at

Contact form 7のよくやる操作まとめ


はじめに

※この記事は「カスタム投稿タイプをゼロから作ってウェブサイト上に表示させるまで

の続きだったりします。

何かあればそのたびに追加していく予定。


もくじ


コンタクトフォームでの入力欄にcssを適用させる

CSSの基本がわかっていること前提の記述になることをあらかじめ断っておく。

また、本家サイトの記事にわかりやすい解説もあったのでそちらも参照してほしい。

ここでは、あちらにはない扱い方を説明。


contact_form_7(コンタクトフォームの入力画面)


input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}


本家にはこのように載っているが、実はこれ、応用として


contact_form_7(コンタクトフォームの入力画面)


input[type="name='your-kana'"]
{
background-color: #fff;
color: #000;
width: 50%;
}


こんな感じの記述で指定することもできる。「フリガナ欄だけ色を変えたい!でもcssはむやみにいじるのコワい!」なんてケースでは重宝する。


前のページから情報を引き継ぐ

別のページにある内容をコンタクトフォームに転写させたいとき。

たとえばECサイト等で、商品のページに「注文する!」ボタンをのせ、クリックしたら商品名等がすでに入力されたお問い合わせページに飛ばしたいときに使う。


遷移前のページ

?>

<a href="https://abcdefghijk.jp/contactpage?hoge=青眼の銀ゾンビ">注文はコチラから!!</a>

<?php


渡し側ではこんな風に、「?変数=渡したい値」の形でリンク末尾に追加してやり、


contact_form_7(コンタクトフォームの入力画面)


[text hoge default:get placeholder "例) カード名"]

受取り側では、name属性の値を変数名と同一にしたうえでショートコードにdefault:getと記入してやればよい。

動的にしたいなら、渡し側のコードを以下のように、php変数化してやればバッチリだ。


遷移前のページ

?>

<a href="https://abcdefghijk.jp/contactpage?hoge=<?php echo get_title(); ?>">注文はコチラから!!</a>

<?php



郵便番号を自動入力させる

jQueryプラグインを利用する。

最低限必要なものだけをまとめるとこのようになる。


contact_form_7(コンタクトフォームの入力画面)

<!-- ▼郵便番号の入力欄(7桁) -->

[number zipcode]

<!-- ▼住所の入力欄(都道府県) -->
都道府県:[text address01]
市区町村:[text address02]



自動入力を入れたいphpテンプレートファイル、またはコンタクトフォームの入力画面

<!-- ▼ライブラリファイル -->

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

<!-- ▼自動入力システム -->
<script type="text/javascript">
jQuery(function( $ ) {
jQuery( 'input[name="zipcode"]' ).keyup( function( e ) {
AjaxZip3.zip2addr('zipcode','','address01','address02');
} )
} );
</script>


基本的にjQueryで動いている。

ルールとして、上から「入力欄」→「ライブラリファイル」→「自動入力システム」の順番に書かなくてはならないので注意だ。順番を間違えると動かなくなる。というか、末尾に記載しとけばOK。

なお、

[number zipcode]

都道府県:[text address01]
市区町村:[text address02]

↑これらはコンタクトフォームを介して

<input type="number" name="zipcode" value="" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number">

都道府県:<input type="text" name="address01" value="" class="wpcf7-form-control wpcf7-text">
市区町村:<input type="text" name="address02" value="" class="wpcf7-form-control wpcf7-text">

↑このように変換されることは押さえておくべき。


フリガナを自動入力させる

こちらもjQueryプラグインを利用する。やっぱりこれも末尾に記載しておくように。


contact_form_7(コンタクトフォームの入力画面)


お名前(漢字):[text your-name placeholder "例) 花澤 花子"]

お名前(フリガナ):[text your-kana placeholder "例) ハナザワ ハナコ"]



自動入力を入れたいphpテンプレートファイル、またはコンタクトフォームの入力画面

<!-- ▼ライブラリファイル -->

<script src="http://anshintest.xyz/wp-content/themes/twentynineteen/js/jquery.autoKana.js"></script>

<!-- ▼自動入力システム -->
<script type="text/javascript">
jQuery(function($) {
$.fn.autoKana('input[name="your-name"]', 'input[name="your-kana"]', {
katakana : true //true:カタカナ、false:ひらがな(デフォルト)
});
});
</script>


https://qiita.com/drafts/fd64b96150cbb0547d28/edit


送信完了後、ユーザーを特定のページ(サンクスページなど)にリダイレクトさせる

まずは以下の通り。

こちらは、コンタクトフォームの入力画面、または自動遷移を適用させたいテンプレートファイルに記入するもの。

例によって、送信ボタンより下に書かないと作動しないのには注意しておこう。

ちなみに遷移先ページのURLはhttps://hogehoge.com/thankyouとする。

まあ、<?php echo esc_url ( home_url() ); ?>でURLを代替させているから、この辺とくに考えなくてもよさそうだけど。


contact_form_7(コンタクトフォームの入力画面)


<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '<?php echo esc_url ( home_url() ); ?>/thankyou/';
}, false );
</script>



上記の処理を一括にまとめたいときは?

フッターに記入するとよい。

ただし、変なページで実行されてしまわないよう、phpで「特定の箇所にだけ適用する」という処理が必要だ。

※お問い合わせページに対応するPHPファイルのテンプレート名が「page-foo.php」「page-bar.php」の場合


footer.php


<?php
if( is_page( array('foo', 'bar') ) ){

<!-- ライブラリファイル -->
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

<!-- 自動入力システム -->
<script type="text/javascript">
jQuery(function( $ ) {
jQuery( 'input[name="zipcode"]' ).keyup( function( e ) {
AjaxZip3.zip2addr('zipcode','','address01','address02');
} )
} );
</script>

<!-- ライブラリファイル -->
<script src="http://anshintest.xyz/wp-content/themes/twentynineteen/js/jquery.autoKana.js"></script>

<!-- 自動入力システム -->
<script type="text/javascript">
jQuery(function($) {
$.fn.autoKana('input[name="your-name"]', 'input[name="your-kana"]', {
katakana : true //true:カタカナ、false:ひらがな(デフォルト)
});
});
</script>

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '<?php echo esc_url ( home_url() ); ?>/thankyou/';
}, false );
</script>

<?php
}
?>



参考資料

https://wepicks.net/phpref-get/

http://www.webdesign-fan.com/ajaxzip3

https://github.com/harisenbon/autokana