WordPressプラグイン版のレスポンシブ・メールフォームの設定方法

WordPress公式ディレクトリ
WordPressプラグイン版・レスポンシブメールフォームの設定方法を解説します。
このプラグインは2016年4月19日に公式ディレクトリで公開されました。
現在の最新バージョンは2016年9月5日公開の1.4です。(通常版のバージョン2.3と3.0の中間のような感じになります)
更新履歴はこのページの一番下にあります。

プラグイン版は通常版と機能面では同じですが、WordPressの管理画面上ですべての設定が行えるのでconfig.phpの直接編集をする必要がなくなり、導入の敷居はかなり下がりました。
「UTF-8 BOMなしって何だ?」って人でもすぐに使えます。

プラグイン化したことでより多くの人に使ってもらうことができれば幸いです。
いずれは多言語化対応もするかもしれません。

WordPressプラグイン版のレスポンシブ・メールフォームのサンプル
https://www.1-firststep.com/responsive-mailform-wordpress
WordPressプラグイン版のレスポンシブ・メールフォームの公式ディレクトリページ
https://wordpress.org/plugins/responsive-mailform/

1、プラグインをインストールし、有効化する

WordPress管理画面にある左メニューから「プラグイン」→「新規追加」を選択し、そこにある検索フォームに「responsive mailform」と入力します。
すると以下のように一番目に出てくるはずです。
プラグインの検索
慣れている方であれば上記の公式ディレクトリページからzipファイルとしてダウンロードし、FTPソフトを使ってpluginsフォルダに直接アップロードしても問題ありません。

インストールが完了したら、プラグインを有効化します。
プラグインの有効化

有効化が完了すると、左メニューの「設定」内にレスポンシブ・メールフォームの設定ページが出現します。
レスポンシブ・メールフォームの設定

(必須)自分のメールアドレスや名前の設定

まずは最低限必要な設定だけをし、メールフォームが正しく画面に表示され、メールが正常に送信されるかの動作確認を行うことをおすすめします。
任意の設定項目に関してはその動作確認ができた後に行うほうが、万が一エラーが発生した際に原因の特定がしやすくなるのでベターでしょう。

最初に必須項目の設定を行います。
必須項目の設定
自分のメールアドレス」には、メールを受け取るための自分のメールアドレスを記入します。

メールの差出人名に表示される自分の名前」には、自分の名前または屋号などを記入しておくとよいでしょう。

サンクスページのURL」には、送信完了後に表示させるページのURLを記入します。
サンクスページは固定ページや投稿ページなどで作成すればOKです。もちろんカスタム投稿ページでも問題ありません。

初期状態ではこのサイトのトップページ(https://www.1-firststep.com/)が記入されています。
まだサンクスページを用意していない場合は、このままでも問題ありません。正常にメールが送信された場合に上記URLのページが表示されることになります。(下画像参照)
このサイトのトップページ

(だいたい必須)相手に届く自動返信メールの内容を編集する

相手に届く自動返信メールの内容」を編集します。
相手に届くメールの内容
この項目のすぐ上にある「自分に届くメールの内容」は編集が必須じゃないのにこの項目が編集必須な理由は、この自動返信メールの内容の最下部に屋号の記述があるからです。(下画像参照)

ここを編集してください。(それ以外の文面の編集はメール送信の動作確認ができた後のほうがベターでしょう)
屋号の記述

これまでの必須項目の設定が完了したら、「設定を保存」します。
設定を保存

メールフォームを設置するページにHTMLを貼り付ける

設定の保存が完了したら、メールフォームのHTMLコードをすべてコピーし、
メールフォームのHTMLコード

メールフォームを設置する固定ページや投稿ページなどの編集画面で「テキスト」エディタのタブを押して選択し、
テキストエディタのタブ

先ほどコピーしておいた内容を貼り付けます。
HTMLを貼り付ける

そのページを表示させた際にメールフォームが表示されていればOKです。
フォームの表示
必須の項目に適当に入力して送信ができるかどうかの動作確認をしてみましょう。

既知の問題点

1、(解決済み)公開ページのHTML内に「ご希望の日時」の欄がある状態で、設定画面の「日時選択のカレンダー補助機能を使うかどうか」をオフにするとエラーが発生する。
公開ページのHTML内に「ご希望の日時」の欄がある状態で、WordPress管理画面にある設定ページの「日時選択のカレンダー補助機能を使うかどうか」をオフにすると、エラーが発生します。
公開ページのHTML内に「ご希望の日時」の欄がない場合には、上記設定をオン・オフにかかわらずこのエラーは発生しません。
この問題点は次回アップデートで修正予定です。
2、(解決済み)入力されているふりがなが送信者・受信者に届くメールには記載されていない。
ふりがな自動入力ライブラリが正常に動作してふりがなの欄に入力があっても、送信者・受信者に届くメールにはふりがなが記載されていない不具合。
これは次回アップデートで修正予定です。

デザインのカスタマイズなどについて

基本的なカスタマイズに関しては以下のページで解説しています。
WordPressプラグイン版のバージョン1.4は通常版のバージョン2.3や3.0と機能や基本構造がだいたい同じになります。

  1. レスポンシブ メールフォームのカスタマイズ方法や詳細な解説
  2. メールフォームのデザイン変更やサイト組み込みの際のサイズの説明
  3. メールフォームのスパム対策機能の解説

プラグインを有効化した際に自動挿入されるコードについて

このプラグインを有効化すると、各機能に関するファイルが公開されているすべてのページに自動挿入されます。
それらのコードの役割は以下のページで解説していますので参考にしてみてください。

  1. WordPressプラグイン版のレスポンシブ・メールフォームで自動挿入されるコードの解説
  2. プラグインによって挿入されるCSSファイルの読み込みを特定のページだけにする方法
  3. プラグインによって挿入されるJavaScriptファイルの読み込みを削除する方法

アップデート履歴

2016/04/19 バージョン1.0
  • レスポンシブ メールフォーム for WordPress公開
2016/04/21 バージョン1.1
  • jQueryのコンフリクトに関する不具合を修正。
2016/06/06 バージョン1.2
  • 日時選択のカレンダー補助機能に関する不具合を修正。
2016/07/12 バージョン1.3
  • PHPのバージョンが上がった際にmysql_real_escape_string関数によって発生する不具合を修正。
    (現在、このサイトにあるサンプルではPHP 5.6、WordPress 4.5.3以降で動作しています。)
  • その他、微細な修正。
2016/09/05 バージョン1.4

サポートBBS

サイト内を検索
サイト運用事例
ダウンロード

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+