メールフォームプロをWordPressで利用する際の設置方法と注意点

mailform_wordpress

こんにちは、メールフォームプロが大好きな金田です。
ワードプレスでフォームを設ける時といえば、「Contact Form 7」ですよね。

作者が日本人ということもあり、日本語対応のプラグインでサイトに簡単にフォームが導入できます。

Contact Form 7

 

しかし、入力内容のチェックなどは「メールフォームプロ(CGI)」の方が魅力的です。

そんなメールフォームプロ好きの方がワードプレスにフォームを設ける際の設置方法と注意点です。

はじめてメールフォームを設置するかたはこちらの記事を参照してください。
「メールフォームプロ 4の設置方法」
「メールフォームプロのHTMLコーディングについて」

WordPressへ設置する際の注意点

固定ページのスラッグと、メールフォームプロのファイルを上げるパスが同じだと「403エラー(閲覧禁止)」が発生するようです。
通常、403エラーになるとエラー画面が表示されるのですが、表示は問題なく行われていました。
下記は、Googleウェブマスターツールのエラー通知です。Google先生のおかげて設定ミスに気付きました。

403エラーの通知

修正前のステータスコード

念のため、ステータスコードをチェックするツールでチェックしてみました。
英語のサイトですが、チェックしたいページのURLを入力するとステータスコードを調べることができます。

View HTTP Request and Response Header

チェックしてみましたが、やはり「403 Forbidden」。エラーになっています。

修正前のステータスコード

.htaccessをいじったりしましたが、原因は固定ページのスラッグとメールフォームプロのファイルをアップロードしているフォルダ名が同じだからのようでした。

403エラーになる構成

WordPressサイトのURL:www.example.jp
フォームのある固定ページのURL:www.example.jp/contact/
メールフォームプロのファイルのURL:www.example.jp/contact/

そこで、メールフォームプロのファイルをアップロードするディレクトリ名を変更しました。

WordPressサイトのURL:www.example.jp
フォームのある固定ページのURL:www.example.jp/contact/
メールフォームプロのファイルのURL:www.example.jp/contact_file/

修正後のステータスコード

ステータスコードをチェックしたところ「200」(正常)になりました。

ステータスコード200

403エラーが通知された場合の対処

今回は、ウェブマスターツールからのお知らせで気付いたためごめんなさいをしておきます。

Googleウェブマスターツールの「Fetch as Google」を利用します。修正したURLを入力し「取得」をクリックします。

Fetch as Google

取得後、「インデックスに送信」をクリックします。

インデックスに送信

今回は、特定ページのみのエラーのため「このURLのみをクロールする」を選択し「送信」します。

送信方法の選択

 

WordPressへの設置方法

通常のHTMLへの設置方法をまず確認しておいてください。

「メールフォームプロ 4の設置方法」

「メールフォームプロのHTMLコーディングについて」

この記事では、WordPress特有のCSSの読み込みについてご説明します。

メールフォームプロのCSSの読み込み

「functions.php」の中から、サイトのスタイルシートを読み込んでいる個所を探します。
「wp_enqueue_style」で検索すると該当箇所が探せます。

(例:標準テーマ「twenty-twelve」の場合)

    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

サイトのスタイルシートの上に、メールフォームプロのスタイルシートの読み込みコードを追記します。
スタイルシートのパスは適宜修正してください。

まずは、すべてのページでメールフォームプロのCSSを読み込む設定です。
よくわからない場合は、こちらのコードを使用してください。

//すべてのページで読み込みたい場合
wp_enqueue_style( 'mailform-style', 'http://www.example.jp/contact_file/mfp.statics/mailformpro.css' );
//テーマのスタイルシート(例)
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

次に、メールフォームプロを設置した固定ページでのみ読み込む設定です。
こちらの方が、若干パフォーマンスがよくなると思います。

//メールフォームがある固定ページでのみ読み込む場合は条件分岐を使います。
//ここではページIDが「5」の時のみ読み込むようにします。ページスラッグでもタイトルでもOK
if(is_page('5')) {
wp_enqueue_style( 'mailform-style', 'http://www.example.jp/contact_file/mfp.statics/mailformpro.css' );
}
//テーマのスタイルシート(例)
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

CSSの読み込みは以上でOKです。

固定ページへの記述内容はHTMLの場合は同じです。CSS以外の必要事項を記述します。

例:

<form id="mailformpro" action="/contact_file/mailformpro/mailformpro.cgi" method="POST">
    <dl>
        <dt class="mfp"><span class="must">必須</span>お名前</dt></dl>
        <dd class="mfp"><input name="名前" required="required" size="30" type="text" data-kana="ナマエ" /></dd>
    </dl>
    <button type="submit" data-disabled="入力内容にエラーがあります">送信する</button>
</form>
<script id="mfpjs" src="/contact_file/mailformpro/mailformpro.cgi" type="text/javascript" charset="UTF-8"></script>

 さいごに

メールフォームプロは高機能ですが、コンタクトフォーム7に比べて設置のハードルは高いのかもしれません。

いつしか、メールフォームプロのWordPress用プラグインが出たらすべて解決です。

コメントを残す

メールアドレスが公開されることはありません。