ワードプレスサイトに自作のお問い合わせ機能を実装

この記事では、ワードプレスサイトに自作のお問い合わせ機能を実装する方法を解説いたします。

ダウンロードしたファイルをサーバーにアップするだけで、下記の機能を備えたお問い合わせ機能を実装できます。ファイルのコードを編集するとオリジナルのお問い合わせ機能を簡単に実装できます。

①未入力項目の確認

②入力内容の確認ページ

③お問い合わせ完了後のサンクスページ

④ユーザーへのお問い合わせ内容のメール送信

⑤サイト運営者へのお問い合わせ内容のメール送信

お問い合わせ機能を実装するにあたっては、サーバーにファイルをアップロードできる知識が必要です。私は、さくらインターネットのサーバーを利用していますので、解説画像等はさくらインターネットの環境のものになりますが、各々の環境の方法で、実装してください。

アップロードするファイルは、記事を購入していただくことで閲覧できます。

各ファイルのコードを記述しますので、コピペしてファイルを作成して下さい。

アップロードするファイル

下記の6つのファイルを作成して、お使いのサーバーにアップロードします。

①contact-index.php

ベースとなるファイルです。お問い合わせ完了後に送信されるメールに表示される名前とメールアドレスを設定したり、お使いのテーマに合わせたヘッダー、フッターの読込を設定します。

②contact-input.php

お問い合わせフォームの内容を記述しています。

③contact-check.php

お問い合わせフォームの入力項目のエラーチェックをおこなうファイルです。

④contact-confirm.php

お問い合わせ内容の確認ページのファイルです。

⑤contact-completion.php

お問い合わせ完了のサンクスページです。

⑥contact-sendmail.php

お問い合わせ完了後、メールを送信するコードを記述したファイルです。

固定ページでお問い合わせフォームを作成

ワードプレス管理画面から、固定ページの新規作成でページを作成しテンプレートをcontact-index、URLスラッグをcontactに設定してください。

テンプレートをcontact-indexに設定することにより、上のようなお問い合わせフォームが表示されます。

項目を入力して、送信するをクリックすると、確認ページに遷移します。

確認ページで送信するをクリックすると、サンクスページに遷移します。

デザイン等は簡易なものですが、css等で設定すれば、オリジナルのお問い合わせフォームが作成できます。

アップロードするファイルのコード

コピペして、【】内に記述されているファイル名で保存してください。

---

【contact-index.php】ーここより下を次の区切り線の前までコピペー

<?php

/*******************************

 固定ページ お問い合わせ

 Template Name: contact-index

*******************************/

get_header(); ?>

<div class="container">

  <div class="contents2">

    <!--記事本文-->

    <?php if(have_posts()): the_post(); ?>

    <article>

      <!--タイトル-->

      <h1><?php the_title(); ?></h1>

      <!--本文取得-->

      <?php the_content(); ?>

<?php

/*　↑↑↑↑↑↑↑↑↑↑　ここから上部は page.php のヘッダーのコピペ　↑↑↑↑↑↑↑↑↑↑　 */

// エラーメッセージと不正アクセスフラグ

$error_mes = "";

$noindexaccess = true;

// メアドに表示する名前:******を編集してください。

define('WEBMST_NAME', '******');

// お問い合わせ用メアド:******を編集してください。

define('WEBMST_MAIL', '******');

// 送信先メールアドレス

$mailto = WEBMST_MAIL;

#--------------------------------------------------------------

# 全体のコントロール

#--------------------------------------------------------------

switch($_POST["action"]):

case "completion":

/////////////////////////////////////////////////////////////////////////////

//　メール送信処理と完了画面を表示

    include('contact-check.php');

    if(!$error_mes){

        include('contact-sendmail.php');

        include('contact-completion.php');

    }

    else{

        die("<p>エラーが発生しました。<br />もう一度送信しなおしてください。</p>");

    }

    break;

case "confirm":

/////////////////////////////////////////////////////////////////////////////

// エラーがあれば再入力、なければ確認画面表示

    include('contact-check.php');

    if($error_mes):

        include('contact-input.php');

    else:

        include('contact-confirm.php');

    endif;

    break;

default:

/////////////////////////////////////////////////////////////////////////////

// 新規入力画面を表示

    include('contact-input.php');

endswitch;

/*　↓↓↓↓↓↓↓↓↓↓　ここから下部は page.php のフッターのコピペ　↓↓↓↓↓↓↓↓↓↓　 */

?>

    </article>

    <?php endif; ?>

  </div>

</div>

---

【contact-input.php】ーここより下を次の区切り線の前までコピペー

<?php

/*******************************

 固定ページ お問い合わせ

 お問い合わせフォーム 入力画面

*******************************/

// 不正アクセスチェック

if(!$noindexaccess){

    header("HTTP/1.0 404 Not Found");exit();

}

?>

<div style="color:red;">

<?php // エラーメッセージがあったら表示する

