Contact Form 7ではデフォルトでフォームが用意されていますが、そのまま使うことはまずありません。
WordPress制作であればデザインカンプ通りの項目とデザインにする必要があります。
今回はデフォルトで用意されているフォーム以外のカスタマイズ方法について解説します。
Contact Form 7の基本的な使い方については以下の記事を参照下さい。
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Contact Form 7のお問い合わせフォームのカスタマイズ方法
Contact Form 7の基本的な使い方では以下のようにデフォルトで用意されているフォームで解説しました。
デフォルトで使用しているのは『テキスト』『メールアドレス』『テキストエリア』『送信ボタン』だけですが、他にも色々あります。
これらのボタンをクリックして項目を追加していきます。
共通
こちらはテキストボタンをクリックで表示される画面ですが、まずは共通することについて書きます。
- 項目タイプ:入力を必須にする場合はチェック
- 名前:フォームの名前を入力(画像のようにデフォルトで記入あり)
- デフォルト値:必要に応じて入力
- Akismet:チェック入れるとスパムフィルタリングの対象になる
- ID属性:id名を必要に応じて入力
- クラス属性:class名を必要に応じて入力
[text your-name]
であればtext
がフォームタイプ名、your-name
が名前となります。
補足します。
項目タイプ
チェックを入れるとタイプ名の後ろに*(アスタリスク)が付きます。
【任意】
[text your-name]
【必須】
[text* your-name]
アスタリスクは直接書いてもOKです(他の項目も全て直接書いてもOKです)
ただし、フォームタイプ名を変えるとフォームが変わってしまうのでご注意下さい。
名前
デフォルトで名前は入っていますが、分かりやすい名前に変えた方がいいかと思います。
画像では『text-395』になっていますが、名前を入力する項目であれば『your-name』、住所であれば『your-address』など。
【デフォルト】
[text text-395]
【自分で入力】
[text your-name]
デフォルト値
ここで入力した値がデフォルトで入力されている状態になります。
また『このテキストを項目のプレースホルダーとして使用する』にチェックを入れると、デフォルトで入力ではなく参考テキストのような感じで薄い文字として表示されます。
【デフォルト】
[text your-name "じゅんぺい"]
【プレースホルダー】
[text your-name placeholder "例)じゅんぺい"]
デフォルト値は削除でき、プレースホルダーは入力されているわけではないので、1文字でも入力すれば消えます。
Akismet
Akismetについてはプラグインの『Akismet Anti-Spam』を使う必要があります。
詳しくは以下の記事を参照下さい。
【WordPress】Akismet Anti-Spamを使ってContact Form 7のスパムメール対策する方法
続きを見る
また設定できるフォームは『テキスト』『メールアドレス』『URL』の3つのみです。
これらを全て入力&チェックを入れるとこのようになります(Akismetは省略)
赤枠の部分に自動で生成されるので、右下の『タグを挿入』ボタンをクリックすればこのようにフォームが追加されます。
繰り返しになりますが、このフォームは追加された後に直接編集可能です。
それでは各フォームについて解説していきます。
テキスト
テキストは一番良く使うと思います。
例えば氏名や住所など、1行で書くような項目はテキストになります。
逆にお問い合わせ内容など複数行になりそうな項目は『テキストエリア』にします。
入力項目については先ほどの共通に書いたとおりで、フォームタイプ名はtext
になります。
メールアドレス
テキストと同じく1行の入力となりますが、メールアドレス以外の書式で入力されるとエラーになります。
フォームタイプ名はemail
で、入力項目は共通で書いたテキストと同じです。
URL
これもテキストと同じく1行の入力となりますが、メールアドレス同様にURL以外の書式で入力されるとエラーになります。
フォームタイプ名はurl
で、入力項目は共通で書いたテキストと同じです。
電話番号
これもテキストと同じく1行の入力となりますが、メールアドレスやURL同様電話番号以外の書式(数字やハイフン以外)が入力されるとエラーになります。
フォームタイプ名はtel
で、入力項目は共通で書いたテキストと同じです。
数値
数値を入力するフォームですが、入力項目はこれまでと変わります。
項目タイプは『スピンボックス』か『スライダー』になります。
また、範囲を指定することで範囲外の数値が入力された時にエラーになります。
『スピンボックス』と『スライダー』はこのようになります。
スライダーは数値が表示されないので分かりにくいと思います。
スピンボックスの方は上下の矢印か、直接数値を入力します。
マイナスの数値も入力できますが、範囲外の場合はエラーが表示されます。
フォームタイプ名はスピンボックスはnumber
で、スライダーはrange
となります。
日付
カレンダーで日付を選択することが出来ます。
範囲を指定することで範囲外の日付は選択不可に出来ます。
こちらは範囲指定なし。
- 年月の下の矢印で年月を選択可能
- 右上の上下の矢印で先月、来月を選択可能
- 日をクリックで日付選択
- 削除クリックで日付削除
- 今日クリックで今日の日付選択
そしてこちらは範囲指定あり(2022年8月20日〜8月31日)
範囲はグレーになってクリック不可になっています。
フォームタイプ名はdate
になります。
テキストエリア
テキストエリアはテキストが複数行になったフォームです。
お問い合わせ内容など1行では収まらないような項目で使います。
フォームタイプ名はtextarea
で、入力項目はテキストと同じです。
ドロップダウンメニュー
ドロップダウンメニューは複数メニューから選択させたい時に使います。
書き方は選択肢をオプションに1行ずつ書きます。
また、表示方法は『通常』『複数選択可能』『空の項目を先頭』を選べます。
複数選択は選択がしにくい気がするので、複数選択の場合は次のチェックボックスにした方がいいかと思います。
フォームタイプ名はselect
です。
チェックボックス
選択項目が複数あり、チェックで選択させたい時に使います。
書き方はドロップダウンメニューと同じで、選択肢をオプションに1行ずつ書きます。
またオプションが3つあり、デフォルトでは『個々の項目をlabel要素で囲む』にチェックが入っています。
オプションは以下になります。
ラベルを前に、チェックボックスを後に配置する
個々の項目を label 要素で囲む
チェックボックスを排他化する
フォームタイプ名はcheckbox
です。
ラジオボタン
選択肢を1つしか選択できないようにしたい場合に使います。
書き方はドロップダウンメニューやチェックボックスと同じで、選択肢をオプションに1行ずつ書きます。
またオプションが2つあり、デフォルトでは『個々の項目をlabel要素で囲む』にチェックが入っています。
2つのオプションはチェックボックスと同じになります。
ラベルを前に、チェックボックスを後に配置する
個々の項目を label 要素で囲む
フォームタイプ名はradio
です。
承諾確認
これは『個人情報の取扱いに同意する』などにチェックを入れるボタンを表示させます。
同意条件には表示させたいテキストを入力します。
チェックボックスはオプションで任意か必須か選択できます。
フォームタイプ名はacceptance
です。
クイズ
クイズに正解しないと送信できないスパム対策になります。
『クイズと回答』にクイズを1つ書けます。
見落としてしまいそうですが、ポイントはパイプ『|』で区切るところです。
不正解だとこのように表示されます。
フォームタイプ名はquiz
です。
ファイル
これはファイルをアップロードしてもらう為のフォームになります。
例えばエントリーフォームであれば履歴書などですね。
ファイルサイズの上限の単位はバイトと書いてあるので1MBの場合は『1048576』となります(空欄の場合は1MBが上限)
ただしMBでも1mbと書けば大丈夫です。
受け入れ可能なファイル形式は『jpg』などになりますが、複数ある場合は『jpg|png』のようにパイプで区切ります。
また、メールタブで受信メール設定を追記します。
ここについては以下の記事で詳しく解説しています。
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
続きを見る
今回は一番下にある『ファイル添付』にファイルの名前を書きます。
ファイルの名前はフォームタブに戻って確認してもいいですし、メールタブの上にも書いてあるのでそれをコピペしてもOKです。
これで添付送信されたファイルを受信することが出来るようになります。
自動返信メール設定にもファイル添付の項目はあるので、必要に応じて追記して下さい(自動返信にファイルはあまり添付しないかと思いますが)
フォーム画面にはこのように表示されます。
ファイルサイズの上限を超えていたり、受け入れ可能なファイル形式以外の場合はこのようにエラーメッセージが表示されます。
フォームタイプ名はfile
です。
送信ボタン
そして最後に送信ボタンです。
設定するのはボタンに表示する名前だけです。
こちらが送信ボタンです。
フォームタイプ名はsubmit
です。
まとめ
今回はContact Form 7のカスタマイズ方法について解説しました。
滅多に使う機会がない項目もあると思いますが、一通り覚えておくとWordPress制作案件でも出来ることと出来ないことが分かるので、作業もしやすくなると思います。
例として今回ご紹介した全ての項目を書くとこのようになります(必須、idやclass名などは未設定)
<label>テキスト
[text your-name] </label>
<label>メールアドレス
[email your-email] </label>
<label>URL
[url your-url] </label>
<label>電話番号
[tel your-tel] </label>
<label>数値(スピンボックス)
[number your-number-spin] </label>
<label>数値(スライダー)
[range your-number-slider] </label>
<label>日付
[date your-date] </label>
<label>テキストエリア
[textarea your-textarea] </label>
<label>ドロップダウンメニュー
[select your-menu include_blank "チワワ" "ミニチュアダックス" "トイプードル"] </label>
チェックボックス
[checkbox your-checkbox use_label_element "チワワ" "ミニチュアダックス" "トイプードル"]
ラジオボタン
[radio your-radio use_label_element default:1 "チワワ" "ミニチュアダックス" "トイプードル"]
<label>承諾確認
[acceptance your-acceptance optional] 個人情報の取扱いに同意する [/acceptance] </label>
<label>クイズ
[quiz your-quiz "神奈川県の県庁所在地は?|横浜市"] </label>
<label>ファイル
[file your-file] </label>
[submit "送信"]
チェックボックスやラジオボタンをlabelタグで囲むとエラーメッセージが出ます(『個々の項目を label 要素で囲む』にチェックを入れているから)
もちろんデザインに合わせる場合はclass名を付けたり、実際にコーディングしたHTMLに合わせて書いて下さい。
そして実際にはこのように表示されます(WordPressデフォルトのテーマ『Twenty Twenty-Two』の場合)
Contact Form 7の関連記事もたくさん書いているので、気になる方は以下から参照下さい。