【告知】メールフォームが自作タイプに戻りました【WordPress】
さっそく修正版😅💦
昨晩アップしたコードは問題があったため差し替えました。
PHP8になってから、しばらくメールフォームが動かなくなっていたのですが。
Contents
スポンサーリンク
自作メールフォームの運用再開
WordPressで。
プラグインなしで。
スパム対策折込済。※Cloudflare
作るのはファイルひとつだけで（後述のCSSは適当に追加してください）。
メールフォームがPHP8にアゲて動かなくなった件
検索したりとかいろいろと調べて、JavaScript使ったものとか、function.phpをいじったものとか本当にさまざまあったのですが、結局原点回帰と言いますか…。
Cloudflareを使ったスパム対策を盛り込む
スパム対策でreCAPTCHAを使っていたものを、Cloudflareに切り替えてあります。
まあ、その辺も追々記事にできたらとは思うのですけどもね？いらないですかね（）
Cloudflareのメールフォームスパム対策は、かなり簡単ですし記事も出回っていますので、調べればすぐに実装できると思います。
コードとCSSも共有します、参考までに。
自作PHPメールフォームのコード
ファイル名はcontact-form.phpで作成しています。
フォーム幅は狭い。
<?php
/* Template Name: お問い合わせフォーム */
// Cloudflare Turnstile のシークレットキー
$secretKey = '【ここにシークレットキーを入れる】';
// 変数の初期化
$nameError = '';
$emailError = '';
$messageError = '';
$hasError = false;
$emailSent = false;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submitted'])) {
// Turnstile の検証
if (!empty($_POST['cf-turnstile-response'])) {
$token = $_POST['cf-turnstile-response'];
$url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
$data = [
'secret' => $secretKey,
'response' => $token,
'remoteip' => $_SERVER['REMOTE_ADDR'] ?? ''
];
$options = [
'http' => [
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
]
];
$context = stream_context_create($options);
$response = file_get_contents($url, false, $context);
$result = json_decode($response, true);
if ($result['success'] === true) {
// フォームデータの検証
if(trim($_POST['contactName'] ?? '') === '') {
$nameError = '名前が入力されていません';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}
if(trim($_POST['email'] ?? '') === '') {
$emailError = 'メールアドレスが入力されていません';
$hasError = true;
} else if (!preg_match('|^[0-9a-z_./?-]+@([0-9a-z-]+.)+[0-9a-z-]+$|', trim($_POST['email']))) {
$emailError = 'メールアドレスが正しくありません';
$hasError = true;
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['comments'] ?? '') === '') {
$messageError = 'お問い合わせ内容が入力されていません';
$hasError = true;
} else {
$comments = function_exists('stripslashes') ?
stripslashes(trim($_POST['comments'])) :
trim($_POST['comments']);
}
// メール送信処理
if(!$hasError) {
mb_language("japanese");
mb_internal_encoding("UTF-8");
$emailTo = get_option('admin_email');
$title = get_bloginfo('name');
// 管理者へのメール
$subject = 'お問い合わせ';
$body = "名前: $name\r\n";
$body .= "メールアドレス: $email\r\n";
$body .= "お問い合わせ内容:\r\n$comments";
$from = mb_encode_mimeheader(mb_convert_encoding("$title のお問い合わせ","UTF-8"));
$headers = 'From: '.$from.' <'.$emailTo.'>';
if(mb_send_mail($emailTo, $subject, $body, $headers)) {
// 自動返信メール
$subject = 'お問い合わせ受付のお知らせ';
$from = mb_encode_mimeheader(mb_convert_encoding("$title","UTF-8"));
$headers = 'From: '.$from.' <'.$emailTo.'>';
$body = "$name 様 \n\nお問い合わせありがとうございます。\n返信が必要な場合には管理者よりご連絡をさせていただきます。\n\n"
. "お名前: $name \n\n"
. "メールアドレス: $email \n\n"
. "お問い合わせ内容: $comments";
mb_send_mail($email, $subject, $body, $headers);
$emailSent = true;
}
}
} else {
echo '<div class="error">認証に失敗しました。</div>';
}
}
}
get_header();
?>
<main>
<?php if(isset($emailSent) && $emailSent == true) { ?>
<h1 class="entry-title archive-title"><?php echo esc_html($name); ?>様、お問い合わせありがとうございます。</h1>
メールを確認し、必要と判断した場合にはご連絡いたします。
<?php } else { ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<h1 class="entry-title archive-title"><?php the_title(); ?></h1>
<?php the_content(); ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ol class="forms">
<li>
<label for="contactName">お名前</label>
<input type="text" name="contactName" id="contactName" value="<?php echo esc_attr(isset($_POST['contactName']) ? $_POST['contactName'] : ''); ?>" class="requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?php echo esc_html($nameError); ?></span>
<?php } ?>
</li>
<li>
<label for="email">メールアドレス</label>
<input type="text" name="email" id="email" value="<?php echo esc_attr(isset($_POST['email']) ? $_POST['email'] : ''); ?>" class="requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?php echo esc_html($emailError); ?></span>
<?php } ?>
</li>
<li class="textarea">
<label for="commentsText">お問い合わせ内容</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php echo esc_textarea(isset($_POST['comments']) ? (function_exists('stripslashes') ? stripslashes($_POST['comments']) : $_POST['comments']) : ''); ?></textarea>
<?php if($messageError != '') { ?>
<span class="error"><?php echo esc_html($messageError); ?></span>
<?php } ?>
</li>
<li>
<div class="cf-turnstile" data-sitekey="【ここにサイトキーを入れる】"></div>
</li>
<li class="buttons">
<input type="hidden" name="submitted" id="submitted" value="true" />
<button type="submit">送信する</button>
</li>
</ol>
</form>
<?php endwhile; ?>
<?php endif; ?>
<?php } ?>
</main>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<?php get_footer(); ?>
自作PHPメールフォームのCSS
見た目は各自、セレクタ含め適宜調整してください。
/*コンタクトフォーム*/
.main {min-height: 400px;}
.forms {
margin:16px
}
.forms li {
margin:16px;
list-style:none
}
.forms label {
cursor:pointer;
display:block;
font-weight:800
}
.forms input,.forms textarea {
border:1px solid #7E8AA2;
border-radius:8px;
padding:8px;
width:240px;
font-size:100%
}
.forms li .error {
font-size:80%;
color:red
}
.forms li.textarea .error {
display:block;
/*position:absolute;*/
right:0;
top:0
}
.forms li.formbuttons button {
cursor:pointer;
padding:8px
}
.contact-form-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.contact-form .form-group {
margin-bottom: 20px;
}
.contact-form label {
display: block;
margin-bottom: 5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.contact-form textarea {
height: 150px;
}
.error {
color: red;
font-size: 0.9em;
margin-top: 5px;
}
.success-message {
background-color: #dff0d8;
color: #3c763d;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.required {
color: red;
}
.submit-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-button:hover {
background-color: #45a049;
}修正必須箇所
- Cloudflareのシークレットキー
- Cloudflareのサイトキー
このメールフォームは、Wordpressの管理画面→設定で入力しているメールアドレス宛に内容を送信します。
保存してサーバーにアップしたら、
固定ページを新規に作成→テンプレート「お問い合わせフォーム」を選択して保存します。
お好きなアドレスにして、メニューに追加するなどして完了です。
エックスサーバーのメール→Gmailでテスト
問題なくメールが届くので、このまま様子見＆運用再開とします。
Google Formとはおサラダバーだ！（サムい）
メッセージが空欄でも届いちゃう
現状、メールと名前は入力必須。
メッセージ欄は空欄でも届いてしまいます。
その辺はスクリプト内の文言も含めて、ご自身でお調べになるなどして微調整してください。
スパム対策は入れてますし、イタズラはさほど来ないでしょう。
人徳が問われます（待）。
Special Thanks
プラグインを使わないメールフォームの作り方は、に掲載されている外部サイト様の提供コードをもとに、AIにちまちま尋ねながら警告メッセージを潰していってPHP8.2あたりに対応させたものです。
プラグインレスでPHPメールフォーム作るサイト様をリンクしてる記事
改めて訪問したらだいぶ見づらくなってた（）
【WordPress】メールフォームをプラグインなしで実装してみた
お手伝いしてくれたAIたち
ChatGPT-4oとか。
Mistral AIとか。
Claude Sonnetとか。
DeepSeekくんは使っていたところバズりだして、人気大爆発からのビジービジーになってしまって離脱中！
GPTはすぐ制限かかってしまうので、Mistralと天秤AI（経由のClaude）がメインだったかも。