echo ($error_mes)?'

---------------------<br />

　入力エラーです<br />

---------------------<br />'.$error_mes:"";?>

</div>

<form name="toiawase" method="post" enctype="multipart/form-data" action="<?php echo esc_url( home_url( '/contact/' ) ); ?>">

    <div>

        <label>名前※</label>

        <input type="text" name="namae" size="40" maxlength="60" value="<?php echo ($namae)?$namae:"";?>" required />

    </div>

    <div>

        <label>メールアドレス※</label>

        <input type="email" name="email" size="40" maxlength="200" value="<?php echo ($email)?$email:"";?>" required />

    </div>

    <div>

        <label>題名※</label>

        <input type="text" id="title" name="title" size="40" maxlength="60" value="<?php

  if(isset($_GET['id'])) {

      $id = $_GET['id'];

      print("$id");

  }

?>" required />

    </div>

    <div>

        <label>メッセージ※</label>

        <textarea name="message" cols="40" rows="10" required><?php

  if(isset($_GET['text'])) {

      $id = $_GET['text'];

      print("$id");

  }

?></textarea>

    </div>

    <div>

        <input type="submit" value="送信する" />

        <input type="hidden" name="action" value="confirm">

    </div>

</form>

---

<?php

/*******************************

 固定ページ お問い合わせ

 お問い合わせフォーム 文字列チェック

*******************************/

// 不正アクセスチェック

if(!$noindexaccess){

    header("HTTP/1.0 404 Not Found");exit();

}

/* 危険文字列置換ファンクション */

function Chk_StrMode($str){

    // タグを除去

    $str = strip_tags($str);

    // 空白を除去

    $str = mb_ereg_replace("^(　){0,}","",$str);

    $str = mb_ereg_replace("(　){0,}$","",$str);

    $str = trim($str);

    // 特殊文字を HTML エンティティに変換する

    $str = htmlspecialchars($str);

    return $str;

}

/* 未入力チェックファンクション */

function Chk_InputMode($str,$mes){

    $errmes = "";

    if($str == ""){$errmes .= "{$mes}<br>\n";}

    return $errmes;

}

/* メールアドレスチェックファンクション :@（全角）を@（半角）に置換してください。*/

function CheckEmailAddress($sMailAddress) {

    if(preg_match('/^(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){255,})(?!(?:(?:\x22?\x5C[\x00-\x7E]\x22?)|(?:\x22?[^\x5C\x22]\x22?)){65,}＠)(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22))(?:\.(?:(?:[\x21\x23-\x27\x2A\x2B\x2D\x2F-\x39\x3D\x3F\x5E-\x7E]+)|(?:\x22(?:[\x01-\x08\x0B\x0C\x0E-\x1F\x21\x23-\x5B\x5D-\x7F]|(?:\x5C[\x00-\x7F]))*\x22)))*＠(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-[a-z0-9]+)*)|(?:\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\]))$/iD', $sMailAddress)){

        list($username,$domain)=explode('＠',$sMailAddress);

        if(!checkdnsrr($domain,'MX')){

            return false;

        }

    return true;

    }

return false;

}

#----------------------------------------------------------------------------------

# データの受け取りと危険文字列置換 ※Chk_StrMode(文字列);

#----------------------------------------------------------------------------------

$param = array();

// 引数を元に文字列処理及び変換処理を行う

foreach($_POST as $k=>$e):

    $params[$k] = Chk_StrMode($e);

endforeach;

// 変数に入れる

extract($params);

#----------------------------------------------------------------------------------

# エラーチェック ※Chk_InputMode(文字列,モード,エラーメッセージ);

#----------------------------------------------------------------------------------

$error_mes .= Chk_InputMode($namae,"・お名前をご記入ください。<br />\n");

$error_mes .= Chk_InputMode($email,"・メールアドレスをご記入ください。<br />\n");

// メールアドレスチェック

if($email){

    if(CheckEmailAddress($email) != true){

        $error_mes .= "・メールアドレスの形式に誤りがあります。<br />\n";

    }

}

$error_mes .= Chk_InputMode($message,"・お問い合わせ内容をご記入ください。<br />\n");

?>

---

【contact-confirm.php】

<?php

/*******************************

 固定ページ お問い合わせ

 お問い合わせフォーム 確認画面

*******************************/

// 不正アクセスチェック

if(!$noindexaccess){

    header("HTTP/1.0 404 Not Found");exit();

}?>

<script>

//2重送信防止スクリプト

var flg_Submit = false;

function Fnk_DoubleSubmit(){

  if(flg_Submit){

    alert("処理中です。");return false;

  }

  else{

    flg_Submit = true;return true;

  }

}

</script>

以下の内容でよろしければ[送信する]ボタンを押してください。

