【PHP】WordPressで問い合わせフォームを自作する

WordPressで問い合わせフォームを自作する

WordPressで作成したホームページやブログに、問い合わせフォームを設置する機会は非常に多いです。問い合わせフォームを設置する方法は、大きく分けて2つあります。

1. WordPressのプラグインを利用する
2. 問い合わせフォーム自体を自作する

問い合わせフォームを自作する場合、見た目はHTMLとCSSで簡単に作ることが出来ても、自動返信メールを送信したり、入力エラー時にオートスクロールさせたりなど、機能面を充実させることは意外と難しいです。そのため、手軽に問い合わせフォームを作成できるプラグインが利用されることも多いです。

しかしながら、PHPの知識が少しあれば自作することは可能です。問い合わせフォーム1つだけのために、新たにプラグインを入れる必要もありません。

この記事では、本サイトの問い合わせフォームを例に、オリジナルの問い合わせフォームの作成方法について解説しています。

問い合わせフォームの作成方法

問い合わせフォームの作成の流れは、以下の通りです。

• HTML、CSSでベースを作成
• PHPで基本機能を作成
• 自分のサイト仕様にカスタマイズ

以降、順を追って見ていきます。

HTML、CSSでベースを作成 ＆ PHPで基本機能を作成

最初の2つ「HTML、CSSでベースを作成」「PHPで基本機能を作成」に関しては、別記事でまとめています。

自分のサイト仕様にカスタマイズ

本サイトで仕様するにあたり、上記の参考サイトの問い合わせフォームを以下のようにアレンジしています。

• 問い合わせフォームのPHPファイルをindex.phpから独立させる
• 入力内容確認時や入力エラー発生時にオートスクロールさせる

問い合わせフォームのPHPファイルをindex.phpから独立させる

index.phpのファイルに問い合わせフォームの機能を司るコードを直書きすると、HTML要素の記述もあるため、index.phpのファイルの中身が複雑かつ膨大になってしまいます。

メンテナンス性を考慮し、問い合わせフォームの機能を司るコードはform.phpという別ファイルにまとめ、それをindex.phpに読み込ませることでこの問題を解決します。

index.phpにform.phpを読み込ませるためには、以下のコードをindex.phpに記述します。記述した箇所にform.phpの内容が代入されます。

<?php require('php/form.php'); ?>

各ファイルのディレクトリ構造は、画像の通りです。

入力内容確認時や入力エラー発生時にオートスクロールさせる

参考サイトのように、ページのトップに問い合わせフォームがあれば問題ないですが、本サイトのようにページの下部に問い合わせフォームがあった場合、入力内容確認時や入力エラー発生時、入力内容送信時など、ページ遷移が発生したタイミングでページトップに戻ってしまいます。

これでは、ユーザーは入力内容の確認やエラーの修正を行うために、ページ遷移の度に下部までスクロールしなければならず、非常に不親切です。

それを防ぐために、問い合わせフォームの位置を記憶し、ページ遷移してもその位置まで自動でスクロールする機能を追加します。

ページ遷移時のオートスクロールの実装

初めに処理の流れを整理します。

• 問い合わせフォームの位置（座標）を受け渡しするためのinputタグを用意
• 送信ボタンが押されたら、それに座標データを与える
• 座標データが他の入力値とともにサーバに送信される
• ページ遷移後に座標データを使ってスクロールさせる

なお、送信ボタンが押された時の処理にはJavaScriptを使用します。

座標データの受け渡しの用意

index.phpのformタグ内に、問い合わせフォームの位置（座標）を受け渡しするためのinputタグを用意します。これはユーザーからは見える必要がないため、type=”hidden”としています。

<input type="hidden" name="pos-save" value="0" class="posSave">

重要なのは、value属性です。後でここに座標データを代入します。初めはスクロールの必要がないため、“座標0 = ページトップ”とします。

送信ボタンが押された時の処理

JavaScriptファイルを用意（ここではscript.jsとする）し、先ほど作成した座標を受け渡しするinputタグのvalue属性に、座標データを代入する関数を作ります。
※jQuery使用

function contactBtn() {
  $('.posSave').val( $('form').offset().top);
}

そして、index.phpのformタグ内の送信ボタンに、onclick属性を与え、ボタンクリック時に上記関数を実行するよう設定します。

<input type="submit" value="送信" onclick="contactBtn()">

送信された座標データの処理

送信された座標データを変数（今回は$pos）に格納するため、form.phpを編集します。前半部分は参考サイトより拝借しています。

$esc = array();
if(!empty($_POST)) {
  foreach($_POST as $key => $value) {
    $esc[$key] = htmlspecialchars($value, ENT_QUOTES);
  }
}

$pos = 0;
if (!empty($esc['pos-save'])) {
  $pos = $esc['pos-save'];
}

ページ遷移後に座標データを使ってスクロールさせる

座標データを使って、ページ遷移後にオートスクロールさせるため、index.phpのheadタグ内に処理を記述します。

<script>
window.onload = function() {
  window.scrollTo(0, <?php echo $pos; ?>);
}
</script>

ページ読み込み時に指定座標までスクロールさせる処理ですが、座標データを$posに格納しているので、それを使用しています。送信ボタンが押されていなければ $pos = 0なので、ページ読み込み時はページトップが表示されます。

おわりに

もし、本記事に関する疑問や問い合わせフォームの作成依頼がございましたら、お気軽にご連絡ください！

問い合わせフォームはこちら