日々の雑記から役に立つ知識など

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

 
この記事を書いている人 - WRITER -
札幌に住むエンジニアです。 小学生と双子の育児に日々、試行錯誤の日々です。 WordPressを使ったWEBサイト構築が楽しくて、独学で調べているうちに 自分メディアを持ち、自分が勤める会社のホームページも構築しました。 IT関連技術に関する情報や育児に関する情報など、役に立つ情報をわかりやすくお届けしたいと思います。

サイト上に簡単に入力フォームを作る事が出来るWordPressの無料のプラグインContact Form 7を活用しあなたのサイトにお問い合わせフォームを設置する方法を解説します。

 

Contact Form 7とは

Contact Form 7はWordPressの無料プラグインです。

どなたでも簡単にお問い合わせフォーム・お申し込みフォームをサイト上に設置する事が可能です。

 

WordPressの無料プラグインの中でもContact Form 7は最も多くのユーザーが利用しています。

 

Contact Form 7の特徴

  • 操作が簡単でシンプル
  • 項目追加が簡単に可能
  • 入力値チェック機能(必須入力チェック・日付妥当性チェック等)が備わっている
  • HTMLとCSSの知識次第でフォームのデザインもカスタマイズ出来る
  • 自動返信メールも対応
  • 入力確認画面・完了画面には非対応

 

どんな使い方がおすすめ

お問い合わせフォームを設置したい

サイトにアクセスしてきたユーザーの問い合わせに対してスムーズな対応が出来ます。

お申し込みフォームを設置する

セミナー申し込みフォーム、講座申込みページ等を自サイト内に設置可能です。

自サイトに設置する事で、サイトからの離脱を防ぎます。

資料請求フォームを設置する

各種資料請求フォームが簡単につくれます

 

 

インストール導入方法

メニューから「プラグイン」→「新規追加」をクリック

画面右上の「プラグインの検索」ボックスに「Contact Form 7」と入力しENTERキーを押す

「Contact Form 7」というタイトルのプラグインが先頭にヒットするので「今すぐインストール」をクリック

※富士山のアイコンが目印です

使い方・各種設定方法

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

単にお問い合わせフォームを設置するだけで良いならば最も簡単な方法があります。

Contact Form 7は、インストール時に最初から

「お名前」

「メールアドレス」

「件名」

「本文」

の4項目が入力項目のフォームが用意されています。

設置は簡単です。

 

1.メニューから「お問い合わせ」→「コンタクトフォーム」をクリック

2.一覧上の「お問い合わせ」にあるショートコードをクリック

3.固定ページを作成

 

4.固定ページの本文にショートコードを貼り付ける

 

これだけで、設置は完了します。

表示されたページを見てみましょう。

追加した固定ページのプレビューを見てみましょう

インストール段階で上記のフォームは設置が可能です。

フォームのデザイン変更について

お問い合わせフォームのデザインは、HTMLやCSSで自由に変更が可能です。

TABLEタグを使った例

ソースはコチラ↓(コピペOK)

<table class="table table-bordered table-striped table-contactform7">
 <tr>
 <th>お名前</th>
 <td> </td>
 </tr>
 <tr>
 <th>メールアドレス</th>
 <td>[email* your-email watermark"例:abcde.aaaa.com"]</td>
 </tr>
 <tr>
 <th>題名</th>
 <td></td>
 </tr>
 <tr>
 <th>メッセージ本文</th>
 <td>[textarea your-message]</td>
 </tr>
</table>
<p>[submit "送信する"]</p>

 

管理者宛メールの設定

フォームから投稿された内容は、管理者宛に送信されますが

投稿したユーザーに対して、自動返信メールを送る事も可能です。

 

1.「コンタクトフォーム」の詳細画面で「メール」タブをクリック

 

以下の画面で、管理者に届くお問い合わせメールのカスタマイズが可能です。

 

 

特にデフォルトのままでいじる必要はありませんが、設定の詳細は上記の図のようになっています。

 

自動返信メールの設定

 

自動返信メールの設定は、以下の「メール(2)」のチェックボックスをONにする事で

設定可能です。

 

 

チェックボックスをONにすると以下のような画面が表示されます。

 

 

 

 

投稿時の入力情報を自動返信メールに埋め込む事も可能です。

 

[your-name]  投稿者の入力した名前

[your-eamil]  投稿者の入力したメールアドレス

[your-subject]  投稿者の入力した件名

[your-message]  投稿者の入力した本文

 

フォームに項目を追加した場合は、メッセージ本文にも追加した項目を反映する事をお忘れなく。

 

以上、contact-form-7の基本的な使い方について
解説させていただきました。

 

 

この記事を書いている人 - WRITER -
札幌に住むエンジニアです。 小学生と双子の育児に日々、試行錯誤の日々です。 WordPressを使ったWEBサイト構築が楽しくて、独学で調べているうちに 自分メディアを持ち、自分が勤める会社のホームページも構築しました。 IT関連技術に関する情報や育児に関する情報など、役に立つ情報をわかりやすくお届けしたいと思います。

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Copyright© KiyoPress , 2017 All Rights Reserved.