<form name="toiawase2" method="post" enctype="multipart/form-data" action="<?php echo esc_url( home_url( '/contact/' ) ); ?>" onsubmit="return Fnk_DoubleSubmit();">

    <div>

        <label>名前</label><span>※</span><br />

        <p style="background:#f8f8f8;"><?php echo ($namae)?$namae:"";?></p><input name="namae" type="hidden" value="<?php echo ($namae)?$namae:"";?>" />

    </div>

    <div>

        <label>メールアドレス</label><span>※</span><br />

        <p style="background:#f8f8f8;"><?php echo ($email)?$email:"";?></p><input name="email" type="hidden" value="<?php echo ($email)?$email:"";?>" />

    </div>

    <div>

        <label>題名</label><span>※</span><br />

        <p style="background:#f8f8f8;"><?php echo ($title)?$title:"";?></p><input name="title" type="hidden" value="<?php echo ($title)?$title:"";?>" />

    </div>

    <div>

        <label>メッセージ</label><span>※</span><br />

        <p style="background:#f8f8f8;"><?php echo ($message)?nl2br($message):"";?></p><input name="message" type="hidden" value="<?php echo ($message)?$message:"";?>" />

    </div>

    <div>

        <input type=button value="修正する" onClick="javascript:history.back();">　<input type="submit" value="送信する" />

        <input type="hidden" name="action" value="completion">

    </div>

</form>

---

【contact-completion.php】

<?php

/*******************************

 固定ページ お問い合わせ

 お問い合わせフォーム 完了画面

*******************************/

// 不正アクセスチェック

if(!$noindexaccess){

    header("HTTP/1.0 404 Not Found");exit();

}

?>

<p>メールが正常に送信されました。<br />

後日メールまたはお電話にてご連絡させていただきます。<br />

ご返信に時間がかかる場合がございますのでご了承下さい。</p>

---

【contact-sendmail.php】

<?php

/*******************************

 固定ページ お問い合わせ

 お問い合わせフォーム メール送信

*******************************/

// 不正アクセスチェック

if(!$noindexaccess){

    header("HTTP/1.0 404 Not Found");exit();

}

#-------------------------------------------------------------------------------------------

# メール送信処理１（お客様への返信メール）

#-------------------------------------------------------------------------------------------

// メール本文

$mailbody = "この度はお問い合わせいただきありがとうございます。

1週間以上経過しても返信がない場合は、

お手数をお掛けいたしますが、下記までお問い合わせください。

────────────────────────────────

　＜お問い合わせ先＞

　クスダホーム株式会社

　住所：

  兵庫県神戸市中央区北長狭通3丁目7-3玉川ビル5階

　TEL：[phone]

　FAX：[phone]

　E-MAIL: ".WEBMST_MAIL."

────────────────────────────────";

// 件名とフッター

$subject = WEBMST_NAME."お問い合わせいただきありがとうございます。";

$headers = "Reply-To: ".mb_encode_mimeheader(WEBMST_NAME)."<".WEBMST_MAIL.">\n";

$headers .= "Return-Path: ".WEBMST_MAIL."<".WEBMST_MAIL.">\n";

$headers .= "From:".mb_encode_mimeheader(WEBMST_NAME)."<".WEBMST_MAIL.">\n";

// メール送信（失敗時：強制終了）

$usrmail_result = mb_send_mail($email,$subject,$mailbody,$headers);

if(!$usrmail_result)die("お客様へのメール送信に失敗しました。<br />\n

                         誠に申し訳ございませんがこちらまでご連絡ください。“".WEBMST_MAIL."”");

#-------------------------------------------------------------------------------------------

# メール送信処理２（送信先は $mailto宛）

#-------------------------------------------------------------------------------------------

// 件名を設定

$subject = "【お問い合わせ】";

// Headerとbodyとsubjectを設定（送信元はお客様 $email）

$headers = "Reply-To: ".mb_encode_mimeheader(WEBMST_NAME)."<".WEBMST_MAIL.">\n";

$headers .= "Return-Path: ".mb_encode_mimeheader(WEBMST_NAME)."<".WEBMST_MAIL.">\n";

$headers .= "From:".mb_encode_mimeheader(WEBMST_NAME)."<".WEBMST_MAIL.">\n";

// メール本文

$mailbody = "サイトよりお問い合わせを受け付けました。

────────────────────────────────

■名前： $namae 様より

■メールアドレス： $email

■題名： $title

■メッセージ：

$message

────────────────────────────────

";

// メール送信実行

if(!empty($mailto)){

    $sendmail_result = mb_send_mail($mailto,$subject,$mailbody,$headers);

    if(!$sendmail_result){

        die("<p>メール送信に失敗しました。<br>\n誠に申し訳ございませんが最初から操作をやり直してください。</p>");

    }

}

else{

    die("<p>メールを送信する事が出来ませんでした。<br>\n誠に申し訳ございませんが“".WEBMST_MAIL."”へ直接メールにて<br>お問い合わせしていただけますようお願い申し上げます。</p>");

}

?>