ブログのつくり方

【Contact Form 7】カスタマイズ・使い方② コピペOK!問い合わせフォームの作り方

こんな方に読んで欲しい!

  • 「Contact Form 7」で基本的な問い合わせフォームを作りたい!
  • よくわからないからコピペしたい!
  • スパム対策もしっかり行いたい!

Webサイトを立ち上げて閲覧数が増えてくると、意外と問い合わせも増えます。

  • このページの、これについて詳しく教えてほしい
  • このページの、ここがわからない
  • 個別にサポート(コンサル)してくれないか?
  • 雑誌などの特集で使わせてくれないか?

あなたのWebサイトが専門的であればあるほど、問い合わせは増えます。他に聞ける人がいないので、みんな困っているわけです

 

読者からの問い合わせは、要望や希望、困りごとがほとんど。つまり、あなたにとって満たすべき「需要」を教えてくれる大事な情報源です。

Webサイトを作ったら、お問い合わせフォームを必ず設置しましょう。

今回は、Contact Form 7 をカスタマイズして、スパム対策も含めた問い合わせフォームの作り方を徹底解説します!

 

さらに詳しく!

1. お問い合わせフォームに必要な情報

Contact Form 7 のカスタマイズを行う前に、お問い合わせフォームに必要な情報を確認しましょう。

今回の記事では、以下の情報を入力してもらうことを想定して、カスタマイズ方法を解説していきます。

  1. お名前(必須)
  2. メールアドレス(必須)
  3. 電話番号(任意)
  4. URL(任意)
  5. 問い合わせ内容の選択(必須)
  6. 問い合わせ内容の詳細(必須)

上記の6項目でカスタマイズ方法を解説しますが、不要な項目は削除してもOKです。

 

ユーザー目線で考えれば、入力する項目が多いと煩わしくなります。あなたも経験したことがあるでしょう。

結果、ユーザーが途中で離脱してしまい、お問い合わせ内容が送信されなくなる可能性があります。

大切なことは、あなたにとって必要な情報だけをお問い合わせフォームで入力してもらうということです。

2. Contact Form 7 でお問い合わせフォームを作る方法

これから、以下の内容を進めていきます。画像をたくさん使ってContact Form 7 のカスタマイズ・使い方を解説していきますので、一緒に進めていきましょう!

  1. Contact Form 7 で、新規追加からフォームを追加する
  2. フォームのテンプレートをコピーし、あなたの問い合わせフォームの入力欄に貼り付ける
  3. 必要に応じて、項目を削除する
  4. Contact Form 7 の内部設定(メールの送信に関するの設定など)を行う
  5. CSSをコピーし、あなたのWordPressの「追加CSS」欄に貼る
  6. 「固定ページ」で問い合わせページを作成する
  7. 公開画面を確認し、カスタマイズが想定通りできているか、送信できるかどうかを確認する

2-1. Contact Form 7 で、新規追加からフォームを追加する

Contact Form 7 プラグインがインストール済みであることを前提に解説します。

メニューの「お問い合わせ」をクリックし、画面上部の「新規追加」をクリックします。

 

新しいお問い合わせフォームを作るための編集画面が表示されます。

タイトルはわかりやすいように「お問い合わせ」などのようにしてください。

フォームの入力欄は、コピペしますので全て消します。

 

2-2. フォームのテンプレートをコピーし、あなたの問い合わせフォームの入力欄に貼り付ける

まず、以下のテンプレートをコピーしましょう。

右上に並んだアイコンの、右から2つ目をクリックすると青く反転しますので、キーボードの「Ctrl」を押しながら「C」でコピーします。

 

コピーできたら、あなたのWordPressの問い合わせフォームの入力欄に貼り付けて、いったん保存します。

貼り付けは、キーボードの「Ctrl」を押しながら「V」ですね。

2-2-1. 貼り付けたテンプレートの解説

ここがポイント!

「 Contact Form 7 」のフォームタグ

テンプレートではフォームタグを使っています。このフォームタグは、タイプ、名前、オプション、値の4つの要素に分けることができます

例えば「テキスト入力フォーム」で「名前」を入力するフォームを作る場合、

