WordPress 自作フォーム その1(サンプルと設置)
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 レスポンシブ テンプレート 元にサイトを作ってみる その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 の管理画面から、固定ページを新規追加します。
パーマリンクを contact などとします。
テンプレートの部分の所で contact-index を選択します。
公開ボタンを押して、指定したパーマリンクにアクセスすると、お問い合わせフォームが表示します。
WordPress お問い合わせ デモと参考ファイルのダウンロード
以前に作ったサンプルサイトに設置し、パーマリンクにアクセスしてみると、このような感じになりました。
DEMO を見る
参考に6つのファイルをzipで置いておきました。
WordPress 問い合わせフォーム ダウンロード(contact_allset.zip)
関連記事
-
-
WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード
WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード
-
-
WordPress タイトルの変更
テンプレートタグ the_title(); get_the_title(); WordPress
-
-
WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)
前回(WordPress 自作フォーム 1)のつづきです。 今回は細かいところや注意点とエラーなど
-
-
wordpress カスタム投稿を一覧(ループ)で表示する
カスタム投稿を一覧で表示する方法がいろいろあります。 query_posts 関数が非推奨になって
-
-
WordPress twentyseventeen の function.php を見る – その2
前回の続きです。 次のスターターコンテンツは、今回のシンプルテンプレートには不要ですが、よくわ
-
-
WordPress twentyseventeen の function.php を見る – その1
WordPress の最低限の機能だけのシンプルなテンプレートが欲しかったので、作っておくことにしま
-
-
WordPress 自作フォーム その3(チェックボックスなど)
以前、WordPress 自作フォーム その1の記事で Wordpress で自作フォームを作ってみ
-
-
「All-in-One WP Migration」プラグインで 簡単に WordPress のサーバー移行する手順メモ
1.移行元サイトでのデータエクスポート 「All-in-One WP Migration(公式リン
-
-
PHPフレームワークについて
フレームワークとは? 開発する際に頻繁に必要とされる汎用的な機能をまとめて提供している、アプリケー
-
-
WordPress フォルダー・ファイル系の関数 is_dir や opendir や exif_imagetype で Warning エラー
Wordpress の管理画面でフォルダーの中身を読み込む関数 opendir でエラー Word