解決したいこと
アンケートLPの回答が受け取れない
アンケートLP詳細
アンケートLPを作成していおり、その詳細としましてはポップアップ形式の質問をいくつか用意し、最後に確認というボタンを押すと回答した内容が全て表示され、送信を押すと指定のメールに回答が送られるLPを作成しています。
フォルダの流れ index.php(質問ページ)→style.js→survey.php(受信・thanksページ)
現在の問題点
その中で現在、回答の確認まではうまく表示されるのですが、送信を押してもメールには回答が表示されず送られます。
ということは情報の受信ができていないと考えており、隠しフィールドなど見直したのですが、原因がわかっていません。
どうか解決策を教えていただけないでしょうか？
よろしくお願いいたします。
ソースコードはこちらです
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アンケートLP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>タイトル</h1>
<p>テキスト</p>
</header>
<main>
<div class="popup" id="popup1">
<form id="form1">
<label for="zipcode">郵便番号を入力してください</label>
<input type="text" id="zipcode" name="zipcode" placeholder="地名・郵便番号を入力" required>
<input type="hidden" id="hidden_zipcode" name="hidden_zipcode">
<button type="button" onclick="nextPopup('popup2', 'zipcode', 'hidden_zipcode')">次へ</button>
</form>
</div>
<div class="popup" id="popup2" style="display: none;">
<form id="form2">
<label>個人or法人どちらですか？</label>
<div>
<input type="radio" id="personal" name="personal" value="個人" required>
<label for="personal">個人</label>
</div>
<div>
<input type="radio" id="corporate" name="personal" value="法人" required>
<label for="corporate">法人</label>
</div>
<input type="hidden" id="hidden_personal" name="hidden_personal">
<button type="button" onclick="previousPopup('popup1')">戻る</button>
<button type="button" onclick="nextPopup('popup3', 'personal', 'hidden_personal')">次へ</button>
</form>
</div>
<div class="popup" id="popup3" style="display: none;">
<form id="form3">
<label for="service">工事種目はなんですか？</label>
<select id="service" name="service" required>
<option value="擁壁">擁壁</option>
<option value="ブロック塀">ブロック塀</option>
<option value="造成">造成</option>
<option value="その他">その他</option>
</select>
<input type="hidden" id="hidden_service" name="hidden_service">
<button type="button" onclick="previousPopup('popup2')">戻る</button>
<button type="button" onclick="nextPopup('popup4', 'service', 'hidden_service')">次へ</button>
</form>
</div>
<div class="popup" id="popup4" style="display: none;">
<form id="form4">
<label for="timing">いつ頃の工事を希望しますか？</label>
<select id="timing" name="timing" required>
<option value="できる限り早く">できる限り早く</option>
<option value="1ヶ月以内">1ヶ月以内</option>
<option value="3ヶ月以内">3ヶ月以内</option>
<option value="半年以内">半年以内</option>
<option value="1年以内">1年以内</option>
<option value="未定">未定</option>
</select>
<input type="hidden" id="hidden_timing" name="hidden_timing">
<button type="button" onclick="previousPopup('popup3')">戻る</button>
<button type="button" onclick="nextPopup('popup5', 'timing', 'hidden_timing')">次へ</button>
</form>
</div>
<div class="popup" id="popup5" style="display: none;">
<form id="form5">
<label for="details">電話番号</label>
<input type="text" id="details" name="details" required placeholder="電話番号を入力してください">
<input type="hidden" id="hidden_details" name="hidden_details">
<button type="button" onclick="previousPopup('popup4')">戻る</button>
<button type="button" onclick="nextPopup('popup6', 'details', 'hidden_details')">次へ</button>
</form>
</div>
<div class="popup" id="popup6" style="display: none;">
<form id="form6">
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required placeholder="メールアドレスを入力してください">
<input type="hidden" id="hidden_email" name="hidden_email">
<button type="button" onclick="previousPopup('popup5')">戻る</button>
<button type="button" onclick="nextPopup('popup7', 'email', 'hidden_email')">次へ</button>
</form>
</div>
<div class="popup" id="popup7" style="display: none;">
<form id="form7">
<label for="additionalInfo">追加情報</label>
<textarea id="additionalInfo" name="additionalInfo" placeholder="追加情報を入力してください"></textarea>
<input type="hidden" id="hidden_additionalInfo" name="hidden_additionalInfo">
<button type="button" onclick="previousPopup('popup6')">戻る</button>
<button type="button" onclick="showConfirmation()">確認</button>
</form>
</div>
<div class="popup" id="popup8" style="display: none;">
<form id="form8" action="survey.php" method="POST">
<h3>確認画面</h3>
<p id="confirm_zipcode"></p>
<p id="confirm_personal"></p>
<p id="confirm_service"></p>
<p id="confirm_timing"></p>
<p id="confirm_details"></p>
<p id="confirm_email"></p>
<p id="confirm_additionalInfo"></p>
<button type="button" onclick="previousPopup('popup7')">戻る</button>
<button type="submit">送信</button>
<!-- Hidden fields to send data to PHP -->
<input type="hidden" name="zipcode" id="hidden_zipcode">
<input type="hidden" name="personal" id="hidden_personal">
<input type="hidden" name="service" id="hidden_service">
<input type="hidden" name="timing" id="hidden_timing">
<input type="hidden" name="details" id="hidden_details">
<input type="hidden" name="email" id="hidden_email">
<input type="hidden" name="additionalInfo" id="hidden_additionalInfo">
</form>
</div>
</main>
<script src="style.js"></script>
</body>
</html>
style.js
function nextPopup(nextId, inputId, hiddenId) {
var inputValue;
// 入力要素がラジオボタングループかどうかを確認
var inputElement = document.getElementById(inputId);
if (inputElement && inputElement.type !== 'radio') {
inputValue = inputElement.value; // 入力要素の値を取得
} else {
var radioButtons = document.getElementsByName(inputId);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
inputValue = radioButtons[i].value; // チェックされているラジオボタンの値を取得
break;
}
}
}
// 隠し入力要素に値を設定
var hiddenInputElement = document.getElementById(hiddenId);
hiddenInputElement.value = inputValue;
console.log(hiddenId + " set to: " + hiddenInputElement.value); // デバッグ用
// すべてのポップアップを非表示にする
var popups = document.getElementsByClassName('popup');
for (var i = 0; i < popups.length; i++) {
popups[i].style.display = 'none';
}
// 次のポップアップを表示
document.getElementById(nextId).style.display = 'block';
}
function previousPopup(prevId) {
// すべてのポップアップを非表示にする
var popups = document.getElementsByClassName('popup');
for (var i = 0; i < popups.length; i++) {
popups[i].style.display = 'none';
}
// 前のポップアップを表示
document.getElementById(prevId).style.display = 'block';
}
function showConfirmation() {
// 隠しフィールドに最新の値を保存
document.getElementById('hidden_zipcode').value = document.getElementById('zipcode').value;
document.getElementById('hidden_personal').value = document.querySelector('input[name="personal"]:checked').value;
document.getElementById('hidden_service').value = document.getElementById('service').value;
document.getElementById('hidden_timing').value = document.getElementById('timing').value;
document.getElementById('hidden_details').value = document.getElementById('details').value;
document.getElementById('hidden_email').value = document.getElementById('email').value;
document.getElementById('hidden_additionalInfo').value = document.getElementById('additionalInfo').value;
// デバッグ用ログ
console.log("zipcode: " + document.getElementById('hidden_zipcode').value);
console.log("personal: " + document.getElementById('hidden_personal').value);
console.log("service: " + document.getElementById('hidden_service').value);
console.log("timing: " + document.getElementById('hidden_timing').value);
console.log("details: " + document.getElementById('hidden_details').value);
console.log("email: " + document.getElementById('hidden_email').value);
console.log("additionalInfo: " + document.getElementById('hidden_additionalInfo').value);
// 確認画面のテキストを更新
document.getElementById('confirm_zipcode').innerText = "郵便番号: " + document.getElementById('hidden_zipcode').value;
document.getElementById('confirm_personal').innerText = "個人/法人: " + document.getElementById('hidden_personal').value;
document.getElementById('confirm_service').innerText = "工事種目: " + document.getElementById('hidden_service').value;
document.getElementById('confirm_timing').innerText = "工事時期: " + document.getElementById('hidden_timing').value;
document.getElementById('confirm_details').innerText = "電話番号: " + document.getElementById('hidden_details').value;
document.getElementById('confirm_email').innerText = "メールアドレス: " + document.getElementById('hidden_email').value;
document.getElementById('confirm_additionalInfo').innerText = "追加情報: " + document.getElementById('hidden_additionalInfo').value;
// すべてのポップアップを非表示にする
var popups = document.getElementsByClassName('popup');
for (var i = 0; i < popups.length; i++) {
popups[i].style.display = 'none';
}
// 確認ポップアップを表示
document.getElementById('popup8').style.display = 'block';
}
// フォーム送信時のイベントリスナーを追加
document.getElementById('form8').addEventListener('submit', function() {
// フォーム送信前に追加情報を保存
document.getElementById('hidden_additionalInfo').value = document.getElementById('additionalInfo').value;
document.getElementById('hidden_email').value = document.getElementById('email').value;
// デバッグ用ログ
console.log("Form submission:");
console.log("zipcode: " + document.getElementById('hidden_zipcode').value);
console.log("personal: " + document.getElementById('hidden_personal').value);
console.log("service: " + document.getElementById('hidden_service').value);
console.log("timing: " + document.getElementById('hidden_timing').value);
console.log("details: " + document.getElementById('hidden_details').value);
console.log("email: " + document.getElementById('hidden_email').value);
console.log("additionalInfo: " + document.getElementById('hidden_additionalInfo').value);
});
survey.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$zipcode = isset($_POST['zipcode']) ? $_POST['zipcode'] : '';
$personal = isset($_POST['personal']) ? $_POST['personal'] : '';
$service = isset($_POST['service']) ? $_POST['service'] : '';
$timing = isset($_POST['timing']) ? $_POST['timing'] : '';
$details = isset($_POST['details']) ? $_POST['details'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';
$additionalInfo = isset($_POST['additionalInfo']) ? $_POST['additionalInfo'] : '';
// メール送信先
$to_primary = 'example';
$to_secondary = $email;
// 件名をUTF-8にエンコード
$subject = mb_encode_mimeheader('新しい問い合わせ', 'UTF-8');
// メッセージ内容
$message = "郵便番号: $zipcode\n";
$message .= "個人/法人: $personal\n";
$message .= "工事種目: $service\n";
$message .= "工事時期: $timing\n";
$message .= "電話番号: $details\n";
$message .= "メールアドレス: $email\n";
$message .= "追加情報: $additionalInfo\n";
// メールヘッダーにContent-Typeを追加
$headers = "From: noreply@example.com\r\n";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
// メールを送信
$mail_to_primary = mail($to_primary, $subject, $message, $headers);
$mail_to_secondary = mail($to_secondary, $subject, $message, $headers);
// デバッグメッセージ
if ($mail_to_primary && $mail_to_secondary) {
echo "<h1>ありがとうございます！</h1>";
echo "<p>お問い合わせ内容を受け付けました。</p>";
} else {
echo "<h1>送信エラー</h1>";
echo "<p>メールの送信に失敗しました。以下の情報を確認してください。</p>";
echo "<p>宛先: $to_primary, $to_secondary</p>";
echo "<p>郵便番号: $zipcode</p>";
echo "<p>個人/法人: $personal</p>";
echo "<p>工事種目: $service</p>";
echo "<p>工事時期: $timing</p>";
echo "<p>電話番号: $details</p>";
echo "<p>メールアドレス: $email</p>";
echo "<p>追加情報: $additionalInfo</p>";
}
}
?>
