WordPressのお問い合わせフォーム設置方法【カスタマイズあり】

• WordPressでWebサイトを開設したけど、お問い合わせフォームってどうやって設置すればいいの？
• Contact Form7を使ってお問い合わせフォームを設置したけど、正直ちょっとダサい。。。もう少しかっこいいお問い合わせフォームの作り方を教えて！

こんな疑問にお答えします。

僕はブログ運営歴2年で、現役で Web制作副業をやっているフロントエンドエンジニアでもあります。

この記事では、WordPressへのお問い合わせフォームの設置方法とカスタマイズ方法について画像を使ってわかりやすく解説していきます。

WordPressにお問い合わせフォームを設置するならContact Form7

WordPressにお問い合わせフォームを設置するならContactForm7というプラグインを使うのが簡単で確実です。

以下で手順を解説していきます。

Contact Form7のインストール方法

まずはプラグイン「Contact Form7」をインストールします。

WordPressのメニューの「プラグイン」をクリックします。

プラグインの管理画面が表示されたら、「新規追加」をクリックします。

プラグインの検索窓に「Contact Form」と入力します。

すると、プラグイン一覧の中の一番最初にContact Form7が表示されるので、「今すぐインストール」をクリックします。

インストールが完了したら、「有効化」をクリックします。

以上で、プラグイン「Contact Form 7」のインストールが完了しました。

ContactForm7の設定方法

続いて、Contact Form7を使って実際にお問い合わせフォームを設置していきましょう。

Contact Form7を有効にすると、WordPressのメニューに「お問い合わせ」が追加されるので、これをクリックします。

お問い合わせフォームの管理画面に「コンタクトフォーム1」がすでにあるので、これを利用してお問い合わせフォームを作っていきましょう。

まずは初期設定のままでお問い合わせフォームを作っていきましょう。こちらのショートコードをコピーしておいてください。

コピーができたら、WordPressの「固定ページ」でお問い合わせフォームのページを作成します。

固定ページの管理画面が表示されたら、「新規追加」をクリックします。

タイトルと本文を入力したら、先ほどコピーしたショートコードを本文の下にペーストします。

これでお問い合わせフォームのページが作成できました。
では、続いてメニューにお問い合わせフォームのページへのリンクを追加しましょう。
WordPressのメニューから「外観」ー「メニュー」をクリックします。

追加したいメニューを選択して、先ほど作成した固定ページをメニューに追加します。

これでメニューに固定ページが追加されるので、お問い合わせフォームのページをクリックしてみましょう。

きちんとお問い合わせフォームができています。

でも、正直これじゃあ見た目が味気ないってことで、後でお問い合わせフォームのカスタマイズ方法を解説していきます。

ちなみに、WordPressテーマ「JIN」を使っていてナビゲーションメニューが表示されていないという人は、WordPressメニューの「外観」ー「カスタマイズ」をクリックします。

カスタマイズの項目から「メニュー」をクリックします。

メニューの位置の「すべての位置を表示」をクリックします。

この中の「グローバルナビゲーション」から先ほど設定したメニューを選択して「公開」をクリックすると、グローバルナビゲーションメニューが表示されます。

Contact Form7の設定方法

以上で、お問い合わせフォームからちゃんとメールが送られるようになったはずですが、初期設定のまま使っていたContact Form7の設定を変更していきましょう。

自動返信メールの設定

Contact Form7ではお問い合わせフォームが送信されたときに、入力されたメール宛に自動返信メールを送ることができます。
以下では、その設定方法を解説します。

では、まずお問い合わせフォームの管理画面からコンタクトフォーム1をクリックします。

続いて、編集ページで、「メール」タブをクリックします。

「メール(2)を使用」にチェックを入れて、「保存」をクリックします。

以上で自動返信メールの設定が完了です。
自動返信メールの内容を変えたいときは、メール(2)のメッセージ本文に文章を追加してください。

お問い合わせフォームの項目の追加

お問い合わせフォームの管理画面からコンタクトフォーム1をクリックします。

お問い合わせフォームの項目を追加したい場合は、こちらの画面から編集します。今回は例として、電話番号を追加したいと思います。

追加したいところにスペースを作っておいて、上のボタンから「電話番号」をクリックします。

こんな画面が表示されるので、入力を必須とする場合は一番上の「必須項目」にチェックを入れて「タグを挿入」をクリックします。

すると、タグが挿入されます。

このままではラベルが表示されないので、他の項目と同じようにラベルを設定して「保存」をクリックします。

お問い合わせフォームのページを見てみると、電話番号の項目が追加されていることが確認できます。

