📝 本記事にはアフィリエイトリンクが含まれています。
要約
この記事では、WordPress でお問い合わせフォームを簡単に設置できる「Contact Form 7」の導入手順と、最低限のカスタマイズ方法を紹介します。
初めてでも迷わず設定できるよう、スクリーンショット付きで丁寧に解説しています。
📖 関連記事: WordPress の初期設定はこちらの記事で詳しく解説しています
【初心者向け】WordPress初期設定まとめ｜ブログを始めたら最初にやるべき7ステップ
WordPressブログを開設したら最初にやるべき初期設定7つをスクリーンショット付きで解説。パーマリンク・一般設定・表示設定・コメント・プラグイン・テーマ・セキュリティを初心者向けに網羅。これからブログを始めるならConoHa WINGのキャンペーン（〜3/9）がお得です。
まだWordPressブログを持っていない方はこちら
はじめに
「ブログにお問い合わせフォームを設置したいけど、どうやってやるの？」って思ったことありませんか？
僕も最初は手探りでフォームを作ったんですが、Contact Form 7 を使えば超簡単！
今回はその導入方法と、最低限やっておきたいカスタマイズも紹介していきます！
- WordPress で超定番の問い合わせフォームプラグイン
- ショートコードで簡単に設置可能
- シンプルな UI と高いカスタマイズ性
プラグインのインストールと有効化
1
管理画面からプラグインを検索
WordPress 管理画面から「プラグイン > 新規追加」へ進み、「Contact Form 7」で検索します。
2
インストール＆有効化
検索結果からプラグインを見つけたら、「今すぐインストール」→「有効化」をクリックします。
Contact Form 7をインストールして有効化
フォームの作成と設置
1
コンタクトフォームを開く
管理画面左の「お問い合わせ」から「コンタクトフォーム」を開きます。
「お問い合わせ」→「コンタクトフォーム」を開く
2
フォーム内容を確認・編集
初期フォームを確認して、必要なら編集します。
フォームの名前を変更
ショートコードのタイトルが反映されていることを確認
3
ショートコードを貼り付け
表示したいページや記事にショートコードを貼り付けます。
[contact-form-7 id="123" title="お問い合わせ"]
固定ページにショートコードを貼り付け
お問い合わせフォームが表示された状態
最低限やっておきたいカスタマイズ
メールの送信内容を調整する
「メール」タブから以下を編集できます：
- 送信先 → 宛先メールアドレス
- 題名 → 件名
- メッセージ本文 → メール本文（送信される情報のフォーマット）
必要に応じて、送信内容に補足テキストを加えても OK です。
「メール」タブで送信先・件名・本文を編集
エラーメッセージの文言をわかりやすく変更する
送信エラーや必須項目の未入力時に表示されるメッセージは、「メッセージ」タブから編集できます。
たとえば：
- 「必須項目です。」→「この項目は入力が必要です。」
- 「メッセージの送信に失敗しました。」→「うまく送信できませんでした。しばらくしてからお試しください。」
読者にやさしい言葉にするだけでも、安心感がアップします。
「メッセージ」タブでエラー文言を編集
ボタンの文言を変更する
フォームの送信ボタンは、フォーム編集画面の以下の部分で自由に変えられます。
[submit "送信"]
この "送信" を、例えば以下のように変更すると印象が変わります。
[submit "お問い合わせを送信する"]
内容に合わせてボタンのラベルを変えると、より親切なフォームになります。
フォーム編集画面で送信ボタンの文言を変更
変更後のボタン文言を確認
デザインを整える（CSS カスタマイズ）
「このままだとちょっと地味…」と感じたら、CSS で見た目を調整してみましょう！
以下は送信ボタンのデザイン例です：
.wpcf7 input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
}
Cocoon の場合は「外観 > カスタマイズ > 追加 CSS」に貼り付けるだけで反映されます。
1
”外観
WordPress管理画面のサイドバーから「外観 > カスタマイズ」へ進みます。
”「外観」→「カスタマイズ」をクリック”
2
追加CSSをクリック
カスタマイズ画面の下の方にある「追加CSS」を開きます。
「追加CSS」を開く
3
CSSを記入して公開
上記のCSSコードを貼り付けて「公開」をクリックします。
CSSを貼り付けて「公開」をクリック
Before
CSS適用前のボタン
After
CSS適用後のボタン
まとめ
Contact Form 7 は、設置もカスタマイズも簡単で、本当に便利なプラグインです！
実際に使ってみて「これなら自分にもできそう！」って感じられたなら大成功ですね。
うん、これだけでも十分だけど、実はもっと便利にできるんだよ！
Contact Form 7 にはファイル添付やサンクスページへのリダイレクトなど、さらに便利な機能もあります。詳しくは以下の関連記事をチェックしてみてください！
📖 関連記事: サイトを公開する前に試してみたい方は、ローカル環境での動作確認もおすすめです
【Local】WordPressのローカル環境を簡単構築｜テーマやプラグインを安全にカスタマイズ！
無料ツール「Local」を使ってWordPressのローカル環境を構築する方法をスクリーンショット付きで解説。インストールからサイト作成、SSL設定、日本語化まで初心者でもこの記事だけで完了します。本番サイトを壊さず安心してカスタマイズを試せます。
ConoHa WING なら初心者でもかんたんに始められるから安心だよ！
WordPressブログを始めるなら
初心者でもかんたんにブログ開設できます
関連記事
【初心者向け】ConoHa WINGでWordPressブログを最短で始める手順ガイド
ConoHa WINGの契約からWordPressインストールまでをスクショ付きで徹底解説。スタート応援キャンペーン実施中（〜3/9）、ベーシック12ヶ月が月額971円・初回一括11,652円で始められます。独自ドメイン永久無料・SSL・バックアップ込み。
Contact Form7でファイル添付を実装！画像・PDF・複数アップロードまで一気に解説
Contact Form 7でファイル添付機能を実装する方法をスクリーンショット付きで解説。画像やPDFのアップロード設定、サイズ・拡張子の制限、複数ファイル対応、メールへの添付方法、サーバー上限の調整まで。セキュリティ対策やコピペOKの実例テンプレートも紹介します。
Contact Form 7で送信完了後にサンクスページへ自動リダイレクトする方法【Cocoon対応】
Contact Form 7で送信完了後にサンクスページへ自動リダイレクトする方法をCocoon向けに解説。JavaScriptとCSSをHTMLブロックに貼り付けるだけの簡単実装。完了メッセージの枠が残る問題の解決方法や、複数フォーム対応のコード例も紹介します。
【初心者向け】WordPressおすすめプラグイン10選｜ブログ運営に必須！
WordPress初心者におすすめのプラグイン10選をスクリーンショット付きで紹介。お問い合わせフォーム・SEO対策・画像圧縮・セキュリティ・バックアップなど、ブログ運営に必須のプラグインを厳選。Cocoonとの機能重複も一覧表で解説しています。
【初心者向け】WordPress初期設定まとめ｜ブログを始めたら最初にやるべき7ステップ
WordPressブログを開設したら最初にやるべき初期設定7つをスクリーンショット付きで解説。パーマリンク・一般設定・表示設定・コメント・プラグイン・テーマ・セキュリティを初心者向けに網羅。これからブログを始めるならConoHa WINGのキャンペーン（〜3/9）がお得です。
コメント