ブログ等にお問い合わせ機能は必須でしょう。閲覧者からのアドバイスをもらえたり、場合によっては会社から案件を依頼されたりなど、活用することでブログを成長させることができます。
WordPressにおいてはそんなお問い合わせ機能を簡単に実装することができる「Contact Form 7」というプラグインがありますが、この度、様々な理由からこのプラグインを削除して自作で作ることに決めましたので、その作り方を軽く紹介したいと思います。
なお、プログラミングの知識が必要だったりするのでご注意ください。
Contact Form 7について
まず最初に、BableTechでも長い間愛用していた「Contact Form 7」というプラグインについて紹介していきます。
機能
まずは機能についてです。人気なプラグインだけあって、様々な機能が盛り込まれています。
お問い合わせフォームをどこにでも設置
メールアドレスや件名、メッセージ本文などを入力してお問い合わせを行うことができるフォームを、ショートコード等でどこにでも簡単に設置することができます。この手軽さがまた良いですよね。
フォームを自由自在にカスタマイズ
メールアドレス欄を作ったりセレクトボックスやラジオボタンを設置したり、さらには規約に同意するかどうかのチェックボタンも実装できたりします。
また、ファイルの送信もこのフォームから行えるので、写真とかを受け付けることもでき、非常に便利ですね。
メールに自動送信
お問い合わせ内容を指定のメールアドレスに自動送信するように設定できますし、お問い合わせした本人にも「お問い合わせありがとうございます」みたいなメールを自動で送信することができます。
そのメールのテンプレートも自分で設定することができたりと、非常に柔軟性の高いプラグインです。
消したいと感じた理由
以上のようにとても素晴らしいプラグインなのですが、分け合って消したいと感じました。
重い
プラグインというものは基本的にPHPファイルで動いていて、ページが読み込まれるたびにこれらのPHPファイルもすべて読み込まれるようになっているので、プラグインが増えるとサイトがだんだんと重くなっていきます。
そんな中でもContact Form 7は結構高機能な分比較的重たいプラグインです。便利なのですが、ページの表示速度に影響が出てしまうのが本当に嫌なので、消したくなりました。
そんな機能を使わない
サイトのあらゆるところにいろいろなフォームを設置したい人だったらまだしも、私に関してはたったの一か所「お問合せページ」にのみフォームを設置したかっただけなので、プラグインで管理するほどのものでもないです。
また、フォームのデザインについても一度作ってしまえばもう変えることはないと思いますので柔軟にデザインを変えれるというメリットは享受できなくなります。
メールを見ない
自動でお問い合わせ内容をメールに送信してくれるのは便利なのですが、普段からあまりメールを見ないので正直WordPressの管理画面自体にお問い合わせ内容が表示されれば良いなと思って、このプラグインを消したくなりました。(もしかしたらそういう風にできる設定があるのかもしれないけど)
スパムが多い
世界中のサイトがContact Form 7を愛用しているからか、多分Contact Form 7がスパムメールの標的になっていて、画像認証とかを入れてしっかり対策しないとBOTによくわからない内容のお問い合わせを自動送信されてしまうんですよね。
そして四六時中怪しい業者からのメールが絶えないです。 そこで、自分でフォームを作ってしまえばそういったスパムを回避することができるのではないかと思ったので作ってみることにしました。
自分でお問い合わせフォームを作る
それでは早速自分でお問い合わせフォームを作っていきたいと思います。HTMLやJavaScript、PHPの知識などが多少必要にはなってきますが、コピペして実装できるくらいのレベルです。
HTMLでフォームを作成
まずはHTMLを使ってフォームを作成します。WordPressでお問い合わせ用の固定ページを作って、その中に「カスタムHTML」や「コードエディター」などで記述するだけですね。
<style>
div.contact_form {
padding: 10px;
}
div.contact_form p {
line-height: 2.5;
}
div.contact_form p input[type="submit"] {
display: block;
margin: auto;
width: 250px;
height: 40px;
}
</style>
<div class="contact_form">
<p>あなたのメールアドレス(又は電話番号等の連絡先):<br>
<input id="address" type="text"></p>
<p>お問い合わせ本文:<br>
<textarea id="contact_content"></textarea></p>
<p><input type="submit" onclick="contact_submit()"></p></div>
めちゃめちゃシンプルです。input要素で連絡先入力ボックスを、そしてtextarea要素でお問い合わせ本文の入力ボックスを設置しています。 そして最後にinput要素でお問い合わせの送信ボタンを作っています。 ここでは単純に、onclick属性に関数を指定しています。
JavaScriptでお問い合わせ送信スクリプトの作成
続いて、フォームの値を取得してPHPにリクエストを送るプログラムを作ります。
function contact_submit(){
const address = jQuery("#address").val();
const content = jQuery("#contact_content").val();
jQuery.ajax({
async: true,
type: "POST",
url: "contact.php", //PHPプログラムのURL
data: {
"mode": "submit_contact",
"address": address,
"content":content
}
}).done(function () {
alert("お問い合わせが正常に送信されました。返信までしばらくお待ちください");
window.location.href = "https://bablishe.com/"; //お問合せ完了時にトップページに遷移
});
}
jQueryのAjax通信を使っています。非常にシンプルです。指定されたPHPにフォームのデータを送信して、送信が完了したらトップページに遷移されるという流れですね。
データベースを構築
続いてお問い合わせデータを補完するためのデータベースを構築します。ここでは例でMySQLを使うのですが、正直データベースサーバを使うほどのデータではないので、JSON形式で補完するとかでも良さそうです。
MySQLで適当なデータベースを用意しつつ、次のようにしてテーブルを作ります。
CREATE TABLE `contacts` (
`id` int(8) NOT NULL,
`submitted_date` datetime NOT NULL,
`address` varchar(50) DEFAULT NULL,
`content` text DEFAULT NULL,
PRIMARY KEY (`id`)
);
これはあくまでも一例ですが、このようにして日付のカラムも作った方がより便利になるかと思います。
PHPプログラムを作成
続いてJavaScriptから送信されたお問い合わせデータを受け取りつつそれをデータベースに格納するPHPプログラムを作ります。ここも非常に簡単です。
$mode = $_POST["mode"];
if($mode == "submit_contact"){
//データベースに接続
$db = mysqli_connect('localhost', 'ユーザ名', 'パスワード', 'データベース名');
$address = $_POST["address"];
$content = $_POST["content"];
$address = mysqli_real_escape_string($db,$address);
$content = mysqli_real_escape_string($db,$content);
$query = "INSERT INTO contacts(id,submitted_date,address,content) SELECT MAX(id)+1,CURRENT_TIMESTAMP,'{$address}','{$content}' FROM contacts";
$result = mysqli_query($db,$query);
}
POSTで送信されたデータをデータベースに格納しています。それだけです。
お問い合わせ内容表示ページを作成
データベースに格納できたところでそれを表示する場所が無いと確認できません。 まぁデータベースに直接アクセスして確認したり、直接JSONファイルを確認するのでも良いかもしれませんが、ここではプラグインを作って左メニューからアクセスできるようにします。
プラグインの作り方については以下のページを参考にしてください。
【意外に簡単】WordPressで自作プラグインを導入してみる【PHP】
そしてお問い合わせ内容表示ページを定義します。
add_action('admin_menu', function(){
add_menu_page( //メインページ
'BableAdmin'
, 'BableAdmin'
, 'manage_options'
, 'bable_main' //スラッグ
, ''
, 'dashicons-admin-generic'
, 0
);
add_submenu_page( //お問い合わせページ
'bable_main' // 親メニューのスラッグ
, 'お問い合わせ'
, 'お問い合わせ'
, 'manage_options'
, 'contact' //スラッグ
, 'show_contact' //お問い合わせ内容を表示するための関数
);
});
function show_contact(){
?>
<style>
#contact_here ul li{
background-color: #80808030;
padding: 3px 10px 3px 10px;
}
</style>
<script>
jQuery(function(){
jQuery.ajax({
async: true,
type: "POST",
url: "contact.php",
data: {
"mode": "get_contact_month"
}
}).done(function (data) {
jQuery("div#contact_here ul").html(data);
});
});
</script>
<h2>過去1か月のお問い合わせ</h2>
<div id="contact_here"><ul></ul></div>
<?php
}
上のようにお問い合わせ表示ページを作成し、その関数の中に適当にスクリプトを埋め込みます。そしてお問い合わせを取得するためのPHPプログラムも同時に作ります。
先ほどのPHPファイルに追記しましょう。
$mode = $_POST["mode"];
if($mode == "submit_contact"){
$db = mysqli_connect('localhost', 'ユーザ名', 'パスワード', 'データベース名');
$address = $_POST["address"];
$content = $_POST["content"];
$address = mysqli_real_escape_string($db,$address);
$content = mysqli_real_escape_string($db,$content);
$query = "INSERT INTO contacts(id,submitted_date,address,content) SELECT MAX(id)+1,CURRENT_TIMESTAMP,'{$address}','{$content}' FROM contacts";
$result = mysqli_query($db,$query);
}elseif($mode == "get_contact_month"){
$db = mysqli_connect('localhost', 'ユーザ名', 'パスワード', 'データベース名');
$query = "SELECT id,submitted_date,address,content FROM contacts WHERE DATE_SUB(CURRENT_TIMESTAMP,INTERVAL 30 DAY) < submitted_date ORDER BY submitted_date DESC";
$contact_DOM = "";
if($result = mysqli_query($db,$query)){
foreach($result as $row){
$contact_DOM .= "<li data-id='$row[id]'><p>$row[submitted_date] アドレス:$row[address]</p><p>本文:$row[content]</p></li>";
}
}
echo $contact_DOM;
}
これで完成です。 なお、データベースにお問い合わせを登録するときに、すでにあるお問い合わせのうち最も大きいID+1を次のIDとして登録しているので、最初になんでもいいので手動でダミーのお問い合わせを1件だけ作っておかないとうまく動作しないかもしれないです(他に良い方法がありそうですが)

こんな感じでお問い合わせ内容を確認できるようになりました。MySQL等を使っていればおそらく数百万件くらいまでのお問い合わせまでなら全然問題なく対応できるかと思いますが、増えすぎたときは適宜古いものを削除するなりの工夫は必要そうですね。
ちょっとプログラミングの知識は必要でしたが、この自作お問い合わせ機能が実装できればContact Form 7等のプラグインを使うよりページ表示速度をより速めることができるようになりますし、スパム対策になります。
実際運用開始してから数週間がたちますが、人以外からのお問い合わせは来ておらず、しっかりと対策できています。
BableTechではこのように、WordPressで作ったサイトのカスタマイズ方法なども発信していきたいと思いますのでよろしくお願いします。