コンタクト フォーム 7 カスタマイズで検索してたどり着く先は、たいていCSSのコピペ集か、項目を追加するタグの一覧です。そこを直せば見た目は整います。ただ、受付を担当している人が実際に困っているのは見た目ではなく、届いた問い合わせに返し切れないことのほうです。この記事では、項目を足す前に決めておくべきことと、カスタマイズで直せる範囲、カスタマイズでは直らない範囲を切り分けて並べます。
コンタクトフォーム7のカスタマイズが見た目だけで終わらない理由
Contact Form 7はWordPress向けのフォームプラグインで、2026年9月時点の公開情報ではバージョン6.1.7、有効インストール数は1,000万以上、69言語に翻訳されています。作者はRock Lobster Inc.で、プラグインの設定画面だけで項目の追加、必須指定、メールの送信先変更までができます。この手軽さが広く使われている理由であり、まずはこのままで足りる現場が多いことも事実です。
問題が出るのは、届く件数が増えたあとです。窓口の担当者からしばしば出るのは、フォームの見た目は整っているのに、誰がどれに返したのかが分からなくなるという話です。カスタマイズの相談として持ち込まれるものの多くは、実際には次の3つに分かれます。
- 入力してもらう内容を変えたい（項目の追加、選択肢の変更、ファイル添付）
- 見た目を整えたい（枠線、余白、ボタンの色、スマートフォンでの崩れ）
- 送信されたあとの扱いを変えたい（保存、担当の割り振り、返信の記録、二重返信の防止）
1と2はContact Form 7の設定とCSSでほぼ片づきます。3だけは性質が違います。ここで大事なのは、プラグインの公式な説明そのものに答えが書かれている点です。
このプラグインは、デフォルト設定で使用する場合においては、以下に挙げる動作を行いません: こっそりとユーザーを追跡する。ユーザーの個人データをデータベースに書き出す。外部のサーバーにデータを送る。クッキーを利用する。 出典: ja.wordpress.org
これは設計上の美点として書かれている説明です。個人データをサイトのデータベースに残さないので、情報の持ち方としては軽くなります。その代わり、送信された内容はメールにしか残りません。2人以上で受付を回している場合、記録がメールにしかないという前提は、そのまま運用の上限になります。カスタマイズでどこまで直すのかを決めるとき、まずこの前提を認識しているかどうかで判断が変わります。
標準機能で項目を足す｜タグの種類と、足す前に決める3つのこと
Contact Form 7の項目追加は、フォーム編集画面の上にあるタグ生成ボタンから行います。用意されているのはテキスト1行、メールアドレス、電話番号、数値、日付、複数行テキスト、ドロップダウン、チェックボックス、ラジオボタン、承諾確認、クイズ、ファイル、送信ボタンなどです。生成されたタグを本文の好きな位置に貼り、対応する項目名をメール本文のテンプレートにも書き足す、という2段構えになっています。この2段目を忘れると、入力はされているのに通知メールに載らないという事故が起きます。項目を1つ足したら、必ずメールタブも開いて差し込みを追加する、と手順として固定してしまうのが確実です。
項目を足す作業そのものは数分で終わります。むしろ時間をかける価値があるのは、足す前の3つの決めごとです。
1つ目は、その項目を後で並べ替えたり絞り込んだりするかどうか。 自由記述で受け取った内容は、あとから分類できません。応募の職種、希望日、都道府県のように、受付後に振り分けの軸になるものはドロップダウンかラジオボタンにします。逆に、集計しないものを選択式にすると、選択肢の保守が仕事として増えます。
2つ目は、必須にするかどうか。 必須項目を増やすと入力の途中でやめる人が出ます。採用の応募受付のように、途中でやめられると機会そのものが消える窓口では、必須は本当に返信に必要なものだけに絞るのが基本です。実際の受付の型ごとに、どこまで聞くのが妥当かは変わります。採用、助成金の公募、施設の利用申請といった場面別の受け方は問い合わせの受付のページに整理されているので、自分の窓口に近い型を先に見ておくと項目設計の当たりが付きます。
3つ目は、個人情報をどこまで受け取るかです。 生年月日、住所、家族構成のように、返信に不要なものまで集めると、保管と削除の責任だけが増えます。取得する項目と利用目的の対応は、フォームの近くに書いておくのが安全です。ここは法律の解釈が絡むため、判断が必要な範囲については所管の窓口や専門家に確かめてください。基本的な考え方は個人情報保護委員会の案内が入口になります。
ファイル添付を足す場合は、受け取れる拡張子とサイズの上限をタグの属性で指定できます。ただし実際の上限はサーバー側の設定にも縛られます。履歴書や見積書を受け取る窓口では、送信できたつもりで届いていない、という形の取りこぼしが起きやすいので、テストは実際に大きめのファイルで行っておきます。
CSSで見た目を整える手順と、効かなくなる場所
見た目のカスタマイズは、Contact Form 7が出力するclassに対してCSSを当てる形で行います。フォーム全体はwpcf7、入力欄はwpcf7-form-control、必須の入力欄はwpcf7-validates-as-required、エラー文はwpcf7-not-valid-tip、送信後の応答文はwpcf7-response-outputといったclassが付きます。CSSの置き場所は、テーマの追加CSS欄か、子テーマのスタイルシートです。親テーマのファイルを直接書き換えると、テーマの更新で消えます。
さきほどのサンプルフォームを使って、実際にフォームのデザインをカスタマイズするCSSスタイルを紹介していきます。 出典: form.run
コピペで当てられるCSSは世の中に大量にありますが、当てる前に確かめておくと手戻りが減る点が3つあります。
/* 入力欄を横幅いっぱいに広げ、指で押せる高さにする */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
box-sizing: border-box;
padding: 12px;
font-size: 16px;
}
1つ目は文字サイズです。入力欄の文字を16px未満にすると、iPhoneのSafariでは入力欄を押した瞬間に画面が拡大します。拡大したまま次の項目に進むと、送信ボタンが画面の外に出て、そこで離脱が起きます。見た目を小さく整えたい気持ちは分かりますが、入力欄だけは16px以上にしておきます。
2つ目は横幅の指定です。width: 100%だけを指定してbox-sizing: border-boxを書き忘れると、paddingの分だけ枠が親要素からはみ出します。スマートフォンで横スクロールが出るフォームは、この書き忘れがほとんどです。
3つ目は、CSSが効かない場所があることです。ブロックエディタでフォームを貼った場合、テーマ側のブロック用スタイルが後から当たって上書きされることがあります。効かないときは、ブラウザの検証画面で実際に当たっているセレクタを見て、必要なら親のclassを足して詳細度を上げます。!importantで押し切るのは最後の手段にしておくと、あとで別の調整を足すときに詰まりません。
なお、送信中に出る回転表示や、送信後にオレンジ色の枠で出る応答文もwpcf7-spinnerやwpcf7-response-outputで調整できます。ただし、エラー文そのものの色や枠を消してしまうと、入力の不備に気づかないまま離れる人が増えます。見た目を静かにするのと、伝わらなくするのは別です。
メールのカスタマイズ｜届かない、二重に届く、返信先が違う
Contact Form 7のメールタブでは、宛先、送信元、題名、追加ヘッダー、本文を編集できます。ここで起きる問題は見た目の話と違い、気づきにくい形で損失になります。
届かない。 送信元にサイトのドメインと無関係なアドレスを入れると、受信側で迷惑メール扱いになる確率が上がります。送信元はサイトのドメインのアドレスにして、実際の担当者のアドレスは返信先ヘッダー側に書くのが基本の形です。それでも届かない場合は、サーバーのメール送信機能ではなく外部のメール配信経路を使う設定に切り替える、という対処が取られます。
返信先が違う。 追加ヘッダー欄にReply-To: [your-email]を書いておかないと、通知メールに返信したときの宛先が自分たちのアドレスになります。受付の窓口で最も多い取りこぼしの1つがこれです。通知が来たのでそのまま返信したつもりが、社内に返っていた、という形で数日が消えます。
二重に届く。 メール(2)を有効にすると自動返信が送れますが、宛先の設定を間違えると自分たちに2通届き、送信者には届きません。自動返信を足したら、必ず外部のアドレスから実際に送信してテストします。テスト用のアドレスは、社内のものではなく受信を確認できる外部のものを使います。
メールだけが記録になっている。 ここが最も根深い点です。返信したかどうかがメールソフトの中にしかないと、2人以上で受けている窓口では二重返信と返し忘れが必ず起きます。受信箱で既読にしたかどうかは、隣の担当者には見えません。ラベルやフォルダで代用している現場もありますが、ラベルは付け忘れても誰も止めてくれません。
対処としてよく取られるのが、通知の宛先を共有メールボックスにして、件名に受付の種類を入れて振り分けるやり方です。これは件数が少ないうちは回ります。目安として、1日に届く件数が10件を超えたあたりから、件名の振り分けだけでは追えなくなると言われています。返信の有無を人の記憶ではなく画面に残す仕組みが必要になるのは、この線を越えたときです。
確認画面とサンクスページ｜プラグインを足すか、遷移先を変えるか
Contact Form 7には、標準の機能として入力内容の確認画面がありません。送信ボタンを押すとその場で送信され、同じページ内に応答文が出ます。確認画面を求められる理由は主に2つで、入力の間違いを本人に気づかせたいという運用上の理由と、社内の決めごととして確認画面を必須にしているという理由です。
確認画面を足す方法は、確認画面を追加する拡張プラグインを入れる、というのが一般的です。ただしプラグインを足すという判断には、継続的な保守が付いてきます。WordPress本体とContact Form 7本体はどちらも更新が続いており、拡張側の更新が止まると、ある日の更新で確認画面だけが動かなくなります。更新が止まっている拡張かどうかは、公開ページの最終更新日と対応バージョンの記載で判断できます。ここは入れる前に見ておく価値があります。
サンクスページへの遷移は、送信完了時に別のページへ移動させる形で実現します。プラグインを追加せずに、フォームのあるページにスクリプトを1つ置いてwpcf7mailsentというイベントを拾い、完了時に指定のURLへ移動させるやり方が広く使われています。サンクスページを分けておくと、広告や解析の側で「送信まで到達した人」を数えられるようになるので、受付の改善を数で見たいときには意味があります。
ただし、遷移させると同じページ内の応答文は見えなくなります。送信に失敗したときだけ元のページに応答文が出る、という挙動になるため、失敗時の文面は必ず残しておきます。
もう1つ、確認画面とサンクスページの前に検討してよいことがあります。確認画面が必要とされる背景には、入力の間違いが多いという事情があるはずです。間違いが多いのは、項目が多すぎるか、何を書けばよいのかが分からないかのどちらかです。項目の説明文を1行足すほうが、確認画面を足すより効く場面は少なくありません。受付の型ごとに何をどう聞くかの例は採用の応募受付のページで場面別に並べられているので、自分の窓口の項目が多すぎないかを見比べる材料になります。
送信されたあとをカスタマイズする｜保存と担当と状況
送信された内容をサイト側に残したい場合、Contact Form 7と同じ作者が公開している保存用のプラグインを追加するのが定番の手です。公式の説明は次の通りです。
Flamingo は、元々は Contact Form 7 (単体では送信されたメッセージを保存する機能を持ちません) のために作成されたメッセージ保存プラグインです。 出典: ja.wordpress.org
これを入れると、管理画面に送信内容の一覧が増え、検索もできるようになります。メールサーバーの不調で通知が飛ばなかった場合でも、内容そのものは残ります。受付を回す立場からすると、これは足す価値が高いカスタマイズです。
一方で、ここで止まることも知っておく必要があります。保存用のプラグインの有効インストール数は2026年9月時点で80万以上です。Contact Form 7本体が1,000万以上なので、比率にすると8%程度にとどまります。つまり、Contact Form 7を使っているサイトの大半は、送信内容をサイト側に残さない状態で運用していることになります。この数字は、受付の記録がメールにしかない現場がいかに多いかを示しています。
保存ができたあと、受付の運用には続きがあります。
・誰が担当するのかを1件ごとに決める ・返信したかどうか、保留なのか完了なのかを1件ごとに持つ ・同じ相手からの2回目の連絡を、1回目と繋げて見る ・担当が休んだ日に、別の人が状況を見て引き取れる
この4つは、保存の一覧があるだけでは埋まりません。公開資料で確認できる範囲では、保存用のプラグインは内容の保存と検索を担うもので、担当や状況を1件ごとに持つ機能についての記載は見当たりません。ここを埋める方向でのカスタマイズは、独自に管理画面を作るか、送信されたあとを扱う前提で作られた道具に受付そのものを移すかの二択になります。
迷惑メールと機械からの送信を止めるカスタマイズ
問い合わせフォームを公開して数週間すると、機械からの送信が届き始めます。英語の宣伝文だけが入ったもの、リンクだけが並んだもの、同じ内容が数分おきに何十通も届くものが典型です。受付の担当者からすると、これは単にうるさいという話では済みません。本当の問い合わせが機械からの送信に埋もれると、返し忘れが起きます。1日に20通届く受付で、そのうち15通が機械からのものになると、残りの5通を探す作業が毎日発生します。
Contact Form 7が連携先として公開しているのは、reCAPTCHA、Akismet、Constant Contact、Brevo、Stripe、Turnstileです。このうち機械からの送信を止める目的で使われるのは前の2つと最後の1つです。reCAPTCHAとTurnstileは、送信の前に人かどうかを判定する仕組みで、それぞれGoogleとCloudflareが提供しています。Akismetは送信された内容を判定して振り分ける仕組みで、Automatticが提供しています。判定のしかたが違うので、片方だけでは抜けることがあります。
ここで注意が必要なのは、これらを有効にすると送信者の情報が外部の事業者に渡る点です。公式の説明でも、特定の機能を有効化している場合は送信者のIPアドレスを含む個人データがサービス提供者に送信される可能性があると書かれています。採用の応募や会員の入会申し込みのように、個人情報を多く受け取る窓口では、プライバシーポリシーへの記載と合わせて確認しておく必要があります。判断に迷う範囲は所管の窓口や専門家に確かめてください。
判定を入れたあとに必ずやることが1つあります。実際に自分で送信して、通ることを確かめる作業です。判定を厳しくしすぎると、正規の問い合わせまで止まります。しかも止まったことは送信者にしか見えないため、こちら側では何も起きていないように見えます。問い合わせが急に減ったという相談の原因が、この設定だったという話は珍しくありません。設定を変えた日付は、どこかに書き残しておきます。
もう1つ、項目を増やして機械からの送信を減らす手もあります。日本語でしか答えられない質問を1問足す、選択式の項目を1つ増やす、といった方法です。ただしこれは回答者の手間を増やす方向なので、機械からの送信が実害になっている場合に限って使います。
スマートフォンでの見え方を確かめる順序
問い合わせフォームに来る人の多くはスマートフォンからです。パソコンの画面で整えたフォームが、スマートフォンでは別物になっていることがあります。確かめる順序を決めておくと、毎回同じ抜けを踏まなくなります。
最初に見るのは、横スクロールが出ていないかです。入力欄の幅指定でbox-sizingを書き忘れていると、枠が画面の外にはみ出します。指で横に動かせてしまうフォームは、入力の途中で位置を見失う原因になります。
次に、入力欄を1つずつ押して、画面が拡大しないかを見ます。文字サイズが16px未満の入力欄は、押した瞬間に拡大します。拡大したままだと送信ボタンが画面の外に出て、押せないと思われて離脱します。
3つ目は、キーボードの種類です。電話番号の項目に電話番号用のタグを使っていれば数字のキーボードが出ます。1行テキストのタグで受け取っていると、文字入力のキーボードが出て、数字を打つのにひと手間かかります。メールアドレスも同じで、専用のタグを使えばアットマークが打ちやすい配列になります。地味ですが、ここで入力をやめる人は確実に存在します。
4つ目は、エラーが出たときの見え方です。項目の下に赤い文字が出る形が標準ですが、画面が狭いと、エラーが出た項目が画面の外にあって気づかないことがあります。送信ボタンを押したのに何も起きないように見える、という状態です。応答文の色や枠をCSSで消してしまっている場合は、この問題が起きやすくなります。
5つ目は、送信後に何が起きるかです。同じページ内に応答文が出る形なら、その応答文が画面の見える範囲に来るかを確かめます。サンクスページへ移動させる形なら、移動先のページがスマートフォンで崩れていないかを見ます。送信までうまく運んだのに、最後の画面で不安にさせると、同じ内容がもう一度送られてきます。二重の問い合わせは、受付側では別件として数えられるので、そのぶん確認の手間が増えます。
確かめる作業は、実機で行うのが確実です。パソコンのブラウザで画面幅を狭めた表示は便利ですが、キーボードの種類と拡大の挙動は再現されません。受付を担当している人が自分の端末で1度通してみる、という手順を公開前に入れておきます。
プラグインを足すか、受付そのものを乗り換えるかの比較軸
カスタマイズを積み上げる道と、受付の道具を変える道のどちらを選ぶかは、好みの問題ではなく条件で決まります。判断の軸になるのは次の4つです。
1つ目は、受ける人数です。 1人で受けているなら、メールと保存用プラグインで足ります。2人以上、あるいは担当が交代する窓口では、担当と状況を持てるかどうかが効いてきます。
2つ目は、月に届く件数です。 月に数十件なら、件名での振り分けで追えます。数百件になると、返信済みかどうかを目で確認する作業だけで時間が溶けます。
3つ目は、保守を誰が担うかです。 プラグインを3つ4つ足した構成は、足した時点では動きます。半年後にWordPress本体が更新されたとき、どのプラグインが原因で止まったのかを切り分けられる人が社内にいるかどうかで、話が変わります。制作会社に都度依頼する形だと、更新のたびに費用と待ち時間が発生します。
4つ目は、回答者側の手間です。 フォームの入力にアカウント登録を求めると、そこで応募や問い合わせをやめる人が出ます。乗り換え先を検討するときは、回答者にログインを求めない形で使えるかどうかを必ず確かめます。
比較の材料としては、いま使っている道具と候補を同じ軸で並べるのがいちばん早いです。WordPressに埋め込む形のフォームと、外部のフォームで受けて管理画面で回す形の違いはContact Form 7との比較に軸ごとに整理されています。無料で始められる手軽さから比較するなら、表計算ソフトに回答が流れる形との違いをまとめたGoogleフォームとの比較も同じ並びで読めます。
それぞれの道具で何ができるのかを機能単位で確かめたい場合はできることを、実際の画面で受付の流れを見たい場合は動くところを見るを先に見ておくと、社内で説明するときの材料になります。費用の比較に入る段階なら料金の考え方も並べて見ます。乗り換えの判断は、機能の数ではなく、送信されたあとの道具がそろっているかどうかで見るのが実務的です。
受付の詰まりを数で見る
カスタマイズの相談が集まる先を並べると、受付の詰まりがどこにあるのかが見えてきます。Contact Form 7のカスタマイズとして検索される内容は、CSS、項目追加、確認画面、サンクスページ、メールが届かない、送信データの管理の6つにほぼ収まります。このうち前半4つはフォームの手前の話で、後半2つだけが送信されたあとの話です。
検索の量では前半のほうが多いのに、受付の担当者が実際に時間を失っているのは後半です。この食い違いには理由があります。前半は自分で調べれば直せるので検索されます。後半は、調べても「プラグインを入れる」までしか出てこないので、検索をやめて手作業で耐える方向に行きます。表計算ソフトに転記して色を塗る、件名にラベルを付ける、返信済みの人の名前を付箋に書く、といった方法がそれです。
受付の型を場面別に並べると、詰まりやすい順序も見えます。助成金の公募や講座の申し込みのように締切のある受付では、締切直前に件数が集中するため、1日で処理できる量を超えます。修理やサポートの受付のように継続的に届くものでは、同じ相手からの2回目以降の連絡を前回と繋げられるかが効きます。会員の入会申し込みのように名簿になるものでは、受け取った内容がそのまま台帳になるかどうかで後工程の手間が変わります。どの型でも共通しているのは、フォームの見た目を整えても、この部分は1分も短くならないという点です。
自分の窓口がどの型に近いのかを決めたら、次に決めるのは1つだけです。返信したかどうかを、人の記憶ではなくどこに残すか。ここを決めてから、CSSと項目追加に戻ります。順番を逆にすると、整った見た目のフォームから、追い切れない量の問い合わせが届くようになります。
Q1. コンタクトフォーム7のカスタマイズはCSSだけでどこまでできますか？
入力欄の幅や余白、枠線、ボタンの色、エラー文の見え方まではCSSで整えられます。入力欄の文字は16px以上にしておくと、iPhoneで押した瞬間に画面が拡大する現象を防げます。一方、確認画面の追加や送信内容の保存はCSSでは実現できず、設定やプラグインの追加が必要です。
Q2. 項目を追加したのに通知メールに載らないのはなぜですか？
フォーム編集画面でタグを足しただけでは通知に反映されません。メールタブの本文テンプレートにも、追加した項目名の差し込みを書き足す必要があります。項目を1つ足したら必ずメールタブも開く、と手順として固定しておくと取りこぼしが防げます。
Q3. 送信された内容をサイト側に残すにはどうしますか？
Contact Form 7は標準設定では送信内容をデータベースに保存しないため、同じ作者が公開している保存用プラグインを追加するのが定番です。これで管理画面に一覧と検索が増えます。ただし担当や返信状況を1件ごとに持つ用途までは、公開資料で確認できる範囲では別の手立てが必要です。
Q4. プラグインを足すのと受付の道具を変えるのは、どちらを選ぶべきですか？
受ける人数、月の件数、保守を誰が担うか、回答者の手間の4つで決まります。1人で月に数十件なら足す側で足ります。2人以上で交代しながら受けていて、返信済みかどうかを目で確認する作業に時間が溶けているなら、送信後を扱う前提の道具に移すほうが早く収まります。