カテゴリー
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 の認証期間が終了しました。ページを再読み込みしてください。