ちなみに、WordPressテーマ「JIN」の場合は、電話番号フォームのスタイルが定義されていないようで、他と見た目が違っていますね。
以下を「追加CSS」に追加すると、他の項目と同じ見た目にできます。追加CSSの設定方法は次の項目で説明します。

/ *お問い合わせフォームのカスタマイズ */
.wpcf7-form-control-wrap input[type="tel"] {
    box-sizing: border-box;
    width: 100%;
    border-radius: 2px;
    border: 1px solid #ccc;
    padding: 7px 10px;
    font-size: 1em;
    margin-bottom: -10px !important;
    -webkit-appearance: none;
}

お問い合わせフォームのカスタマイズ方法

お問い合わせフォームの見た目をかっこよくしたいという人は、お問い合わせフォームをカスタマイズしましょう。

といっても、自分好みにカスタマイズするためにはHTMLとCSSの知識が必要になるので、僕のブログのお問い合わせフォームをコピペで使うための手順を紹介します。

ちなみに、僕のブログのお問い合わせフォームはこんな感じです。

スマホで見たときは、こんな感じ。

では、まずはContact Form7の設定からで、お問い合わせフォームの管理画面からコンタクトフォーム1をクリックします。

フォームに以下のコードをコピペして、「保存」をクリックします。

<table class="contact-form">
  <tr>
    <td class="left name">お名前</td>
    <td class="right name">[text* your-name]</td>
  </tr>
  <tr>
    <td class="left email">メールアドレス</td>
    <td class="right email">[email* your-email]</td>
  </tr>
  <tr>
    <td class="left title">タイトル</td>
    <td class="right title">[text your-subject]</td>
  </tr>
  <tr>
    <td class="left message">メッセージ</td>
    <td class="right">[textarea your-message]</td>
  </tr>
  <tr>
    <td colspan="2">[submit "送 信"]</td>
  </tr>
</table>

WordPressメニューの「外観」ー「カスタマイズ」をクリックします。

メニューの中から「追加CSS」をクリックします。

こちらに以下のコードをコピペして、「公開」をクリックします。

/*お問い合わせフォームのカスタマイズ*/
.wpcf7 {
    margin: 0 !important;
    background-color: #fff;
    width: 100%;
}
.contact-form .left {
    vertical-align: top !important;
    position: relative;
    padding-left: 4em;
}
.contact-form .left::before {
    position: absolute;
    top: 22px;
    left: 5px;
    padding: 0 10px;
    color: #fff;
    font-size: 0.8rem;
}
.contact-form .left.name::before,
.contact-form .left.email::before {
    content: "必須";
    background-color: red;
}
.contact-form .left.title::before,
.contact-form .left.message::before {
    content: "任意";
    background-color: #ccc;
}
.contact-form,
.contact-form td {
    border: none !important;
}
.contact-form td {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.contact-form .right {
    text-align: left;
}
.contact-form .name,
.contact-form .email,
.contact-form .title {
    border-bottom: 1px dashed #ccc !important;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
    width: 80% !important;
}
.contact-form input[type="submit"] {
    border: 2px solid #7fd9d2; /* アクセントカラーを設定 */
    background-color: #7fd9d2; /* アクセントカラーを設定 */
}
.contact-form input[type="submit"]:hover {
    border: 2px solid #7fd9d2; /* アクセントカラーを設定 */
    background-color: #fff;
    color: #7fd9d2;
}
@media (max-width:480px) {
    .contact-form td {
        display: block;
    }
    .contact-form .name,
    .contact-form .email,
    .contact-form .title {
        border-bottom: none !important;
    }
    .contact-form .left {
        padding-top: 20px !important;
        padding-bottom: 0 !important;
    }
    .contact-form .right {
        padding: 8px !important;
    }
    .contact-form input[type="text"],
    .contact-form input[type="email"] {
        width: 100% !important;
    }
}

子テーマを使える人は、追加CSSじゃなくて、子テーマのCSSにコピーして使ってもOKです。

まとめ：WordPressブログにお問い合わせフォームを設置する方法

以上、WordPressへのお問い合わせフォームの設置方法とカスタマイズ方法について解説しました。

ブログを自由自在にカスタマイズしたいと思った人は、HTMLとCSSなどについて勉強するといいですよ。

ではでは〜！

ABOUT ME

トモヤ

副業が趣味になってしまったサラリーマンが趣味を語るブログ。 『Web制作』と『ブログ運営』に取り組んでいます。 【経歴】大阪大学大学院工学研究科卒業→某インフラ会社勤務→会社依存の生活を変えるため副業開始