CF7_item_16_フォームタグ

  • タイプ(必須項目):出力するフォームのタイプを指定します。アスタリスク(*)は必須項目を示しています。
  • 名前(必須項目):自分で決められるフォームの名前です。スペースは使えませんが、自由に設定できます。
  • オプション(任意項目):上記のサンプルでは「akismet:author」「placeholder"例:佐藤一郎"」の2つのオプションを指定しています。

※ akismet については、2-2-5で解説します。

2-2-2. 冒頭部分

個人の方からの問い合わせは、いまだに携帯電話のアドレスから送られてくることが多いです。携帯電話のアドレスは、登録されたドメイン以外を受け付けない設定になっている場合があるため、「弊社ドメイン(@example.com)からのメールを受け取れるよう、事前に設定をお願いいたします。」のように設定を促しましょう

2-2-3. Contact Form 7 の フォームタグ「タイプ」要素について

CF7_item_16_フォームタグ

Contact Form 7 は、基本のフォームが「テキスト、テキストエリア、メールアドレス、URL、電話番号、数値、日付など」13種類あります。

 

さらに詳しく!

例えば、メールアドレスのフォームに平仮名を入力したり、電話番号に数字以外の文字を入力するとエラーが表示されます。

必要な情報をきちんと入力してもらえるように、対応した「タイプ」を使いましょう。

2-2-4. Contact Form 7 の フォームタグ「名前」要素について

 

CF7_item_16_フォームタグ問い合わせフォームは、6つのタイプを使用しています。会員登録フォームなどを作ると、もっと数が増えます。

送信されるメールの設定でも使いますので、「your-name」「your-url」「your-tel」など、1つ1つにきちんと名前を付けて区別しましょう。

ここに注意!

必ずしも「your-」を付ける必要はありません。「name」「url」などシンプルでもOKです。ただし、「01」「02」のような、ぱっと見ではわからない名前は管理しにくいので避けましょう。

2-2-5. Contact Form 7 の フォームタグ「オプション」要素の【 akismet 】について

CF7_item_16_フォームタグ

「Akismet」は、スパムフィルタリングサービスの名前です。簡単に言えば、スパムを取り除いてくれるありがたいサービスです。

Akismet プラグインが有効化されていれば、Contact Form 7 でもその機能を使うことができます。

さらに詳しく!

Contact Form 7 のオプションとして使える Akismet は、「名前」「メールアドレス」「URL」の3種類です。

  • 名前 : [ text your-name akismet:author ]
  • メール : [ email your-email akismet:author_email ]
  • URL : [ url your-url akismet:author_url ]

Akismet が設定されたフォームは、フォーム送信時に Akismet にデータを送信し、スパムかどうかを確認します。スパムの場合、「メッセージの送信に失敗しました」のように表示され、メール送信は行われません。

名前、メール、URLの3項目には必ず設定しましょう。

2-3. 必要に応じて、項目を削除する

今回準備したサンプルには、6つのフォームが含まれています。

もし、あなたが必要としない項目が含まれていれば、削除してください。

各項目のあたまに番号を振っている場合、その番号も修正してくださいね。

2-4. Contact Form 7 の内部設定(メールの送信に関するの設定など)を行う

この項目は重要なので、しっかり確認して設定しましょう!

2-4-1. フォームを入力した方への確認メールを設定する

「2-2-4. Contact Form 7 の フォームタグ「名前」要素について」で、1つ1つに名前を付けましたが、ここで使うことになります。

「メールタブ」をクリックすると、「メール」の設定画面が表示されます。以下のように設定していきましょう!

  • 送信先
    メールアドレスに該当するメールタグをコピペします。この記事の例では、[your-email]です。
  • 送信元
    問い合わせした人へメールが送信されますが、その送信元アドレスを設定します。「表示名<実際のアドレス>」のように入力します。
    ※WordPressと同じドメインである必要があります。
  • 題名
    問い合わせした人へのメールのタイトル(題名)です。
  • 追加ヘッダー
    例えば、「送信元」とは違うメールアドレスに返信して欲しい時は「Reply-To:test@example.com」のように入力します。
    ※WordPressと違うドメインでも問題ありません。

 

  • メッセージ本文

  • ファイル添付
    例えば、資料請求フォームを作って自動的に資料を送りたい時は、ここにファイルを添付しておきます。問い合わせフォームでは使用しません。

最後に、忘れずに保存ボタンを押してください!

 

