WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
運営中のサブブログ
当記事では、Contact Form7で使えるすべての”タグの使い方“や”カスタム方法“を解説します。
タグはフォーム作成時はもちろんですが、自動返信メールなどにも使いますので、ビジネス用途でフォームを作成するなら必ず押さえておきましょう。
タグの目的は主に2つです。
①フォームデザインの調整
①問い合わせ内容を自分や相手のメール内に表示する
項目を必須にすると、入力がないまま送信ボタンを押しても、エラーが出て送れません。
エラー表示の文言指定は以下で解説しました。
メッセージ本文
差出人:[your-name]
メールに届く内容
差出人:テスト(フォームに入力された内容)
メッセージ本文の使い方は、以下で詳しく解説しています。
→Contact Form7のメッセージ本文テンプレート解説
入力フォーム内に薄く表示する文言です。
入力を開始すると自動で消えるため、記入例がわかりにくい場合などに使用してください。
例えば、その項目だけ入力フォームの”幅“や”背景色“を変更したい場合などは、自由に指定できます。
ただ、ID属性はテーマによってうまく指定できないこともあったので、クラス属性で指定するのがおすすめです。
クラス属性に指定するとタグにclass:〇〇が追加されます。
サンプルでは以下のような指定をしています。
.test {
width: 150px;
background: #d76c6c52;
}
「テキスト・メールアドレス・URL・電話番号」タグの設定方法はすべて同じです
数値タグは、”スピンボックス“と”スライダー“を選択できます。
ただし、スライダーは数値が表示されず内容がわからないため、基本はスピンボックスを使いましょう。
テキストタグとの違いは、数値しか入力できないように制限をかけれます。
例えば、年齢の入力などに使えます。[number number min:20 max:80]
上記だと20〜80歳に設定されます。
※.指定した数値”未満“または”超過“を入力するとエラーになります。
以上以下ではないから気をつけてね
min:10 max:30なら9より下〜31より上がエラーになるよ
日付タグも下限と上限を設定できます。[date* date min:2024-01-01 max:2024-12-31]
上記の場合、2024年度以外の日付も表示はされますが、選択はできないようになっているため、ユーザーが間違えることはありません。
“生年月日“や”予約日“などによく使われていますね。
デフォルトでは、右側のアイコンをタップするとカレンダー形式で表示されます。
カスタムすることで下段のドロップダウン形式にすることもできます。
→カスタム方法はこちら
空の項目をチェックしないと、選択項目が最初から並んで表示されるため、ドロップダウンメニューにする必要性がなくなります。
並んで表示させたい場合は、次項で解説している”ラジオボタン“や”チェックボックス“を活用しましょう。
ラジオボタンはどれか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”]
またラジオボタンには必須項目がありません。
必ず選ぶことを想定して使うためです。
例えば、性別やメルマガの受け取りの有無によく使われています。
基本は2択で使うのがおすすめ
テキストの後にチェックボックスがあると不自然なので、基本チェックしません。
項目をラベル要素で囲むとは、テキストをクリックしてもチェックが入るかどうかになります。
必ずチェックしておきましょう。
チェックなし
[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)にチェックが付きます。
同意条件:チェックボックス横の文言
オプション:チェックしない[acceptance acceptance-227] スパム防止のため、こちらにチェックを入れてから送信してください。 [/acceptance]
例えば送信ボタンの上に設置し、チェックをしないと送信できないようにすることもできます。
任意選択にしてしまうと、こうした使い方はできません。
クイズと回答:”質問|答え””を入力します。[quiz quiz-1 class:quiz "質問:2024年から始まった税制優遇制度の名称は?|新NISA"]
クイズタグは、設定した答えが正確に入力されないと送信することができません。
例えば、採用フォームやターゲット属性を絞りたい時に、特定の人しか答えられないような質問を設置し、スクリーニングをかけることもできます。
“大文字“と”小文字“は区別されません。
“ひらがな“と”カタカナ“は区別されます。
そのほか上記のように使えば、強力なスパム対策にもなります。
管理しているサイトは、この仕様にしてから5年以上問い合わせからスパムがきていません。
セキュリティ系のプラグインを増やしたくない方にもおすすめです。
クイズタグにplaceholdeは指定はできません。
[quiz quiz-1 class:quiz "カタカナでカゲサイと入力してください|カゲサイ"]
input.quiz {
background: #ff555a4a;
}
フォームの背景色を変更するコードです。
jpeg/png/webp/gif/pdf/mov/mp4など基本的な拡張子は対応しています。
※.iPhoneやiPadで初期設定されている「HEIC/HEIF」形式は添付できません。
また添付できるのは”1ファイルのみ“です。
最大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]
※.実際のタグは拡張子同士の間に「|」が入ります。
ラベルがボタン内に表示されるテキストになります。
ボタンデザインを変更するため、クラス属性を指定しておくのがおすすめです。
以下でContact Form7のCSSを解説しました。
項目 | タグ |
---|---|
テキスト | [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 “ボタン内のテキスト”] |
コピペで使えるタグを作りました。
タグ名や中身はお好みで変更してください。
コンタクトフォーム7のタグには、”設定項目から選択できるもの“と”そうでないもの(カスタム用)“があります。
カスタム用も含め、あらためて解説しました。
入力しないと送信できない&エラーを表示します。
任意:[text your-name]
必須:[text* your-name]*(アスタリスク)
の有無で決まっています。
ただし”ラジオボタン“と”クイズタグ“は*
をつけるとエラーになります。
ラジオボタンは必ずなにかを選択する必要があり、クイズタグも正解を書かないと送信できないため、自動的に必須項目になっているためです。
特定のフォームだけデザインを変更したい時に使用します。
デフォルト:[date* your-date]
カスタム:[date* your-date class:sample]
フォーム内に記入例を薄く表示します。
デフォルト:[text* your-name]
カスタム:[text* your-name placeholder”サンプル”]
複数選択(デフォルト)
[checkbox* checkbox use_label_element “サンプル1” “サンプル2” “サンプル3”]
1つを選択
[checkbox* checkbox use_label_element exclusive “サンプル1” “サンプル2” “サンプル3”]
[checkbox* checkbox use_label_element default:1 “サンプル4” “サンプル5” “サンプル6”]
末尾番号により最初に何番目を選択させるか指定できます。
例えばdefault:2
とすれば、”サンプル5“にチェックが付きます。
縦並びにするには、クラス属性を追記し、CSSを指定する必要があります。
例えば以下のように追記したら
[checkbox* checkbox use_label_element class:verticallist “サンプル1” “サンプル2” “サンプル3”]
.verticallist{
display:inline-grid;
}
上記をStyle.cssに追加してください。
上記は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タグは、字数を表示したいフォームと“タグ名”を揃える必要があります。
設置場所は、適用したいタグの真下です。
※.タグの名前はお好みで変更してください。
また通常は入力ごとにカウント数が増えていくところ…
[count your-password down]を追加することで、カウントが減っていく指定もできます。
[text* your-password minlength:10 maxlength:20 placeholder "10〜20字以内"]
[count your-password down]
ただし、必ずmaxlength(最大文字数)を指定する必要があります。
ここで指定した字数からカウントが減っていきます。
以上、コンタクトフォーム7のタグについて解説しました。
慣れないうちは大変だと思いますが、使いこなせば相当便利であることは言うまでもありません。
特にビジネスサイトを運営されている方は、工夫を凝らし、1%でもユーザーの負担を減らしていきたいですね。
この記事が気に入ったら
フォローしてね!
記事への質問等はこちらからどうぞ