Contact Form 7は、WordPressで定番のメールフォームプラグインです。先日、ご一緒したコーダーさんがメールフォームのデフォルト値をJavaScriptで実装してくれたのですが、Contact From 7だけでもできちゃう内容でした。なので今回は、デフォルト値の設定方法をいくつか紹介します。

フォームタグにデフォルト値を直接記述

いちばんカンタンなのは、フォームタグに直接デフォルト値を記述する方法です。

[text item-name "orange"]

この方法だとデフォルト値が固定なので、条件によって変えたい場合は使えません。JavaScriptを駆使する前に、以下に紹介する方法が使えるかお試しください。

デフォルト値をGETで渡す

問い合わせフォームが設置してあるページにリンクを貼るとき、リンクURLにパラメータを加えてデフォルト値にすることができます。

例えば、「商品ページから問い合わせページにリンクしたとき、自動的にその商品名が入力された状態にする」なんてことができます。

やりかた

フォームタグにdefault:getを追加するだけ。

[text item-name default:get]

URLにパラメータを追加してデフォルト値を設定できます。パラメータは、「フォーム項目の名前=値」です。下記の例だと、item-nameという名前のフォームタグに対して「orange」というデフォルト値を渡しています。

https://example.com/contact/?item-name=orange

WordPressで実装するときは通常、値をURLエンコードします。

<a href="<?php echo esc_url( home_url( '/contact/' ) . '?item-name=' . urlencode( 'オレンジ' ) ); ?>">リンク</a>

下記のようなセレクトボックスでも同じ方法でいけます。

[select item-name default:get "apple" "orange"]

デフォルト値をカスタムフィールドから取得する

フォームが設置されているページに保存されているカスタムフィールドの値をデフォルト値とすることもできます。

例えば、複数の商品ページにそれぞれフォームを設置して、そのページの商品名や型番をデフォルト値としたい場合などに使えます。

やりかた

フォームタグにdefault:post_metaを追加します。

[text item-name default:post_meta]

フォームの項目名と同じ名前のカスタムフィールドの値がデフォルト値になります。別のページのカスタムフィールドから値を引っ張ることはできません。

ショートコードでデフォルト値を指定する

フォームを呼び出すためのショートコードにデフォルト値を記載することもできます。

上記のgetやpost_metaでは難しいケースで使うといいかもしれません。

やりかた

フォームタグにdefault:shortcode_attrを追加します。

[text item-name default:shortcode_attr]

フォームを呼び出すショートコードに対して、デフォルト値を設定するための属性を追加します。

[contact-form-7 id="1234" title="お問い合わせフォーム" item-name="orange"]

shortcode_atts_wpcf7フィルターフックを使って、受け渡し可能な属性として登録します。登録しておかないと値を受け渡してくれません。

add_filter( 'shortcode_atts_wpcf7', 'custom_shortcode_atts_wpcf7_filter', 10, 3 );
function custom_shortcode_atts_wpcf7_filter( $out, $pairs, $atts ) {
    $my_attr = 'item-name';
    if ( isset( $atts[$my_attr] ) ) {
        $out[$my_attr] = $atts[$my_attr];
    }
    return $out;
}

デフォルト値の優先度

メールタグには、複数のデフォルト値を指定できます。先に書いたほうが優先されます。

[text item-name default:get "orange"]

上記の例だと、まずgetで渡された値があるかチェックして、なければ、メールタグに直接記載されたデフォルト値が適用されます。

公式ドキュメントに書いてあります

https://contactform7.com/ja/docs/

当記事の内容は、公式ドキュメントにも掲載されています。ぜひ一通り目を通してみてください。なぜ、わざわざ公式ドキュメントに書いてあることを記事にしたかというと、もともと「セレクトボックスの項目を動的に生成してデフォルト値も指定する」という記事を書こうと思ったんですけど、ちょっと長くなったので「デフォルト値の設定」と「セレクトボックスの項目を動的に生成」をそれぞれ別記事に分けた次第です。後者の記事もそのうちアップします（の、予定です）。