カテゴリー
WordPressカスタマイズ

メールフォームプロ CGI を WordPress に設置

WordPress のフォームについて、定番の Contact Form7をはじめ、いろいろとプラグインにこと欠きません。
しかし、静的な HTML サイトから移行してきた方は使い慣れた CGI フォームを実装したいという場合も多いようです。

ということで、今回は人気のメールフォームプロを WordPress に実装してみます。

mailformpro CGI

例としてあげてるのはメールフォームプロ(mailformpro3.2.0)です。
この CGI は HTML のサイト構築で使ったことがあるのですが、基本的なフォーム機能はもちろんのこと、住所自動入力やオリジナルの送信完了画面などかなり高機能です。
フリーのメールフォーム CGI としてはかなり人気のあるプログラムでデザインもそのまま使ってもかなりイケてます。

メールフォームプロ自体のダウンロードと詳細情報はSYNCK GRAPHICAさんのサイトをご覧ください。

WordPress 用にカスタマイズ

CGI のプログラムは下記のパスにアップするとします。

http://example.com/cgi/mailformpro/

WordPress で使う!という記事ですので、ここでは基本のサンプルファイルが動作したという条件で説明をしていきます。

カスタマイズといっても、それほど敷居の高いものではありません。基本は使っているテーマのヘッダ(header.php)にメールフォームプロに必要な CSS と JS ライブラリを読み込むための記述を加えるだけです。

<!--[メールフォームプロ・参照ファイルここから]-->
<script charset="UTF-8" type="text/javascript" src="commons/jQuery.js"></script><script charset="UTF-8" type="text/javascript" src="commons/mfp.lang.js"></script>
<script charset="UTF-8" type="text/javascript" src="commons/mfp.extensions.js"></script><script charset="UTF-8" type="text/javascript" src="commons/mailform.js"></script>
<script id="mfp2zip" charset="UTF-8" type="text/javascript" src="postcodes/get.cgi"></script>
<!--[メールフォームプロ・参照ファイルここまで]-->

サンプルが何種類か用意されているので、使用したいタイプのサンプルファイルからコピーすればよいと思います。(ヘッダは同じだと思いますが) 注意として相対パスになっているので、自分のサイト用に絶対パスに書き換えます。厳密には相対パスでも構いませんが、 CMS に組み込む場合は絶対パスの方が分かりやすいでしょう。
例えば、 example.com/cgi/に mailformpro を設置するのであればこんな感じです。

<!--[メールフォームプロ・参照ファイルここから]-->
<script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/jQuery.js"></script>
<script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.lang.js"></script><script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mfp.extensions.js"></script>
<script charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/commons/mailform.js"></script><script id="mfp2zip" charset="UTF-8" type="text/javascript" src="http://example.com/cgi/mailformpro/postcodes/get.cgi"></script>
<!--[メールフォームプロ・参照ファイルここまで]-->

mailform.js にも相対パスが含まれているので変更が必要かもしれません。
あとはフォームの HTML 自体を自分の必要な項目にカスタマイズして投稿や固定ページにコピーすればよいのですが、ここにも相対パスが登場するので、適時絶対パスに書き換えます。
専用のページテンプレート(form.php)を作成して、実際の固定ページで適用す方がよいかもしれません。

これでメールフォームプロ CGI をへの設置が完了。
順を追っていけば、簡単に設置できます。
プラグインに飽き足らず、高機能なフォームが必要な場合はお勧めです!
ただし、このヘッダ追記は実際はフォーム設置ページにしか必要ありません。
本来は対象ページにのみ出力させるべきでしょう。
こちらについては次の記事を参考にしてください。

ページ毎のスクリプトなど追加するヘッダー情報を指定ページのみに出力

このメールフォームプロでの CSV ファイルは保存パスを指定できるので、項目が同じなら複数のフォームデータを1ファイルにできます。

今回は静的 HTML で大人気であったプログラムということでメールフォームプロを組み込んでみましたが、実際には PHP メールのプログラムを使う方がいろんな意味で使い勝手がよいかもしれません。

WordPress の定番プラグインの Contact Form7などはセキュリティなども含め、非の打ちどころのないメールフォームですので、ほんとうにメールフォームプロを組み込む必要があるのかをよく考察してみることをお勧めします。
profile image

執筆:R3098

WEB サービス構築・監修が生業です。 WordPress 関連では Aurora Heatmap などプラグイン開発も行っています。悩めるサイト運営者の無料相談受付けます!

コメントを残す

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

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー および 利用規約 に適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。