MENU
ダークモードSW
  1. ホーム
  2. 忘備録
  3. カスタム投稿
  4. メールフォーム

メールフォーム

カスタム投稿
目次

メールフォームの設置

プラグインを利用しない、シンプルなメールフォームを設置します。
設置作業は以下の２点です。
参考サイト　WordPress で自作メールフォーム【高速】プラグインを使わず画面遷移しない非同期処理で実装

  • 固定ページにメールフォームのソースコードを設置する
  • メール送信用 PHP ファイルのアップロードする

固定ページにソースコードを設置

固定ページに「お問合せ」ページを作成し、カスタムHTMLブロックに下記のコードを張り付ける。

<!-- HTML -->
<form id="mailform">
  <div>
    <label for="nameval">名前<span>(必須)</span></label> <input
    type="text" name="nameval" id="nameval" required />
  </div>
  <div>
    <label for="mailval">メールアドレス<span>(必須)</span></label> <input
    type="email" name="mailval" id="mailval" required />
  </div>
  <div>
    <label for="textval">内容<span>(必須)</span></label> <textarea
    name="textval" id="textval" rows="12" required></textarea>
  </div>
  <p class="contact-submit">
    <input type="submit" value="送信 »" id="submit"> <input
    id="referrer" type="hidden" name="referrer" />
  </p>
</form>
<div id="dispmsg"></div>
 
<!-- スタイルシート -->
<div>
<style>
#mailform input[type='text'],
#mailform input[type='email'] {
  font-size: 1em;
  width: 300px;
  max-width: 100%;
  margin-bottom: 13px;
  box-sizing: border-box;
}
#mailform input,
#mailform button {
  height: 40px;
  padding: 0 10px;
}
#mailform textarea {
  font-size: 1em;
  margin-bottom: 13px;
  padding: 2px 5px;
  width:100%;
  box-sizing: border-box;
}
#mailform label {
  margin-bottom: 3px;
  font-weight: bold;
  display: block;
}
#mailform label span {
  color: #aaa;
  margin-left: 4px;
  font-weight: normal;
}
#submit{
  width:200px;
}
#dispmsg > p{
  border: 3px solid #ffe3b3;
  background: #ffffeb;
  border-radius: 7px;
  padding: 15px;
  margin: 30px 0;
  text-align: center;
  font-weight: bold;
}
#dispmsg blockquote {
  margin: 30px 0;
  padding: 15px;
  background-color: #f3f3f3
}
#dispmsg pre {
  font-family: -apple-system,BlinkMacSystemFont,Meiryo,Verdana,
  "Helvetica Neue","Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3",sans-serif;
  line-height: 1.7;
  white-space: pre-wrap;
  background: #fafafa;
  margin: 15px 0 0;
  padding: 10px;
}
#dispmsg #errmsg{
  background: #fff5f5;
  border: 3px solid #fcc;
  color: #e1536a;
}
</style>
</div>
 
<!-- JavaScript -->
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function ($) {
  $("#referrer").val(document.referrer);
  $("#mailform").submit(function(){ 
    $.ajax({
      url : 'https://uboatbuceo.com/sendmail/sendmail.php',
      type: 'POST',
      dataType: 'json',
      data: $(this).serialize()
    })
    .done( function(data){
      $("#dispmsg").empty();
      $("#dispmsg").html(data.dispmsg);
      if(data.errflg != 1){
        $("#mailform").remove();
      }
    })
    .fail( function(data){
      alert('メール送信に失敗しました');
    })
    return false;
  });
});
</script>
</div>

メールフォームのソースコードの修正点

オリジナルのソースコードをサイトに合わせて修正しています。

修正点１　入力欄の「ウェブサイト」は不要なので削除しています。

  <div>
    <label for="urlval">ウェブサイト</label> <input
    type="text" name="urlval" id="urlval" />
  </div>

修正点２　１００行目の$.ajax部分のURLをサイトのURLに合わせて修正しています。

url : https://uboatbuceo.com/sendmail/sendmail.php'',

メール送信用 PHP ソースコード

PHPソースコードは下記の通りです。オリジナルコードを一部修正しています。
ファイル名は「sendmail.php」とし、フォルダー名「sendmail」に収納しFTPにてサイトにアップロードします。
アップロード先は、わかり易いようにルート直下のWPと同列にする。

<?php
// json 形式のデータを扱うための定義
header('Content-type: application/json');
// PHP5.1.0以上はタイムゾーンの定義が必須
date_default_timezone_set('Asia/Tokyo');

// --------------------------
// 個別設定項目（３つ）
// --------------------------
// 送信先メールアドレス
$to = 'garden@uboatbuceo.com';
// メールタイトル
$subject = 'ガーデニング問い合わせ';
// ドメイン（リファラチェックと送信元メールアドレスに利用）
$domain = 'https://dreamshops.net/';

//変数初期化
$errflg =0;    // エラー判定フラグ
$dispmsg ='';  // 画面出力内容

// 入力項目
$nameval = '';   // 名前
$mailval = '';   // メールアドレス
$textval = '';   // 内容
$referrer = '';  // 遷移元画面

// 画面からのデータを取得
if(isset($_POST['nameval'])){ $nameval = $_POST['nameval']; }
if(isset($_POST['mailval'])){ $mailval = $_POST['mailval']; }
if(isset($_POST['textval'])){ $textval = $_POST['textval']; }
if(isset($_POST['referrer'])){ $referrer = $_POST['referrer']; }

