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 レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

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

記事を読む

Wordpress VR Test

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

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

記事を読む

WordPress プラグイン「 Search Everything 」

WordPressでカテゴリー名も検索にひっかけるプラグイン「Search Everything」

WordPressでカテゴリーも検索にひっかけるプラグイン「Search Everything 8.

記事を読む

レンタルサーバでWordPressを設置してみよう!

WordPress.com 内に、ブラウザだけで無料でサイトを作成出来きるサービスもありますが、Wo

記事を読む

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

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

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

記事を読む

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

WordPress レスポンシブ テンプレート の メニューやブログの設置

前回の 「WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダ

記事を読む

WordPress PHP

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

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

記事を読む

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細かいところや注意点とエラーなど

記事を読む

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

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

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

記事を読む

WordPress レスポンシブ テンプレート 元にサイトを作ってみる その2

DEMO を見る カスタム投稿タイプ functions.php 今回は3つのリストメニュ

記事を読む

PHP WordPress

Message

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

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細

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

Wordpress でプラグインを使わずにフォームをやってみます。

Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応
Javascript 写真ギャラリー サムネイルスライド横 レスポンシブ対応

Javascript でマウスドラッグのテストをしていきます。 分か

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

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

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

→もっと見る

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