初期設定済みのワードプレスサイトが3万円~ 詳しく見る

【WP】Contact Form7で問い合わせフォームを作りたい!

【WP】Contact Form7で問い合わせフォームを作りたい!サムネイル

お客さんとのやり取りをするために必要な問い合わせフォーム。
コメントでやり取りしたり、問い合わせ先のメールアドレスを掲載してやり取りしている方もいますが、あった方が丁寧ですよね。
特にビジネスでホームページを持つならば、あらかじめ伺っておきたい内容を聞けるというのは大きいです。

問診票やアンケートといった複数ページにまたがる「作り」に凝ったフォームや、入力中に内容をチェックして即時指摘してくれるリアルタイムバリデートチェックといった「高機能な」フォームを作ろうと思えば、プログラマーにお願いして作ってもらうので、結構なお値段がします。

ただ、数点の質問や情報をあなたが受け取れればいいという「よくある」問い合わせフォームなら、プラグインを使うことで簡単に作ることができます。

「プラグインって何?」「プラグインの使い方が分からない」と言う方は、下記記事でご確認ください、

関連記事 ワードプレス(WP)にインストールするべき7つのプラグイン+α

目次

Contact Form7をインストールする

プラグインの新規追加から、検索ボックスに「Contact」と入力します。
候補にContct Form7が出てきます。

画像で「有効」となっている部分が「インストール」ボタンなのでクリック。
インストールに続けて「有効化」します。

プラグインの新規追加からContactで検索インストールして有効化する

有効化するとサイドメニューに「お問い合わせ」が追加されます。
追加されたお問い合わせメニューへ移動して初期設定をしていきましょう。

コンタクトフォームへ移動して初期設定をする

新規追加すると新しいコンタクトフォームを作ることが、タイトルをクリックすると編集することができます。
「コンタクトフォーム1」のタイトルをクリックしてみましょう。

問い合わせの初期設定をする

コンタクトフォームの「フォーム」タブの解説

コンタクトフォームの初期設定は③タブメニューの「フォーム」「メール」「メッセージ」の3つを設定します。

質問項目を設定する

①タイトル

「お問い合わせ」メニューの一覧で確認できるタイトルです。
現在「コンタクトフォーム1」となっていますが、申し込み用、問い合わせ用といった目的に沿ったタイトルにしておきましょう。

②ショートコード

ショートコードはワードプレス内で使える簡単な合言葉のようなものです。
[contact-form-7 404 "Not Found"]を固定ページや投稿ページに貼り付けると、編集した項目(フォーム)をつくることができます。

③タブメニュー

「フォーム」「メール」「メッセージ」「その他の設定」といった4つのタブがあります。

「フォーム」が質問項目の追加や編集、「メール」が送信先や自動返信メールの設定、 「メッセージ」は送信した時に表示される文字の内容を編集することができます。

「その他の設定」は専門知識がある人が使う項目なので、本記事では説明しません。

④フォームの項目追加

14項目から選んで追加することができます。
例えば、相手のホームページを教えて欲しいからURLをクリック追加してみます。

項目を選んで追加する

項目タイプでチェックを入れると必須項目になります。
ホームページを持っていない方もいるでしょうから、チェックなしで右下の「タグを挿入」をクリック。

URLを挿入

URLの項目が追加されました。
ただ、このままだと何を質問されているか分かりません。

ラベルがある場合とない場合

他の質問項目と同様に、<label></label>と 質問項目名(必須または任意)を追加しておきましょう。
<label> 質問項目名(必須または任意)[タグ] </label>
の形で入力しておけばOKです。

⑤フォームの中身

名前、メールアドレス、題名、メッセージ本文、URL、送信ボタンになっています。
知りたい項目を追加・編集、不要な項目は削除して、⑥の保存ボタンをクリックすれば、修正した内容が反映されます。

⑥保存ボタン

せっかく編集しても、保存を押さなければ反映されません。
「フォーム」タブの編集はこれで終わりです。

コンタクトフォーム「メール」タブの初期設定

「フォーム」タブは質問項目の設定なので表示側の設定ならば、「メール」タブは送受信の設定、つまり中身の設定と言えるでしょう。

メールタブをクリックすると、「メール」という項目、スクロールすると「メール(2)」という項目があります。
「メール(2)」にチェックを入れると、「メール」と同様の項目が表示されます。

「メール」で編集した内容は管理側、「メール(2)」は訪問者への自動返信に使われるメールです。

