WordPress 自作フォーム その１（サンプルと設置）

WordPress でプラグインを使わずにフォームをやってみます。
簡単に名前、メールアドレス、メッセージが送信されるものです。

WordPress お問い合わせフォーム PHPファイル

テーマ内に、6つのPHPファイルを作っていきます。

contact-index.php → インデックス
contact-check.php → 文字列チェック
contact-sendmail.php → メールの送信

contact-input.php → 入力画面
contact-confirm.php → 確認画面
contact-completion.php → 完了画面

WordPress カスタム構造

WordPress サイトのパーマリンクが、カスタム構造になっている前提で進めていきます。

設定＞パーマリンク設定 からカスタム構造にチェックをし、以下を入力します。

参考記事：WordPress レスポンシブ テンプレート 元にサイトを作ってみる その１

WordPress お問い合わせ 【インデックス】

インデックスページとしては、全体をコントロールするものがいいかと思います。

固定ページとして入れて行こうと思うので、テーマ内既存の page.php をコピーし、ファイル名を contact-index.php と変更し、以下のようにします。

contact-index.php

<?php
/*******************************
 固定ページ お問い合わせ
 Template Name: contact-index
*******************************/
get_header(); ?>
<?php 
/*　↑↑↑↑↑↑↑↑↑↑　ここから上部は page.php のヘッダーのコピペ　↑↑↑↑↑↑↑↑↑↑　 */

// エラーメッセージと不正アクセスフラグ
$error_mes = "";
$noindexaccess = true;

// メアドに表示する名前
define('WEBMST_NAME', 'サイト名');
// お問い合わせ用メアド
define('WEBMST_MAIL', 'xxxxx@xxx.xx');
// 送信先メールアドレス
$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 のフッターのコピペ　↓↓↓↓↓↓↓↓↓↓　 */
?>

サイト名、送信先のメールアドレスなどを入力してください。

WordPress お問い合わせ 【入力画面】

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><span>※</span><br />
        <input type="text" name="namae" size="40" maxlength="60" value="<?php echo ($namae)?$namae:"";?>" required />
    </div>
    <div>
        <label>メールアドレス</label><span>※</span><br />
        <input type="email" name="email" size="40" maxlength="200" value="<?php echo ($email)?$email:"";?>" required />
    </div>
    <div>
        <label>メッセージ</label><span>※</span><br />
        <textarea name="message" cols="40" rows="10" required><?php echo ($message)?$message:"";?></textarea>
    </div>
    <div>
        <input type="submit" value="送信する" />
		<input type="hidden" name="action" value="confirm">
    </div>
</form>

WordPress お問い合わせ 【確認画面】

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 ($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>

WordPress お問い合わせ 【文字列チェック】

contact-check.php

<?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;
}

/* メールアドレスチェックファンクション 2017.9.1現在 参考サイト：http://wepicks.net/phpsample-preg-mail/ */
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");
?>

WordPress お問い合わせ 【メール送信】

contact-sendmail.php

<?php
/*******************************
 固定ページ お問い合わせ
 お問い合わせフォーム メール送信
*******************************/
// 不正アクセスチェック
if(!$noindexaccess){
	header("HTTP/1.0 404 Not Found");exit();
}

#-------------------------------------------------------------------------------------------
# メール送信処理１（お客様への返信メール）
#-------------------------------------------------------------------------------------------
// メール本文
$mailbody = "この度はお問い合わせいただきありがとうございます。
1週間以上経過しても返信がない場合は、
お手数をお掛けいたしますが、下記までお問い合わせください。

────────────────────────────────
　＜お問い合わせ先＞
　".WEBMST_NAME."
　E-MAIL: ".WEBMST_MAIL."
────────────────────────────────";

// 件名とフッター
$subject = WEBMST_NAME."Mail from Form";
$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

■メッセージ：
$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>");
}
?>

WordPress お問い合わせ 【完了画面】

contact-completion.php

<?php
/*******************************
 固定ページ お問い合わせ
 お問い合わせフォーム 完了画面
*******************************/
// 不正アクセスチェック
if(!$noindexaccess){
	header("HTTP/1.0 404 Not Found");exit();
}
?>
<p>メールが正常に送信されました。<br />
後日メールまたはお電話にてご連絡させていただきます。<br />
ご返信に時間がかかる場合がございますのでご了承下さい。</p>

WordPress お問い合わせ 設置

出来あがった６つのファイルをテーマ内にアップロードします。

WordPress の管理画面から、固定ページを新規追加します。

パーマリンクを contact などとします。
テンプレートの部分の所で contact-index を選択します。

公開ボタンを押して、指定したパーマリンクにアクセスすると、お問い合わせフォームが表示します。

WordPress お問い合わせ デモと参考ファイルのダウンロード

以前に作ったサンプルサイトに設置し、パーマリンクにアクセスしてみると、このような感じになりました。
DEMO を見る
参考に６つのファイルをzipで置いておきました。
WordPress 問い合わせフォーム ダウンロード（contact_allset.zip）