今回の記事では、WordPressのプラグイン「Contact Form7」の
- インストール
- 基本設定方法
についてご紹介します。
このプラグインを導入・活用することで、あなたのブログを訪れてくれた読者さんが、あなたに対してお問い合わせを行う際に使用するためのメッセージフォームを簡単に固定ページに設置することができます。
実際のメールフォームとは下記のようなイメージになります。
メールフォームとは…要するに、読者さんの
- お名前
- メールアドレス
- 問い合わせ内容
などを入力してもらうものです。
プラグインを導入する方法は別記事にて紹介しています、まだ、方法がわからないようでしたら、ご覧いただき導入してみてくださいね。
目次
【Contact Form7】の導入方法
それでは、【Contact Form7】の導入方法を解説していきます。
WordPressに【Contact Form7】をインストールするには、【ダッシュボード】【プラグイン】【新規追加】で表示されるページで、検索ボックスに「Contact Form7」とワード検索すると出てきます。
【今すぐインストール】をクリック→【有効化】をクリックしてください。
プラグインを【有効化】しました、と表示されれば、インストール完了です。
【Contact Form7】でメールフォームを生成する方法
①【お問い合わせ】-【新規追加】をクリック
WordPressにログイン後【ダッシュボード】から【お問い合わせ】-【新規追加】の順でクリックします。
②任意のタイトルを入力
設定ページを開きましたら、任意のタイトルを入力しましょう。
③【フォーム】の設定
画面中央にある【フォーム】をクリックしましょう。
ここでは記事や固定ページに表示されるフォームにあたる部分の設定を行います。
デフォルトでは、
- お名前
- メールアドレス
- 題名
- メッセージ本文
- 【送信】ボタンを表示
4つの入力欄と「送信」ボタンが表示されるように設定されています。
<label>の後ろ部分を変更すると表記が変わります。
例えば下記では「題名」を「件名」に。
「メッセージ本文」を「本文」に変更しました。
最後に画面下の【保存】をクリックしましょう。
あなた独自にカスタマイズできるので、是非試してみてください。
④【メール】の設定
続いて、【メール】タブをクリックしましょう。
ここでは【メール】部分で入力された内容の送信先のメールアドレスや送信方法についての設定を行います。
送信先だけ間違いないように設定しておけば、その他はデフォルトの設定のままでOKです。
⑤【メッセージ】の設定
様々な状況で用いられるメッセージを編集できます。
こちらの設定は基本的に、デフォルトのままで大丈夫です。
任意で文章の変更を行いましょう。
⑥【その他の設定】の設定
こちらも、基本的にはデフォルトのままでOKです。
⑦生成されたコードをコピー
各項目で入力が完了。
画面左下の【保存】をクリックすることで設定が変更されます。
その際に専用コードが生成されるので、コピーしましょう。
お問い合わせページを作成し、メッセージフォームを設置する方法
生成したメッセージフォームを実際にページに表示する方法について紹介していきます。
①【固定ページ】-【新規追加】をクリック
WordPressにログイン後【ダッシュボード】から【固定ページ】-【新規追加】の順にクリックします。
②コンタクトフォーム作成時に生成した【コード】を本文中にペースト
固定ページの編集画面が表示されます。
編集の内容は、実際に読者さんが見る、お問い合わせのページになるので、表記したい文章を入力しましょう。
上から
- ①タイトル
- ②パーマリンク
- ③本文
になります。
本文入力後、忘れずコンタクトフォーム作成時にコピーしたコードを貼り付けます。
その際に【ビジュアルモード】でコード貼り付けを行ってください。
③公開をクリック
以上で生成したメッセージフォームをお問い合わせページとして作ることができました。
公開後、実際に適用できているか確認してみましょう。
④適用後の確認
下記画像の赤枠部分に【お問い合わせ】が表示されました。
クリックすると、以下の画像が表示されました。
まとめ
今回の記事では、WordPressのプラグイン「Contact Form7」の
- インストール
- 基本設定方法
についてご紹介しました。
このプラグインを導入・活用することで、あなたのブログを訪れてくれた読者さんが、あなたに対してお問い合わせを行う際に使用するためのメッセージフォームを、簡単に固定ページに設置することができます。
お問い合わせフォームは、ブログを訪れた読者さんとコミュニケーションをとることができる大切なものです。
まだ、お問い合わせフォームを作成・設置できていない場合は、記事をご覧になり設置してみてくださいね。