【WordPress】簡単にお問い合わせページを作る方法を解説

サイトやブログを運営する上で、お問い合わせページは必須ですよね。

当サイトでも、お問い合わせフォームを設けています。

ということで、今回はWordPressでお問い合わせフォームを作る方法をご紹介します。

orたん

絶対に作っておいたほうがいいですよ！

お問い合わせページを作る手順

カスタマイズほど難しくありません。パパッと終わらせて記事を書くことに集中しましょう！

固定ページを新規作成する

まずは、お問い合わせフォームのページを作りましょう。固定ページを作成します。

完成したら、何も書かずに下書きを保存しましょう。まだ公開はしません。

プラグインのダウンロード

今回は、Contact Form 7を使用しお問い合わせページを作成します。

日本の方が作成されたプラグインで、日本語に対応しています。

まずはContact Form 7をダウンロードしましょう。

ダッシュボード→プラグイン→新規追加→Contact Form 7を検索→ダウンロード&有効化

有効化ができたら、すぐに使えるような状態になりますが、少し手を加えます。

reCAPTCHAを導入しよう

BOTなどによるいたずらを防ぐために、reCAPTCHA(リキャプチャ)というものを導入します。Googleが提供するサービスです。

では、実際に設定していきましょう。
導入する手順

はじめにこのような画面になります。

インテグレーションのセットアップを行いましょう。

次に、2つのキーを取得する必要があります。reCAPTCHAの公式サイトへ行きましょう。

アクセスできたら、Admin Consoleを押します。

ログインしていない場合には、Googleアカウントにログインします。

まず+ボタンを押します。すると以下のような画面になります。

バージョンはv3を選択します。画像を選んだりする必要はなく、自動的にBOTかどうかを見極めます。必要事項を記入すればすぐに使えます。

次に、設定ボタンを押します。

すると、サイトキーとシークレットキーが表示されます。先程の画面に貼り付けましょう。

そうすれば、サイト全体にreCAPTCHAが読み込まれ、右下に表示が出ているはずです。

お問い合わせフォーム本体を作る

まず、タイトルを入力します。公開はされないので、分かりやすいものにしておきましょう。

次に、フォームのテンプレートを編集します。

<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 題名
[text your-subject] </label>
<label> メッセージ本文
[textarea your-message] </label>
[submit "送信"]

これで大丈夫なのですが、入力してもらう項目全てを必須にしてみるとこうなります。

<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 題名 (必須)
[text* your-subject] </label>
<label> メッセージ本文 (必須)
[textarea* your-message] </label>
[submit "送信"]

SANGOで送信ボタンのデザインを変える方法

初期状態では、何の装飾も施されていないボタンです。そこで送信ボタンを以下のように書き換えます。

[submit "送信"]

[submit class:raised class:blue-bc "送信"]

そして、まとめたのがこちらです。

<label> お名前 (必須)
[text* your-name] </label>
<label> メールアドレス (必須)
[email* your-email] </label>
<label> 題名 (必須)
[text* your-subject] </label>
<label> メッセージ本文 (必須)
[textarea* your-message] </label>
[submit class:raised class:blue-bc "送信"]

お問い合わせページにフォームを置く

コンタクトフォームを作成し終わると、以下のようなショートカットコードが発行されます。

{contact-form-7 id="0000" title="タイトル"}

こちらを、先程作成した固定ページに貼り付けます。

ただ、貼り付けるだけで表示されます。

まとめ

いかがでしたでしょうか。

今回はサイトやブログを運営する上で重要なお問い合わせページの作り方をご紹介しました。

最後までご覧いただきまして、ありがどうございました。