2-4-2. あなた宛てのメールを設定する

あなたにも通知が行くよう、あなた宛てのメールをセットします。

まず、「メール(2)を使用」にチェックを入れてください。

  • 送信先
    あなたのメールアドレスを入力します。
  • 送信元
    あなたのメールアドレスを入力します。※WordPressと同じドメインである必要があります。
  • 題名
    あなたへのメールのタイトル(題名)です。
  • 追加ヘッダー
    問い合わせした方に返信できるよう「 Reply-To: [your-email] 」を必ず入力します。
    例えば、対応履歴を誰かに共有したい場合は、「CC:test@example.com」のように入力します。(BCCでもOK)
  • メッセージ本文

やはり最後に、忘れずに保存ボタンを押してください!

送信テストは最後に行います。

 

2-5. CSSをコピーし、あなたのWordPressの「追加CSS」欄に貼る

今回の例では、入力フォームの「必須」「任意」という言葉にデザインを入れています。

このデザイン(CSS)を登録しましょう。

WordPressのメニュー > 外観 > カスタマイズ をクリックします。

 

数秒かかって、左側のようなメニューが表示されますので、「追加CSS」をクリックします。

CSSの入力欄が表示されますので、以下のCSSをコピペし、上部の「公開」ボタンをクリックします。

コピペ用CSSはこちらです。

2-6. 「固定ページ」で問い合わせページを作成する

まず、作成したお問い合わせフォームの「ショートコード」をコピーしましょう。

WordPressのメニュー > お問い合わせ > コンタクトフォーム の順にクリックし、先ほど作成したお問い合わせフォームのショートコードをコピーします。

 

次に、お問い合わせフォームを表示するページを作成しましょう。

WordPressのメニュー > 固定ページ > 新規追加 をクリックし、以下のように作成します。

※すでにお問い合わせページが作成されている場合は、ページ一覧で「編集」をクリックします。

contactform7_05_問い合わせページ作成

① 左側メニューの固定ページ > 新規追加をクリックします。

② タイトルは「お問い合わせ」などにしてください。

③ タイトル入力後、マウスで別の場所をクリックするとパーマリンクが表示されますので、「contact」などとしてください。

④ さきほどコピーしたショートコードを、本文に貼り付けてください。

⑤ 最後に公開(更新)をクリックします。

これでお問い合わせページは完成です。

2-7. 公開画面を確認し、カスタマイズが想定通りできているか、送信できるかどうかを確認する

2-7-1. 公開画面の確認

お問い合わせページを作成したら「プレビュー(以下の画像では「変更をプレビュー」)」をクリックすると、別のタブで公開画面を表示することができます。

 

以下のように、「必須」や「任意」にデザインが入っていれば、CSSの設定は問題ありません。

2-7-2. 送信テスト

次に、フォームに入力し、テスト送信してみましょう。

ここに注意!

メールアドレスは、実際に送受信できるメールアドレスを使ってください。

  1. 全ての項目を入力し、送信できるか。
  2. 必須項目を入力して、任意項目を入力しない状態で送信できるか。
  3. 全てを入力せずに「内容を確認して送信」ボタンをクリックし、必須項目のみエラーが出るか。
    ※「お問い合わせ内容の選択」は仕様上、選択していなくてもエラーがでません。
  4. メールアドレスやURL、電話番号に、他の情報を入力してエラーがでるか。
  5. 問い合わせした人に送信される自動返信メールは届いているか。誤字脱字、間違いがないか。
  6. あなたに送信されるメールは届いているか。誤字脱字、間違いがないか。

何度かテストし、問題がないかどうか確認しましょう。

4. まとめ

問題なく設定できたでしょうか?

Webサイトは、基本的にあなたから読者に対して一方的に情報を伝えるだけなのですが、お問い合わせフォームを設置することによって双方向のやり取りができるようになります。

あなたにとって満たすべき「需要」を教えてくれる大事な情報源ですので、しっかり準備して公開しましょう。

なお「問い合わせしたのに返信がない」ことは、読者の満足度を大幅に下げる結果になります。「問い合わせがあったら必ず返信する」というルールは、何が何でも守るようにしましょうね!

\参考になったらポチッとお願いします!/

-ブログのつくり方
-, ,

© 2020 インターネットビジネスラボ