if(strpos($_SERVER['HTTP_REFERER'], $domain) === false){
  // リファラチェック
  $dispmsg = '<p id="errmsg">【リファラチェックエラー】お問い合わせフォームから入力されなかったため、メール送信できませんでした。</p>';
  $errflg = 1;
}
else if($nameval == '' || $mailval == '' || $textval == ''){
  //必須チェック
  $dispmsg = '<p id="errmsg">【エラー】名前・メールアドレス・内容は必須項目です。</p>';
  $errflg = 1;
}
else if(!preg_match("/^[\.!#%&\-_0-9a-zA-Z\?\/\+]+\@[!#%&\-_0-9a-z]+(\.[!#%&\-_0-9a-z]+)+$/", $mailval) || count( explode('@',$mailval) ) !=2){
  //メールアドレスチェック
  $dispmsg .= '<p id="errmsg">【エラー】メールアドレスの形式が正しくありません。</p>';
  $errflg = 1;
}
else{
  // メールデータ作成
  $subject = "=?iso-2022-jp?B?".base64_encode(mb_convert_encoding($subject,'JIS','UTF-8'))."?=";
  mb_language("Japanese");
  mb_internal_encoding("UTF-8");
  $message= '名前：'.$nameval."\n";
  $message.='メール：'.$mailval."\n";
  $message.="\n――――――――――――――――――――――――――――――\n\n";
  $message.=$textval;
  $message.="\n\n――――――――――――――――――――――――――――――\n";
  $message.='送信日時：'.date( "Y/m/d (D) H:i:s", time() )."\n";
  $message.='送信元IPアドレス：'.@$_SERVER["REMOTE_ADDR"]."\n";
  $message.='送信元ホスト名：'.getHostByAddr(getenv('REMOTE_ADDR'))."\n";
  $message.='リファラURL：'.$referrer."\n";
  $message.='お問い合わせページ：'.@$_SERVER['HTTP_REFERER']."\n";
  $fromName = mb_encode_mimeheader(mb_convert_encoding($nameval,'JIS','UTF-8'));
  $header ='From: '.$fromName.'<wordpress@'.$domain.'>'."\n";
  $header.='Reply-To: '.$mailval."\n";
  $header.='Content-Type:text/plain;charset=iso-2022-jp\nX-Mailer: PHP/'.phpversion();
  // メール送信
  $retmail = mail($to,$subject,$message,$header);

  // 送信結果の判定
  if( $retmail ){
    $dispmsg ='<p class="success">メールを送信しました。返信までしばらくお待ちください。</p>';
    $dispmsg.='<blockquote><p>名前： '.hsc_utf8($nameval).'<br />';
    $dispmsg.= 'メール： '.hsc_utf8($mailval).'<br />';
    $dispmsg.= '<pre>'.hsc_utf8($textval).'</pre></blockquote>';
  }else{
    $dispmsg .= '<p id="errmsg">【エラー】メール送信に失敗しました。。</p>';
    $errflg = 1;
  }
}

// 処理結果を画面に戻す
$result = array('errflg'=>$errflg, 'dispmsg'=>$dispmsg);
echo json_encode( $result );

// HTMLエスケープ処理
function hsc_utf8($str) {
  return htmlspecialchars($str, ENT_QUOTES,'UTF-8');
}
?>

PHPコードの修正箇所

オリジナルのPHPを２か所修正しています。

修正１　メールアドレス等をサイトに合わせて修正しています。

// 送信先メールアドレス
$to = 'garden@uboatbuceo.com';
// メールタイトル
$subject = 'お問い合わせフォームより';
// ドメイン（リファラチェックと送信元メールアドレスに利用）
$domain = 'https://uboatbuceo.com/';

修正２　オリジナルのコードではメールの内容が文字化けするので「メールデータ作成」を修正しています。

  // メールデータ作成
  $subject = "=?iso-2022-jp?B?".base64_encode(mb_convert_encoding($subject,'JIS','UTF-8'))."?=";
  mb_language("Japanese");
  mb_internal_encoding("UTF-8");
  $message= '名前：'.$nameval."\n";
  $message.='メール：'.$mailval."\n";
  $message.="\n――――――――――――――――――――――――――――――\n\n";
  $message.=$textval;
  $message.="\n\n――――――――――――――――――――――――――――――\n";
  $message.='送信日時：'.date( "Y/m/d (D) H:i:s", time() )."\n";
  $message.='送信元IPアドレス：'.@$_SERVER["REMOTE_ADDR"]."\n";
  $message.='送信元ホスト名：'.getHostByAddr(getenv('REMOTE_ADDR'))."\n";
  $message.='リファラURL：'.$referrer."\n";
  $message.='お問い合わせページ：'.@$_SERVER['HTTP_REFERER']."\n";
  $fromName = mb_encode_mimeheader(mb_convert_encoding($nameval,'JIS','UTF-8'));
  $header ='From: '.$fromName.'<wordpress@'.$domain.'>'."\n";
  $header.='Reply-To: '.$mailval."\n";
  $header.='Content-Type:text/plain;charset=iso-2022-jp\nX-Mailer: PHP/'.phpversion();
カスタム投稿

関連記事

目次