Contact Form 7の使い方:お問い合わせフォームを設置する【WordPressプラグイン】

WordPressでお問い合わせフォームを設置するには?

サイトやブログに設置しておくとなにかと便利なお問い合わせフォーム。

WordPressではプラグインを使用すれば、専門的な知識がなくとも簡単にお問い合わせフォームを設置することができます。

今回は、人気の高いWordPressプラグイン「Contact Form 7」を導入してお問い合わせフォームを設置する手順から、実用的なカスタマイズ方法までをご紹介していきます。

ぶろぐ先生
サイトに訪問した人が何かしらの連絡をとりたい時にお問い合わせフォームがあると安心だよね。

Contact Form 7を導入する

まずは、WordPress管理画面(ダッシュボード)からContact Form 7をインストールしましょう。

プラグインのインストール

ダッシュボードの左のメニューにある
プラグイン」→「新規追加」を選択します。

 

プラグインを追加する画面が表示されたら、
キーワードに「Contact Form 7」を入力して検索しましょう。

今すぐインストール」をクリックしてしばらく待つと、インストールは完了です。
そのままプラグインを有効化しましょう。

Contact Form 7の設定方法

プラグインを有効化すると、ダッシュボードの左のメニュー欄に「お問い合わせ」項目が追加されます。
新規追加」をクリックしましょう。

 

「コンタクトフォームを追加」画面が表示されたら、まずは管理用のタイトルを入力しましょう。
実際のお問い合わせページのタイトルにはならないので、お好きなタイトルで大丈夫です。

それでは、4つの設定項目をそれぞれ解説していきます。

フォーム設定

【フォーム】では、お問い合わせフォームに表示させる項目を設定します。

デフォルト状態では、「お名前」「メールアドレス」「題名」「メッセージ本文」の4つの項目のフォームが作成されます。項目名を変えたい場合は、「メッセージ本文」→「お問い合わせ内容」などに変更すると良いでしょう。

ぶろぐ先生
後ほど、実用的なフォームのカスタマイズ方法を説明するね!

メール設定

【メール】では、お問い合わせフォームからメッセージが送信された際に送られるメールの設定を行います。送信先には、自分のメールアドレスを入力しましょう。

 

自動返信メールの設定を行う場合は、下にスクロールし「メール(2)を使用」にチェックを入れてください。

こちらは返信メールですので、送信先が[your-email]になっているはずです。
題名とメッセージ本文は上の画像を参考に、書き換えを行ってください。

メッセージ設定

【メッセージ】では、「メッセージが正常に送信された」「入力内容に不備がある」「必須項目が空欄」などの際に表示される各メッセージの文章を編集することができます。

その他の設定

【その他の設定】では、追加でカスタマイズしたい場合に必要なコードを入力します。基本的には触る必要がないでしょう。

  • subscribers_only: true
    ログインしたユーザーだけがメッセージを送信できる
  • demo_mode: on
    メッセージを送信してもメールが飛ばず、完了メッセージのみ表示されるデモモード

 

設定が完了したら、左下の「保存」をクリックしましょう。

お問い合わせフォームを設置する

では、実際にお問い合わせフォームをサイトに設置していきます。

コンタクトフォーム一覧を表示すると、先ほど設定したフォームが追加されているはずです。

ショートコードが記載されているので、コピーしておいてください。

 

続いて、お問い合わせフォームを設置するページを作成します。
左メニュー「固定ページ」→「新規追加」を選択しましょう。

 

お問い合わせページのタイトルを入力し、先ほどコピーしたショートコードを貼り付けます。

実際にページに表示されているか、一度「プレビュー」で確認してみましょう。
お問い合わせフォームがきちんと表示されていれば問題ありませんので、「公開」をクリックしてください。

 

ぶろぐ先生
お問い合わせフォームをサイトに設置できたね!

CSSを編集できる人は自分好みのデザインにしてみると良いかもね。

実用的なカスタマイズ方法

フォーム設定画面では、フォームに追加したい項目をクリック1つで挿入することができます。

添付ファイル項目

上の項目から「ファイル」をクリックしましょう。

 

右下の「タグを挿入」をクリックします。

 

タグが挿入されたら、上の項目と同じ書き方で「添付ファイル」のテキストを記入し、保存しましょう。

 

ファイルを添付できる項目が追加されました。

承諾確認ボックス項目

上の項目から「承諾確認」をクリックしましょう。

 

先ほどと同様にタグを挿入し、「個人情報」や「利用規約」に同意して送信してもらうための文章を記入しましょう。

 

送信ボタンをクリックする前に、承諾確認ボックスがあると誤送信を防ぐことができます。

 

ぶろぐ先生
こんな感じで沢山カスタマイズできるから、様々な用途に合ったフォームを作成することができるんだ!

まとめ

Contact Form 7でお問い合わせフォームを設置する手順をご紹介しました。

お問い合わせフォームを設置したことで、より本格的なサイトが出来上がったのではないでしょうか。色々なカスタマイズを行い、あなたのサイトに合ったお問い合わせフォームを作成してみてくださいね。

 

サイト運営に欠かせないプラグインをチェック!

WordPressプラグインを導入しよう:オススメの9つをご紹介

2018.01.21