WordPressサイトの問い合わせフォーム(Contact Form 7)設置方法

09.29.2021

ブログを読んでいて、記事内容について質問や意見・要望などがあるとき、ブログ管理者に連絡を取りたいという場合にその方法がないと不便ですよね。
ブログ運営にあたってブログ管理者との連絡手段は重要です。当ブログでも「Contact Form 7」というWordPressのプラグインを使用して問い合わせフォームを設置しました。その方法を紹介しますので参考にしてくださると幸いです。
手順が少なくなるよう可能な限り必要最低限の設定のみにしています。

Contact Form 7とは

Contact form7はWordPressのサイトに問い合わせページを簡単に作ることができる便利なプラグインです。
難しい専門的な知識を必要とせずに問い合わせフォームを作成できる、WordPressのサイト運営に幅広く利用されているプログラムです。
それでは問い合わせフォームを設置してみましょう!

問い合わせフォームの作成

Contact Form 7のインストール

ではまず、WordPressのプラグインページから「Contact Form 7」を探します。
WordPress管理ページのサイドメニューより[プラグイン]-[新規追加]をクリックし、画面右上のキーワードに「Contact Form 7」を入力します。「Contact Form」でもかまいません。
検索結果に「Contact Form 7」が表示されますので「今すぐインストール」をクリックします。

インストールが終わるとボタンが「有効化」に変わりますので「有効化」をクリックします。

問い合わせフォームの設定

有効化が完了するとサイドメニューに「お問い合わせ」の項目が追加されますのでクリックします。
「コンタクトフォーム1」というページがあらかじめ作成されているのでこちらを使用します。
画像に合わせるため以降を「問い合わせフォーム」ではなく、「コンタクトフォーム」と読み替えますね。

「コンタクトフォーム1」をクリックするとコンタクトフォームの設定内容が表示されます。
コンタクトフォームの名称を編集できますので任意の名称に変更してください。カスタマイズしたフォームをそれぞれで複数保存しておくことができるのでわかりやすい名称にしておく方が良いですが、筆者はひとつで大丈夫なので単純に「コンタクトフォーム」に変更しました。

このページでは「フォーム」、「メール」、「メッセージ」、「その他の設定」の4つの項目を編集することができます。まずは「フォーム」タブですがフォームページに表示させる項目や入力欄を設定します。チェックボックスを表示して任意で選択してもらうよう設定したり、ファイルのアップロードを要求したりすることもできますが、シンプルなフォームを予定している場合はそのまま変更しなくて大丈夫です。
変更した場合は、「保存」をクリックしてください。

続いて「メール」タブ。実際にフォームから問い合わせが入力された場合に、その内容を指定のメールアドレス宛に送信するためのテンプレートを設定をします。初期状態の「送信先」には、WordPressが利用するメールアドレスが入力されていますが、問い合わせフォームの内容の送信先を変更したい場合はここに送信先のメールアドレスを入力してください。変更しなくてもフォームとして機能しますので、そのままでよい場合は編集の必要はありません。

続いて「メッセージ」タブ。フォーム内の入力状況に応じて自動で表示されるメッセージを編集することができます。必要に応じて編集可能ですが、特に指定がない場合は編集の必要はありません。

最後に「その他の設定」タブ。上記のタブ以外のカスタマイズをすることができます。ログインしているユーザーだけがコンタクトフォームの送信を行えるようにする購読者限定モードにしたり、JavaScriptを用いた細かな内部処理を組み込むことなどができます。詳しくは「その他の設定」タブ内の「その他の機能」を参照してください。不要な場合は何も入力しなくても大丈夫です。

各タブで変更した場合は「保存」してください。以上でコンタクトフォームの設定は完了です。

問い合わせフォームの設置

コンタクトフォームの設定ができましたのでサイトに設置します。
編集したコンタクトフォームの「ショートコード」をコピーします。

サイドメニューより[固定ページ]-[新規追加]をクリックします。

ページのタイトルを「お問い合わせ」にします。お問い合わせフォーム(ページ)のタイトルとなるので、お好みの名称でかまいません。
「ショートコード」を埋め込みます。筆者の環境ではブロックエディタを使っていますのでブロックエディタでのショートコード埋め込みのメニューを選んでいます。

先ほどコピーしたコンタクトフォームのショートコードを貼り付けて「公開」します。
これでお問い合わせフォーム(ページ)の作成ができましたので、ヘッダーやフッターなど任意の場所にこのページへのリンクを貼ってください。
筆者はフッターに追加してみました。追加方法は過去記事にありますので参考にしてください。

問い合わせフォームの表示確認

早速リンクを開いてみました。
、、、なんとテキスト入力欄がはみ出てます。。。( ノД`)
ページ幅にもよりますが、右カラムに入力欄が被ってしまっています。。。
調べてみるとフォームの入力欄のサイズは変更できるようですので変更します。

問い合わせフォームの入力欄サイズ変更

コンタクトフォームの編集ページの「フォーム」タブを開きます。
画像のように各タグ内にサイズ指定のコードを追加することでサイズ調整ができます。幅を見ながら調整した結果、「31」くらいがちょうど良さそうだったので「size:31」、メッセージ本文であるtextareaには「31x」を指定しました。
※「textarea」のサイズ指定は、<行数(幅)>x<列数(高さ)>で指定します。
各サイズは自サイトに合うよう調整してください。

保存して表示を確認してみると、無事見栄えがよくなりました!
初期状態の「フォーム」タブの設定でも機能はするのですが、見栄えを考えるとこちらの方が良いですので、ぜひ変更しておきましょう!

まとめ

いかがでしたか?
ここではWordPressのプラグインで簡単に問い合わせフォームが設置できることを紹介しました。

サイト運営では読者からの質問や意見などで管理者に連絡を取りたいと希望する場合が少なくないと思います。
読者への理解を深めるうえでも管理者への連絡手段は必ず設けるようにしましょう!ヽ(´ー`)ノ