WordPress 自作フォーム その1(サンプルと設置)

公開日: : PHP, WordPress

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 自作フォーム 作り方 パーマリンク設定
設定>パーマリンク設定 からカスタム構造にチェックをし、以下を入力します。

/%category%/%postname%/

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

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();
}

#-------------------------------------------------------------------------------------------
# メール送信処理1(お客様への返信メール)
#-------------------------------------------------------------------------------------------
// メール本文
$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."”");

#-------------------------------------------------------------------------------------------
# メール送信処理2(送信先は $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 お問い合わせ 設置

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

WordPress の管理画面から、固定ページを新規追加します。
WordPress 自作フォーム 作り方 固定ページ
パーマリンクを contact などとします。
テンプレートの部分の所で contact-index を選択します。

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

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

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

関連記事

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

WordPress レスポンシブ テンプレート

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

記事を読む

WordPress の PHP をちょっと見てみよう Ⅲ

WordPress の PHP をちょっと見てみよう Ⅲ

前記事の続きで、wp-settings.php の91行目あたりから見ていきます。 次は、wp

記事を読む

WordPress の PHP をちょっと見てみよう Ⅱ

WordPress の PHP をちょっと見てみよう Ⅱ

前記事の続きで、wp-settings.php の68行目あたりから見ていきます。 <今回のピ

記事を読む

MVCの典型的な相関図

PHPフレームワークについて

フレームワークとは? 開発する際に頻繁に必要とされる汎用的な機能をまとめて提供している、アプリケー

記事を読む

Wordpress 自作フォーム (チェックボックスなど)

WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpress で自作フォームを作ってみ

記事を読む

Wordpress 独自テーブル 商品名と料金

WordPress 独自テーブル

Wordpress で独自テーブルを作ってみようと思います。 独自テーブルのデータ 今回のデ

記事を読む

WordPress Warning エラー

WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 opendir でエラー Word

記事を読む

WordPress PHP

WordPress の PHP をちょっと見てみよう Ⅰ

WordPress には、たくさんのファイルが入っています。 ここではテーマ内ではなく、トップ

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

PHP WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

WordPress Warning エラー
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー

Wordpress の管理画面でフォルダーの中身を読み込む関数 ope

Wordpress 自作フォーム (チェックボックスなど)
WordPress 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpre

Javascript ノード の取得や挿入
Javascript ノードの取得や挿入

ノードの取得 ノードの取得(ダイレクトアクセス) document

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