ブログ構築

「Contact Form 7」でWordPressにお問い合わせフォームを設置する方法

こんにちは、風早です!
僕の詳しいプロフィール

さて、今回のお題はこちらです!

WordPressにお問い合わせフォームを設置する方法

WordPressを運用する上で、訪問者さん側からブログやWebサイトの管理者側へコンタクトを取れるようにしておかないと、単なる一方通行なメディアとなってしまいます。

なので、ブログ内には「お問い合わせフォーム」を設置しておくのが一般的です。

そんなときに活躍してくれるのが、「Contact Form 7」というWordPressのプラグインです。

「Contact Form 7」は、お問い合わせフォーム作成用の「メイドインジャパン」プラグインで、WordPressユーザーの間でも非常に名の知れたプラグインです。

またこのプラグインは、お問い合わせフォームの作成や自動メール返信機能などを手軽に設定することができて、投稿や固定ページの記事内にショートコードを貼り付けるだけで、簡単にお問い合わせフォームを設置することができるんですね。

「Contact Form 7」を導入すれば作成したお問い合わせフォームからブログの管理者に問い合わせ通知メールを送ったり、訪問者さんに自動返信メールを送ることができるようになります。

そこで今回は、「Contact Form 7」を導入してWordPressに「お問い合わせフォーム」を設置する方法について、解説させていただきます。

プラグインのインストール手順と管理の仕方については、下記のページを参考にされてください。

WordPressプラグインのインストール手順と管理の方法を解説します WordPressにはたくさんのメリットがありますが、中でもピカイチな機能が「プラグイン」です。 プラグインはスマ...

「Contact Form 7」でお問い合わせフォームを作成・設置する方法

「Contact Form 7」をWordPressにインストール


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

WordPress管理画面左メニューの「プラグイン」⇒「新規追加」をクリックします。


すると「プラグインを追加」という画面が表示されますので、キーワード欄に「Contact Form 7」と入力し出現した「Contact Form 7」の「今すぐインストール」をクリック。


「有効化」をクリックします。


これで「Contact Form 7」のインストールは完了です。

「Contact Form 7」でお問い合わせフォームを作成する

「Contact Form 7」を「有効化」すると左側の管理メニューに「お問い合わせ」という項目が表示されますので、「コンタクトフォーム」をクリックします。


「コンタクトフォーム 1」の右側にある[]内のショートコードをコピーします。

※クリックすると自動ですべてを選択してくれます。


任意のページにコピーしたショートコードをペーストします。

ここでは、あらかじめ作成しておいた「お問い合わせ」という固定ページ内に貼り付けています。


保存したページを表示して、きちんとお問い合わせフォームが表示されていればフォーム設置完了です。


風早
風早
デフォルト状態では、WordPressのインストールのときに設定したメールアドレス宛に、問い合わせフォームに入力した内容が通知されていればOKです(届いていないときは迷惑メールフォルダも確認してみてください)。

「Contact Form 7」で作成したお問い合わせフォームを編集する


先ほど作成したお問い合わせフォームを編集する方法について解説していきます。

お問い合わせフォームの項目を編集する

WordPress管理画面左側メニューの「お問い合わせ」⇒「コンタクトフォーム」をクリックします。


「コンタクトフォーム」の設定画面から、「コンタクトフォーム 1」の「編集」をクリックします。


すると「コンタクトフォーム 1」の編集画面が表示されます。


項目を追加したい位置にカーソルを合わせて、追加したいフォーム種類を選択します。

ここでは一例として「電話番号」を追加してみます。


編集内容は下記を参考にしてください。


  • 「項目タイプ」
    ➥ 入力項目を必須にしたい場合は「必須項目」にチェック
  • 「デフォルト値」
    ➥ 任意の値を入力 例)000-000-0000
  • 「このテキストを項目のプレースホルダーとして使用する」
    ➥ 入力例を自動表示したいときはチェック
  • プレースホルダーの表示例)


以上を入力後に「タグを挿入」をクリックします。

※「名前」「ID 属性」「クラス属性」はデフォルトのままでOKです。

コンタクトフォーム編集画面で「電話番号」のタグが追加されていることを確認します。


コンタクトフォームの編集画面で電話番号も他の入力項目をコピペして同様の構成にしてから、「保存」をクリックします。


お問い合わせ画面を表示した際に「電話番号」がきちんと追加されていれば完了です。


「Contact Form 7」で作成したお問い合わせフォームのメール送信設定を編集する

次に、メールの編集でサイト管理者へのメール通知と訪問者への自動返信メールを設定する手順について、解説していこうと思います。

先程と同様、コンタクトフォームの設定画面から「コンタクトフォーム 1」の「編集」をクリックします。


「メール」タブを開いてメールの設定をしていきます。


「送信元」はデフォルトでは「wordpress@ドメイン名」となっています。

特にこだわりがなければ「info@ドメイン名」に変更しましょう。


編集が完了したら、「保存」をクリックして終了します。


レンタルサーバー側でも送信元と同じ「info@ドメイン名」のアドレスを発行しておくとベターです。

また、gmailやyahooメールなどのフリーメールアドレスを送信元に設定すると、スパムメールとして迷惑メールフォルダに振り分けられる可能性が高まるので注意しましょう。

補足

ちなみに僕は、コンタクトフォームの「メッセージ本文」を下記のように設定してますので、良かったら参考にしてみてください。

【メッセージ本文の例】

~~~ここから~~~

▼お名前
[your-name]

▼メールアドレス
[your-email]

▼タイトル
[your-subject]

▼お問い合わせ内容:
[your-message]

・・・・・・・・・・・・・・・・・・・・
このメールは、「ブログやWebサイト名」 (https://●●.jp) のお問い合わせフォームから送信されました。

~~~ここまで~~~

また「メール (2) を使用」にチェックを入れると、訪問者さんに対して自動返信メールを送信することができます。


先程と同様に、返信メールの題名(件名)やメッセージ本文を適切な内容に編集して、最後に「保存」をクリックします。


風早
風早
実際に作成したお問い合わせフォームに入力してメール通知のテストを行い、思った通りに動作していればOKです。

まとめ

というわけで今回は、「Contact Form 7」をインストールしてWordPressにお問い合わせフォームを設置する方法について解説させていただきました。

お問い合わせフォームを活用することで、訪問者さんとのコンタクトをスムーズに取っていくことができるようになりますので、ぜひ活用してみてください。



自由と自分らしいライフスタイルの描き方


ABOUT ME
風早 ノヴ
運営者名:風早 ノヴ
愛知県出身。 8年間ダークブラックな企業で会社員として働きながら、あるとき自分が社会不適合者だと気づく。 副業でアフィリエイトをスタートし、当時の給料を遥かに上回る成果を得たことを足掛かりに脱サラ。 漫画原作者を目指していた経験を活かし、ストーリー性に富んだライティングやマネタイズを意識した無駄のない仕組み作りを得意とする。 情報発信による自動収益化やひとりビジネスコンサルティングなどで着実に成果を出し、2018年に法人化。 その後「図太く、丁寧な暮らし」をコンセプトとしたオンラインコミュニティ『ARTISTIC WORLD(アーティスティック・ワールド)』を立ち上げ、時間やお金の不自由さに悩む方たちが各々の理想とするライフスタイルを実現できるよう「個人で稼ぐ力」の育成をアシスト中。 趣味は漫画・ジャンクション巡り・ミニ四駆。