Help us understand the problem. What is going on with this article?

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

はじめに

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

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

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

CSSの基本がわかっていること前提の記述になることをあらかじめ断っておく。
また、本家サイトの記事にわかりやすい解説もあったのでそちらも参照してほしい。

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

CSSを書くときはたいてい

contact_form_7(コンタクトフォームの入力画面)、またはphpテンプレート
.kana_name{
    background-color: #fff;
    color: #000;
    width: 50%;
}

……のように書くものだが、応用的な書き方として下記のようなものもある。

contact_form_7(コンタクトフォームの入力画面)、またはphpテンプレート
input[type="text"]{
    background-color: #fff;
    color: #000;
    width: 50%;
}

たとえばコイツは、「type="text"がついたinputタグにのみ」適用される。
つまり、同じinput属性でも、ラジオボタンやチェックボックスには適用されず、文字を入力する箇所には適用されるのだ。

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

contact_form_7(コンタクトフォームの入力画面)、またはphpテンプレート
input[name="your-kana"]{
    background-color: #fff;
    color: #000;
    width: 50%;
}

こんな感じの記述で指定することもできる。
こうすると、name属性がyour-kanaのものだけCSSが変化するようになる。
むやみにCSSはいじりたくないが、思うようにclassをかけられない、でもこの部分だけCSSをつけたい、という場合には重宝するはず。

ちなみに、条件を複数設定したい場合は以下のようにする。

contact_form_7(コンタクトフォームの入力画面)、またはphpテンプレート
input[type="text"][data-special="hogehoge"]{
    background-color: #fff;
    color: #000;
    width: 50%;
}

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

別のページにある内容をコンタクトフォームに転写させたいとき。
たとえば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

場合によっては、引き継いだ情報を勝手に変更されたくない、ということもある。
そんな時は以下のように、readonly属性というものをつけてやろう。
読んで字のごとく、ユーザーが入力欄を書き換え出来なくなる属性値だ。

遷移前のページ
?>

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

<?php
contact_form_7(コンタクトフォームの入力画面)
[text hoge default:get placeholder "例) カード名" readonly]

自動拡張するテキストエリアを作る

https://qiita.com/yomogenium/items/8610f606c3f4e140cd2c

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

jQueryプラグインを利用する。
最低限必要なものだけをまとめるとこのようになる。

contact_form_7(コンタクトフォームの入力画面)
<!-- ▼郵便番号の入力欄(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プラグインを利用する。やっぱりこれも末尾に記載しておくように。

contact_form_7(コンタクトフォームの入力画面)
お名前(漢字):[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を代替させているから、この辺とくに考えなくてもよさそうだけど。

contact_form_7(コンタクトフォームの入力画面)
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = '<?php echo 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://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

yomogenium
おしごとのためにつかっています、まる。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした