MENU
カゲオ
管理人
陰ながらサイト運営を応援するブログ「カゲサイ」の管理人です。
WordPressやブログについてかゆいところに手が届く解説を心がけています。

WordPress

その他

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

サブブログ|デスク環境構築サイト運営中⇒見てみる

Contact Form7全タグの使い方を徹底解説

当ページのリンクには広告が含まれています。
Contact Form7タグの使い方

当記事では、Contact Form7で使えるすべての”タグの使い方“や”カスタム方法“を解説します。

タグはフォーム作成時はもちろんですが、自動返信メールなどにも使いますので、ビジネス用途でフォームを作成するなら必ず押さえておきましょう。

Contact Form7講座

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

Contact Formコンタクトフォーム7タグの使い方

コンタクトフォーム7タグの使い方

タグの目的は主に2つです。
フォームデザインの調整
問い合わせ内容を自分や相手のメール内に表示する

タグの作り方

コンタクトフォーム7タグの使い方
  1. フォームから使いたいタグを選択(上記はテキストタグを使用)
  2. 項目タイプ:必須の有無を選択
    ※.入力しないと送信できないようにする
  3. 名前:タグ名(メール設定で使用するもの)
    ※.同じタグを複数使う場合は、番号で管理できるよう自動で割り振られます
  4. デフォルト値:フォーム内に薄く記入例を表示する文言
    ※.使用する場合「このテキストを項目の〜」にチェックを入れる
  5. Akismet:現在は非推奨プラグインなので、チェックしない
  6. ID属性クラス属性:その項目だけにCSSを指定したい場合に使用
  7. タグを挿入をクリック

項目タイプの設定

コンタクトフォーム7必須項目エラー

項目を必須にすると、入力がないまま送信ボタンを押しても、エラーが出て送れません。
エラー表示の文言指定は以下で解説しました。

名前の設定

コンタクトフォーム7タグとメール設定
  1. 指定した”タグ名“がメール設定に表示されています。
  2. メッセージ本文にタグを貼ると、フォームに入力された内容がメール内に表示されます。

メッセージ本文
差出人:[your-name]

メールに届く内容
差出人:テスト(フォームに入力された内容)

メッセージ本文の使い方は、以下で詳しく解説しています。

Contact Form7のメッセージ本文テンプレート解説

デフォルト値の設定

コンタクトフォーム7プレースホルダー

入力フォーム内に薄く表示する文言です。
入力を開始すると自動で消えるため、記入例がわかりにくい場合などに使用してください。

ID属性・クラス属性の設定

コンタクトフォーム7クラス属性設定

例えば、その項目だけ入力フォームの”“や”背景色“を変更したい場合などは、自由に指定できます。
ただ、ID属性はテーマによってうまく指定できないこともあったので、クラス属性で指定するのがおすすめです。

コンタクトフォーム7クラス属性設定

クラス属性に指定するとタグにclass:〇〇が追加されます。
サンプルでは以下のような指定をしています。

.test {
  width: 150px;
  background: #d76c6c52;
}
カゲオ

テキスト・メールアドレス・URL・電話番号」タグの設定方法はすべて同じです

数値タグ

コンタクトフォーム7数値タグの種類

数値タグは、”スピンボックス“と”スライダー“を選択できます。
ただし、スライダーは数値が表示されず内容がわからないため、基本はスピンボックスを使いましょう。
テキストタグとの違いは、数値しか入力できないように制限をかけれます

コンタクトフォーム7数値タグの設定方法
数値タグの使い方
  1. 項目タイプ:スピンボックスを選択
  2. 必須項目:お好み
  3. 名前:こだわりがなければそのままでOK
  4. デフォルト値:お好み
  5. 範囲:数値の下限〜上限を設定可能
コンタクトフォーム7数値タグサンプル

例えば、年齢の入力などに使えます。
[number number min:20 max:80]
上記だと20〜80歳に設定されます。
※.指定した数値”未満“または”超過“を入力するとエラーになります。

カゲオ

以上以下ではないから気をつけてね
min:10 max:30なら9より下〜31より上がエラーになるよ

日付タグ

コンタクトフォーム7日付タグの設定

