はじめに
※この記事は「カスタム投稿タイプをゼロから作ってウェブサイト上に表示させるまで」
の続きだったりします。
何かあればそのたびに追加していく予定。
コンタクトフォームでの入力欄にcssを適用させる
CSSの基本がわかっていること前提の記述になることをあらかじめ断っておく。
また、本家サイトの記事にわかりやすい解説もあったのでそちらも参照してほしい。
ここでは、あちらにはない扱い方を説明。
CSSを書くときはたいてい
.kana_name{
background-color: #fff;
color: #000;
width: 50%;
}
……のように書くものだが、応用的な書き方として下記のようなものもある。
input[type="text"]{
background-color: #fff;
color: #000;
width: 50%;
}
たとえばコイツは、「type="text"がついたinputタグにのみ」適用される。
つまり、同じinput属性でも、ラジオボタンやチェックボックスには適用されず、文字を入力する箇所には適用されるのだ。
本家にはこのように載っているが、実はこれ、応用として
input[name="your-kana"]{
background-color: #fff;
color: #000;
width: 50%;
}
こんな感じの記述で指定することもできる。
こうすると、name属性がyour-kanaのものだけCSSが変化するようになる。
むやみにCSSはいじりたくないが、思うようにclassをかけられない、でもこの部分だけCSSをつけたい、という場合には重宝するはず。
ちなみに、条件を複数設定したい場合は以下のようにする。
input[type="text"][data-special="hogehoge"]{
background-color: #fff;
color: #000;
width: 50%;
}
前のページから情報を引き継ぐ
別のページにある内容をコンタクトフォームに転写させたいとき。
たとえばECサイト等で、商品のページに「注文する！」ボタンをのせ、クリックしたら商品名等がすでに入力されたお問い合わせページに飛ばしたいときに使う。
?>
<a href="https://abcdefghijk.jp/contactpage?hoge=青眼の銀ゾンビ">注文はコチラから！！</a>
<?php
渡し側ではこんな風に、「?変数=渡したい値」の形でリンク末尾に追加してやり、
[text hoge default:get placeholder "例) カード名"]
受取り側では、name属性の値を変数名と同一にしたうえでショートコードにdefault:getと記入してやればよい。
動的にしたいなら、渡し側のコードを以下のように、php変数化してやればバッチリだ。
?>
<a href="https://abcdefghijk.jp/contactpage?hoge=<?php echo get_title(); ?>">注文はコチラから！！</a>
<?php
場合によっては、引き継いだ情報を勝手に変更されたくない、ということもある。
そんな時は以下のように、readonly属性というものをつけてやろう。
読んで字のごとく、ユーザーが入力欄を書き換え出来なくなる属性値だ。
?>
<a href="https://abcdefghijk.jp/contactpage?hoge=青眼の銀ゾンビ">注文はコチラから！！</a>
<?php
[text hoge default:get placeholder "例) カード名" readonly]
自動拡張するテキストエリアを作る
郵便番号を自動入力させる(jQuery)
jQueryプラグインを利用する。
最低限必要なものだけをまとめるとこのようになる。
<!-- ▼郵便番号の入力欄(7桁) -->
[number zipcode]
<!-- ▼住所の入力欄(都道府県) -->
都道府県：[text address01]
市区町村：[text address02]
<!-- 自動入力システム -->
<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。
というのも、この「AjaxZip3.zip2addr」というのはjQueryに元々実装されている関数ではなく、https://ajaxzip3.github.io/ajaxzip3.jsの開発者の方が考案したもの。なので、関数の実行よりも前に読み込みを済ませておかないと「存在してない関数を実行しやがったな！」と突っ込まれてしまうのだ。
なお、
[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)
こちらもjQueryプラグインを利用する。やっぱりこれも末尾に記載しておくように。
お名前(漢字)：[text your-name placeholder "例) 花澤 花子"]
お名前（フリガナ）：[text your-kana placeholder "例) ハナザワ ハナコ"]
<!-- 自動入力システム -->
<script src="http://example.com/wp-content/themes/test/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>
送信完了後、ユーザーを特定のページ（サンクスページなど）にリダイレクトさせる
まずは以下の通り。
こちらは、コンタクトフォームの入力画面、または自動遷移を適用させたいテンプレートファイルに記入するもの。
例によって、送信ボタンより下に書かないと作動しないのには注意しておこう。
ちなみに遷移先ページのURLはhttps://hogehoge.com/thankyouとする。
まあ、<?php echo home_url(); ?>でURLを代替させているから、この辺とくに考えなくてもよさそうだけど。
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = '<?php echo home_url(); ?>/thankyou/';
}, false );
</script>
複数のページで上記の同じシステムを利用したい場合は？
フッターに記入するとよい。
ただし、変なページで実行されてしまわないよう、phpで「特定の箇所にだけ適用する」という処理が必要だ。
※お問い合わせページに対応するPHPファイルのテンプレート名が「page-foo.php」「page-bar.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://example.com/wp-content/themes/test/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