「メール」項目の編集方法

上部には使用できるショートコードが表示されています。

「フォーム」タブで設定して保存していないと、この部分には反映されません。

追加した要素がない場合は、「フォーム」タブへ戻って、保存してから「メール」タブを再度ご確認ください。
メッセージ本文はデフォルト項目のショートコードしか記載されていません。

追加した項目のショートコード(サンプル例の場合だと、[url-667])を追記、削除した項目を消しておきましょう。

メールタブの設定方法

メール(2)の項目を編集

「メール」は自分で見るものなので追加項目の編集程度でいいのですが、「メール(2)」は相手があるので編集する部分が多いです。
チェックを入れて展開されたばかりの状態は下記のような状態です。

メール2のデフォルト項目

編集するのは赤にしている

  1. 「送信元」
  2. 「題名」
  3. 「追加ヘッダー」
  4. 「メッセージ本文」

の4か所です。
編集した後の状態が下記です。

編集後のメール2
[st-step step_no=”1″]1.送信元と3.追加ヘッダー[/st-step]

問い合わせ先のアドレスを掲載しておきましょう。

メールアドレスの左右に入っている<>は消してはいけません。
(消すとエラーになります。)

[st-step step_no=”2″]2.題名[/st-step]

[your-subject]だと訪問者が入力した題名になります。
ショートコードを削除して、「お問い合わせありがとうございます。」と入力しておけば、固定メッセージとして使うこともできます。

[st-step step_no=”3″]4.メッセージ本文[/st-step]

[your-message]しか書かれていません。
問い合わせをくれたことへの感謝と、入力したショートコードの追記、連絡先情報んどを掲載しておきましょう。
設定が終わったら「保存」ボタンをクリック。

コンタクトフォームの「メッセージ」タブの編集

お問い合わせフォームで起こる様々なケースに対応するメッセージを設定することができます。
めっちゃ地味な場所なので、そのままでも問題はありません。

どこで表示されるメッセージなのか?

送信後に表示されるメッセージ

送信した時に表示されるメッセージ(設定側)

メッセージの例

こだわりたい方は設定しておきましょう。

問い合わせフォームを掲載するページを作る

コンタクトフォームのタイトルの下にあるショートコード[contact-form-7 404 "Not Found"](idとタイトルは人によって違います)をコピー。

コンタクトフォームのショートコードをコピー

固定ページまたは投稿ページを新規作成(固定ページで作るのが一般的)して、コピーしたショートコードを貼り付け。
パーマリンクを編集して公開しましょう。

ショートコードを入力して問い合わせフォームを作成

公開したページへ移動します。

外観→メニューで公開したお問い合わせページの追加を忘れずに!

テストしてメールが届くか確認する

公開したページで実際に問い合わせしてみましょう。
送受信ができることが最低条件で、受信したメッセージの感じがいいかなど、訪問者の気持ちになって確認することが大切です。
気にななった部分を編集して更新していきましょう。

入力した内容を確認する画面を作ったり、送信した後の画面を切り替えるというカスタマイズもできます。
下記記事で解説していますので、ご興味のある方は併せてご覧ください。

関連記事 プラグインで簡単!コンタクトフォームに確認画面を追加する方法

関連記事 コピペで簡単!コンタクトフォームでサンクスページを追加する方法

【WP】Contact Form7で問い合わせフォームを作りたい!サムネイル

この記事が気に入ったら
フォローしてね!

この記事が役に立ったらシェア!

ネット集客に役立つe-bookをプレゼント

無料レポート表紙

セールスプロセスの自動化に取り組もうとしている

スモールビジネスにぴったりのe-book(合計27ページ)です。


特典として4本の動画(約120分)もプレゼント。

e-bookと動画を見て頂ければ初心者でもしっかり活用できます。

この記事を書いた人

愛媛県新居浜市出身。大阪在住。Web業界10年目に突入した元ディレクター。Googleアナリティクス個人認定資格(GAIQ)、Google広告の認定資格保持、Googleデジタルワークショップ修了。専門スキル:コピーライティング、DRM。このサイトの運営責任者で、現在は中小企業やスモールビジネスのデジタルマーケティングをサポートしています。最近は完全自動化に向けて取り組み中。B級グルメ、スーパー銭湯、焼鳥が好き。Webマーケティングやインターネット活用についての記事を更新しています。

コメント

コメントする

目次
閉じる