日付タグも下限と上限を設定できます。
[date* date min:2024-01-01 max:2024-12-31]
上記の場合、2024年度以外の日付も表示はされますが、選択はできないようになっているため、ユーザーが間違えることはありません。
生年月日“や”予約日“などによく使われていますね。

コンタクトフォーム7日付タグカスタム

デフォルトでは、右側のアイコンをタップするとカレンダー形式で表示されます。
カスタムすることで下段のドロップダウン形式にすることもできます。
カスタム方法はこちら

テキストエリアタグ

コンタクトフォーム7テキストエリアタグ

テキストエリアは1行で収まらない箇所に使用します。
問い合わせ内容“に使用することが多いですね。

コンタクトフォーム7テキストエリアタグ設定

設定方法は最初に解説した”テキストタグ“と同じです。

ドロップダウンメニュー

コンタクトフォーム7ドロップダウンメニュー設定
  1. 項目タイプ:基本チェックします。
  2. 名前:任意のものを入力
  3. オプション選択項目を1行ずつ入力してください。
  4. 複数選択を可能にする:わかりにくくなるため非推奨です。
  5. 空の項目を先頭に挿入する“チェック”しましょう。
コンタクトフォーム7ドロップダウンメニュー表示

空の項目をチェックしないと、選択項目が最初から並んで表示されるため、ドロップダウンメニューにする必要性がなくなります。
並んで表示させたい場合は、次項で解説している”ラジオボタン“や”チェックボックス“を活用しましょう。

チェックボックスとラジオボタンの使い分け

コンタクトフォームラジオボタンとチェックボックスの違い

ラジオボタンはどれか1つを選択するものですが、チェックボックスは”1つ選択“と”複数選択“を設定できます。

1つ選択

[checkbox* checkbox-1 exclusive use_label_element default:1 “サンプル4” “サンプル5” “サンプル6”]

複数選択

[checkbox* checkbox-2 use_label_element default:1 “サンプル7” “サンプル8” “サンプル9”]

コンタクトフォーム7チェックボックスとラジオボタンの違い

またラジオボタンには必須項目がありません。
必ず選ぶことを想定して使うためです。
例えば、性別やメルマガの受け取りの有無によく使われています。

カゲオ

基本は2択で使うのがおすすめ

チェックボックスとラジオボタンの設定方法

コンタクトフォーム7チェックボックスとラジオボタンの設定
チェックボックスとラジオボタンタグの使い方
  1. 必須項目:お好み
  2. オプション選択項目を1行ずつ入力してください。
    ※ラジオボタンは2択にしましょう
  3. ラベルを前に、チェックボックスを後に配置する
    チェックしない
  4. 個々の項目をlabel要素で囲む
    チェックする
  5. チェックボックスを排他化する
    チェックすると”1つ選択“となる
コンタクトフォーム7チェックボックスの位置

テキストの後にチェックボックスがあると不自然なので、基本チェックしません。

コンタクトフォーム7チェックボックスのラベルの範囲

項目をラベル要素で囲むとは、テキストをクリックしてもチェックが入るかどうかになります。
必ずチェックしておきましょう。

コンタクトフォーム7チェックボックスの初期設定

チェックなし

[checkbox* checkbox-1 use_label_element “サンプル1” “サンプル2” “サンプル3”]

チェックあり

[checkbox* checkbox-2 use_label_element default:1 “サンプル4” “サンプル5” “サンプル6”]

設定項目の中にはありませんが、上記のような指定もできます。
例えば、”default:1″を”default:2“とすれば、選択項目の2番目(サンプル5)にチェックが付きます

承認確認タグ

コンタクトフォーム7承認確認タグの設定方法

同意条件:チェックボックス横の文言
オプション:チェックしない
[acceptance acceptance-227] スパム防止のため、こちらにチェックを入れてから送信してください。 [/acceptance]

コンタクトフォーム7承認確認タグサンプル

例えば送信ボタンの上に設置し、チェックをしないと送信できないようにすることもできます。
任意選択にしてしまうと、こうした使い方はできません。

クイズタグ

コンタクトフォーム7クイズタグ設定方法

クイズと回答:”質問|答え””を入力します。
[quiz quiz-1 class:quiz "質問:2024年から始まった税制優遇制度の名称は?|新NISA"]

