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

CGIなどで追加するヘッダ情報を指定ページのみに出力

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

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

コメントを残す

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

関連記事

WordPressで現在のページ表示に使用しているテンプレートをすべて知る

WordPressでは、投稿タイプに応じてデフォルトの構成テンプレートが適用されます。 ただし、プラ […]

「トップに戻る」ボタンでスマホでのユーザビリティアップ!

ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビ […]

ページ内目次を見出しタグから自動生成

Wikiをはじめ、記事の先頭にリストの目次(インデックス)をつけているサイトを目にしたことがあると思 […]

マルチサイト構築方法まとめ

WordPressバージョン3.0以降に搭載されたマルチサイト機能の構築方法についてまとめます。 マ […]