【簡単】プラグインでお問い合わせフォームを作る方法

はじめに

この記事では、WordPressで立ち上げたサイトにお問い合わせフォームを設置する方法を書いています。

俺はHTMLだのPHPだのと良く分からないので、プラグイン「Contact Form 7」を使用してお問い合わせフォームを設置しました。

ものすごく簡単なので是非参考にしてください。

プラグイン「Contact Form 7」でお問い合わせフォームを設置する手順

１．プラグインをインストールする

まずは「Contact Form 7」をインストールします。

WordPress管理画面の左メニューから「プラグイン」にマウスカーソルを合わせます。

そうすると関連メニューが表示されるので、「新規追加」をクリックします。

プラグイン検索窓に「contact form 7」と入力します。

上図のような表記が出るので、「今すぐインストール」をクリック。

インストールが済んだら「有効化」をクリック。

２．コンタクトフォームを作る

さっそくプラグインを使って、コンタクトフォームを作っていきます。

「Contact Form 7」のインストールおよびその有効化が正常に完了すると、WordPressの左メニューに「お問い合わせ」というメニューが追加されるので、それをクリックします。

表示される「コンタクトフォーム」の画面にて「新規追加」をクリックします。

「コンタクトフォームを追加」の画面にてコンタクトフォームを作りこんでいきます。

画面すぐの入力枠はコンタクトフォームのタイトルを入力するところです。

俺は「お問い合わせ」というコンタクトフォームのタイトルにしたかったので上図のようにしました。

「フォーム」タブではコンタクトフォームを使う側が（つまり問い合わせをしようとするブログ閲覧者側が）入力を求められる項目を決められます。

名前とかメールアドレスとかそういうやつですね。

俺はデフォルトのままにしました。

「メール」タブではサイト管理者が問い合わせを受けた時にどのように表示するか、またどのメールアドレスで問い合わせ情報を受け取るかなどを細かく決まられます。

プラグインが自動的にWordPressの設定からメールアドレス等の情報を使ってデフォルト値を決定してくれるため、俺はそのままにしました。

「メッセージ」タブではコンタクトフォームを利用した人に表示するいろいろな場面を想定したメッセージを設定できます。

あのよくある、「お問い合わせありがとうございました。今後とも株式会社○○を宜しくお願い致します。」みたいなテンプレート文のやつです。

これもデフォルトがしっかり設定されていたためそのままにしました。

「その他の設定」タブではカスタマイズのための細かい設定ができるようです。

俺はお腹いっぱいだったので、そのままにしました。

自分が納得いく内容に出来たら、画面下部の「保存」をクリックしてコンタクトフォームの追加は終わりです。

コンタクトフォームの追加が完了すると、

という表記とともにショートコードが生成されます。

次のステップに向けてショートコードをクリップボードにコピーするなり、メモ帳に張るなりしておきましょう。

３．「お問い合わせ」の固定ページを作る

「お問い合わせ」の固定ページを作ります。

別に投稿でも問題ないと思うのですが、サイトのパーツとして恒久的に設置されるようなものは固定ページが良いらしいので、やはり「お問い合わせ」は固定ページで作成します。

WordPressの左メニューより、「固定ページ」＞「新規追加」と移動します。

①タイトル

固定ページのタイトルは「お問い合わせ」にしました。

②パーマリンク

末尾は「contact」だとおしゃれだと思います。

③本文

必須ではないですが、殺風景なお問い合わせフォームもあれなので、ちょっと文言書きます。

④ショートコード

本文に前のステップで取得したショートコードを貼り付けます。

人によってはアイキャッチ画像をつけるとかナニするとかあるかもしれません。

俺は以上の内容で問題なかったので、これで「公開」をクリックします。

実際にリンクに移動してみるとお問い合わせフォームが見事出来ていました。

試しに問い合わせをしてみましたが、問題無く問い合わせメールが設定のアドレスに届きました。

おわりに

「Contact Form 7」を使ってのコンタクトフォーム作成はデフォルトの設定が充実しているので非常に簡単でした。

「お問い合わせ」があると信頼性が上がると思うし、サイト閲覧者さんとのコンタクトが出来るようになるから、今回設置できて良かったです。

参考文献・参考webサイト

【参考Webサイト】

・【ブログ初心者必読】AFFINGER 4でお問い合わせフォームを作るなら「Contact Form 7」がチョー簡単！ - merumae〈めるまえ通信〉
https://www.merumae.com/affinger-contactform/
20191013アクセス