コンタクトフォーム7クイズタグサンプル

クイズタグは、設定した答えが正確に入力されないと送信することができません。
例えば、採用フォームやターゲット属性を絞りたい時に、特定の人しか答えられないような質問を設置し、スクリーニングをかけることもできます

大文字“と”小文字“は区別されません。
ひらがな“と”カタカナ“は区別されます。

    必須お名前

    必須メールアドレス

    必須スパム対策

    必須お問い合わせ内容


    そのほか上記のように使えば、強力なスパム対策にもなります。
    管理しているサイトは、この仕様にしてから5年以上問い合わせからスパムがきていません。
    セキュリティ系のプラグインを増やしたくない方にもおすすめです。

    クイズタグにplaceholdeは指定はできません

    [quiz quiz-1 class:quiz "カタカナでカゲサイと入力してください|カゲサイ"]
    input.quiz {
       background: #ff555a4a;
    } 

    フォームの背景色を変更するコードです。

    ファイルタグ

    コンタクトフォーム7ファイルタグ

    jpeg/png/webp/gif/pdf/mov/mp4など基本的な拡張子は対応しています。
    ※.iPhoneやiPadで初期設定されている「HEIC/HEIF」形式は添付できません。
    また添付できるのは”1ファイルのみ“です。

    コンタクトフォーム7ファイルタグ設定

    ファイルサイズの上限設定

    最大25MBまで指定できます。
    ただし例えば、Gmail側の最大添付容量も25MBなので、MAXにするとメールが届かなくなります。

    上限設定は、送信先のメールサービスの上限も必ず確認しておきましょう。

    カゲオ

    最近はスマホやタブレットのスクショも2〜3MBくらいあるため、5mbあたりに設定しておけば問題ないでしょう。

    受け入れ可能なファイル形式

    送信できる拡張子を絞ることができます。
    例えば、jpeg png(拡張子同士は半角スペースをあける)と指定すれば、それ以外のファイルは添付できなくなります。

    なにも指定しないとメジャーな画像ファイルくらいしか添付できないため、以下くらい指定しておくと良いかと思います。
    [file file-sample limit:5mb filetypes:jpg|jpeg|png|webp|svg|gif|pdf|csv|mov|mp4|zip]
    ※.実際のタグは拡張子同士の間に「|」が入ります。

    送信ボタンタグ

    コンタクトフォーム7送信ボタン
    コンタクトフォーム7送信ボタンタグ設定

    ラベルがボタン内に表示されるテキストになります。
    ボタンデザインを変更するため、クラス属性を指定しておくのがおすすめです。
    以下でContact Form7のCSSを解説しました。

    Contact Form7をおしゃれにするカスタマイズ

    Contact Form7コンタクトフォームで使えるタグテンプレート

    項目タグ
    テキスト[text* your-name]
    メールアドレス[email* your-email]
    URL[url* your-url]
    電話番号[tel* your-tel]
    数値[number* your-number min:20 max:80]
    下限〜上限はお好みで
    日付[date* your-date min:2024-01-01 max:2024-12-31]
    下限〜上限はお好みで
    テキストエリア[textarea* your-textarea]
    ドロップダウンメニュー[select* your-dpmenue include_blank “サンプル1” “サンプル2” “サンプル3”]
    チェックボックス[checkbox* your-checkbox use_label_element “サンプル1” “サンプル2” “サンプル3”]
    複数選択可
    ラジオボタン[radio your-radiobtn use_label_element default:1 “はい” “いいえ”]
    承認確認[acceptance your-acceptance] ここに文言 [/acceptance]
    クイズ[quiz your-quiz “1+1は?|2”]
    ファイル[file your-file limit:5mb filetypes:jpg|jpeg|png|webp|svg|gif|pdf|csv|mov|mp4|zip]
    ファイルサイズは最大25MBまで
    送信ボタン[submit class:btnsample “ボタン内のテキスト”]

    コピペで使えるタグを作りました。
    タグ名中身はお好みで変更してください。

    Contact Formコンタクトフォーム7タグコードの解説

    コンタクトフォーム7のタグには、”設定項目から選択できるもの“と”そうでないもの(カスタム用)“があります。

    カスタム用も含め、あらためて解説しました。

    設定項目から選べるタグコード

    必須項目の有無

    コンタクトフォーム7必須項目エラー

    入力しないと送信できない&エラーを表示します。
    任意:[text your-name]
    必須:[text* your-name]
    *(アスタリスク)の有無で決まっています。

    コンタクトフォーム7ラジオボタンと回答タグ

    ただし”ラジオボタン“と”クイズタグ“は*をつけるとエラーになります。
    ラジオボタンは必ずなにかを選択する必要があり、クイズタグも正解を書かないと送信できないため、自動的に必須項目になっているためです。

    クラス属性を指定

    コンタクトフォーム7クラス属性設定

    特定のフォームだけデザインを変更したい時に使用します。
    デフォルト:[date* your-date]
    カスタム:[date* your-date class:sample]

    プレースホルダーを表示

    コンタクトフォーム7プレースホルダー

    フォーム内に記入例を薄く表示します。
    デフォルト:[text* your-name]
    カスタム:[text* your-name placeholder”サンプル”]

    チェックボックスを1つ選択に絞る

    コンタクトフォーム7チェックボックス選択範囲

    複数選択(デフォルト)
    [checkbox* checkbox use_label_element “サンプル1” “サンプル2” “サンプル3”]
    1つを選択
    [checkbox* checkbox use_label_element exclusive “サンプル1” “サンプル2” “サンプル3”]

    カスタム用タグコード

    チェックボックスに最初から✔を入れた状態にする

    コンタクトフォーム7チェックボックスの初期設定

    [checkbox* checkbox use_label_element default:1サンプル4” “サンプル5” “サンプル6”]
    末尾番号により最初に何番目を選択させるか指定できます。
    例えばdefault:2とすれば、”サンプル5“にチェックが付きます。

    チェックボックスまたはラジオボタンを縦並びにする

    コンタクトフォーム7縦並び

    縦並びにするには、クラス属性を追記し、CSSを指定する必要があります。
    例えば以下のように追記したら
    [checkbox* checkbox use_label_element class:verticallist “サンプル1” “サンプル2” “サンプル3”]

    .verticallist{
      display:inline-grid;
    }

    上記をStyle.cssに追加してください。

    文字数制限と文字数カウントの設定

      字数カウントが増えるサンプル


      0

      上記は10字以上20字以下に設定してあります。
      それ以外だとエラーが表示されるので、字数カウントと合わせてご確認ください。

      [text* your-password minlength:10 maxlength:20 placeholder "10〜20字以内"]
      [count your-password]

      minlength:最小文字数(10とした場合9文字でエラー) 
      maxlength:最大文字数(20とした場合21文字でエラー)

      [text* your-password minlength:10]:10字未満エラー
      [text* your-password maxlength:20]:21字以上エラー

      上記のように”最小“や”最大“だけ設定することも可能です。

      [text* your-password minlength:10 maxlength:20 placeholder "10〜20字以内"]
      [count your-password]

      countタグは、字数を表示したいフォームと“タグ名”を揃える必要があります
      設置場所は、適用したいタグの真下です。
      ※.タグの名前はお好みで変更してください。

        字数カウントが減るサンプル


        20

        また通常は入力ごとにカウント数が増えていくところ…
        [count your-password down]を追加することで、カウントが減っていく指定もできます。

        [text* your-password minlength:10 maxlength:20 placeholder "10〜20字以内"]
        [count your-password down]

        ただし、必ずmaxlength(最大文字数)を指定する必要があります。
        ここで指定した字数からカウントが減っていきます

        結論:Contact Form7のタグは使い慣れるしかない

        以上、コンタクトフォーム7のタグについて解説しました。

        慣れないうちは大変だと思いますが、使いこなせば相当便利であることは言うまでもありません。

        特にビジネスサイトを運営されている方は、工夫を凝らし、1%でもユーザーの負担を減らしていきたいですね。

        Contact Form7講座
        Contact Form7タグの使い方

        この記事が気に入ったら
        フォローしてね!

        シェアしていただけると励みになります
        • URLをコピーしました!

        記事への質問等はこちらからどうぞ

        コメントフォーム

        ※日本語が含まれない内容は投稿できません。

        目次