HTMLでお問合せフォームを作る際の複数選択チェックボックスの実装について

Question

実現したいこと

①チェックボックスで複数選択をした際にも、管理者宛のお問合せ内容確認メールに複数項目を反映したい。

②複数項目選択可能のチェックボックスを必須項目にしたい。

発生している問題・分からないこと

①Q1とQ2において、複数選択をした際にお問合せ内容確認メールに複数項目が反映されない(空欄になる)。その他を選択した場合のみ、項目「その他」がお問合せ内容確認メールに反映される。

②Q1とQ2を必須項目にしたいが、無選択の場合でも送信できてしまう。

該当のソースコード

<tr>
    <th>Q1 該当項目をお選びください。（複数チェック可）</th>
    <td>
        <label><input type="checkbox" name="type" value="項目1" class="js-check" 　><span>項目1</span></label>
        <label><input type="checkbox" name="type" value="項目2" class="js-check"><span>項目2</span></label>
        <label><input type="checkbox" name="type" value="その他" class="js-check"
                onclick="toggleOtherInput('type', 'otherInputBox1')"><span>その他</span></label>
        <div id="otherInputBox1" style="display: none;">
            <input type="text" name="otherType" placeholder="その他をチェックした方はこちらにご記入ください">
        </div>
    </td>
</tr>
<tr>
    <th>Q2 該当項目をお選びください。（複数チェック可）</th>
    <td>
        <label><input type="checkbox" name="problem" value="項目3" class="js-check"><span>項目3</span></label>
        <label><input type="checkbox" name="problem" value="項目4" class="js-check"><span>項目4</span></label>
        <label><input type="checkbox" name="problem" value="項目5" class="js-check"><span>項目5</span></label>
        <label><input type="checkbox" name="problem" value="その他" class="js-check"
                onclick="toggleOtherInput('problem', 'otherInputBox3')"><span>その他</span></label>
        <div id="otherInputBox3" style="display: none;">
            <input type="text" name="otherProblem" placeholder="その他をチェックした方はこちらにご記入ください">
        </div>
    </td>
<tr>
<tr>
    <th class="input">Q3 該当項目をお選びください。</th>
    <td>
        <label><input type="radio" name="status" value="項目6" class="js-check" onclick="formSwitch('otherInputBox4')"
                required><span>項目6</span></label>
        <label><input type="radio" name="status" value="項目7" class="js-check" required><span>項目7</span></label>
        <div id="otherInputBox4" style="display: none;">
            <input type="text" name="otherToolName" placeholder="項目6をお選びになった方はこちらに詳細をご記入ください">
        </div>
    </td>
</tr>

======================================================================


<script>
    document.querySelector('form').addEventListener('submit', function (event) {
        event.preventDefault(); // フォームのデフォルト送信を防ぐ
        const formData = new FormData(this);

        fetch('send_mail.php', {
            method: 'POST',
            body: formData
        })
            .then(response => response.text())
            .then(data => {
                window.location.href = 'thank_you.html';
            })
            .catch(error => {
                console.error('Error:', error);
            });
    });


    function toggleOtherInput(groupName, inputBoxId) {
        // チェックされている「その他」以外の入力欄を非表示にする
        const checkboxes = document.querySelectorAll(`input[name="${groupName}"]`);
        const selectedInputBox = document.getElementById(inputBoxId);
        let showOtherInput = false;

        // チェックされている項目に「その他」が含まれているか確認
        checkboxes.forEach((checkbox) => {
            if (checkbox.checked && checkbox.value === "その他") {
                showOtherInput = true;
            } else if (checkbox.checked && checkbox.value !== "その他") {
                showOtherInput = false;
            }
        });

        // 「その他」がチェックされている場合のみ表示
        selectedInputBox.style.display = showOtherInput ? "block" : "none";
    }


    function formSwitch(inputBoxId) {
        // 他の「その他」入力欄を非表示にする
        document.querySelectorAll('[id^="otherInputBox"]').forEach(function (box) {
            box.style.display = "none";
        });

        // 該当する入力欄のみ表示する
        if (inputBoxId) {
            var selectedInputBox = document.getElementById(inputBoxId);
            if (selectedInputBox) {
                selectedInputBox.style.display = "block";
            }
        }
    }
    // ページ読み込み時に初期化
    window.addEventListener('load', formSwitch);


</script>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $type = htmlspecialchars($_POST['type']);
    $otherType = htmlspecialchars($_POST['otherType']);
    $problem = htmlspecialchars($_POST['problem']);
    $otherProblem = htmlspecialchars($_POST['otherProblem']);
    $status = htmlspecialchars($_POST['status']);
    $otherToolName = htmlspecialchars($_POST['otherToolName']);

    $to = "メールアドレスを入れています";
    $subject = "株式会社〇〇｜お問合せがありました";
    $body = "下記内容でお問合せがありました\n\n";
    $body .= "Q1 質問1： $type\n";
    $body .= "[【Q1でその他】を選択した方のみ]その他の内容： $otherType\n";
    $body .= "Q2 質問2： $problem\n";
    $body .= "[【Q2でその他】を選択した方のみ]その他の内容： $otherProblem\n";
    $body .= "Q3 質問3： $status\n";
    $body .= "[【Q3で項目1】を選択した方のみ]項目1の詳細： $otherToolName\n";


    $headers = "From: [e-mail]";

    if (mail($to, $subject, $body, $headers)) {
        echo "success";
    } else {
        echo "failure";
    }
} else {
    echo "不正なリクエストです。";
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $recaptchaSecret = '';
    $recaptchaResponse = $_POST['g-recaptcha-response'];

    // reCAPTCHAの検証リクエストを送信
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = [
        'secret' => $シークレットキー,
        'response' => $recaptchaResponse
    ];

    $options = [
        'http' => [
            'method' => 'POST',
            'header' => 'Content-type: application/x-www-form-urlencoded',
            'content' => http_build_query($data)
        ]
    ];

    $context = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    $resultJson = json_decode($result);

    // reCAPTCHAの検証結果を確認
    if ($resultJson->success != true) {
        echo 'reCAPTCHA verification failed. Please try again.';
    } else {
        // ここにフォーム処理のコードを追加
        echo 'reCAPTCHA verification succeeded.';
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

いろいろ調べましたが、わかりませんでした。

補足

恥ずかしながらjavasscriptとPHPの初学者でして、どこのコードに問題があるのかわかりかねるため修正箇所を教えていただけないでしょうか。
該当と思われる箇所のコードを添付いたします。
記載内容以外で必要な内容があればご質問頂けますと幸いです。
よろしくお願いいたします。

Answer 1

フォームのチェックボックスから選択された項目をPOSTリクエストでサーバーに送信し、サーバーサイドでその値を取得して管理者にメールを送信することですか

Comments

[master_o]

いただいた通りになります！

Answer 2

参考までに
「data-required」属性を設定した要素は何もチェックがないときにrequiredされる・・・みたいな仕組みが楽かもしれません。配列をPHPに送るときはnameの付け方を工夫してください。(今回はその他の項目を受け渡す処理は割愛)
またPHP側もfilter_inputで受けると処理は楽になります

<?PHP
$type   =filter_input(INPUT_POST,"type"   ,FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$problem=filter_input(INPUT_POST,"problem",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
$status =filter_input(INPUT_POST,"status" ,FILTER_DEFAULT);
$submit =filter_input(INPUT_POST,"submit" ,FILTER_DEFAULT);
if($submit){
  $body = "下記内容でお問合せがありました".PHP_EOL.PHP_EOL;
  $body .= "Q1 質問1： ".implode(",",$type).PHP_EOL;
  $body .= "Q2 質問2： ".implode(",",$problem).PHP_EOL;
  $body .= "Q3 質問3： ".$status.PHP_EOL;
  print "<pre>".PHP_EOL;
  var_dump($body);
  print "</pre>".PHP_EOL;
}
?>
<script>

const setRequired=()=>{
  [...document.querySelectorAll('[name][data-required]')].forEach(x=>{
    x.toggleAttribute('required',!document.querySelector(`[name="${x.name}"][data-required]:checked`));
  });
};
window.addEventListener('DOMContentLoaded', ()=>{
  setRequired();
  document.addEventListener('change', ()=>{
    setRequired();
  });
});
</script>
<form method="post">
<fieldset>
<legend>Q1 該当項目をお選びください。（複数チェック可）</legend>
<p>
<label><input type="checkbox" name="type[]" value="項目1"  data-required><span>項目1</span></label>
<label><input type="checkbox" name="type[]" value="項目2"  data-required><span>項目2</span></label>
<label><input type="checkbox" name="type[]" value="その他" data-required><span>その他</span></label>
</p>
</fieldset>
<fieldset>
<legend>Q2 該当項目をお選びください。（複数チェック可）</legend>
<p>
<label><input type="checkbox" name="problem[]" value="項目3"  data-required><span>項目3</span></label>
<label><input type="checkbox" name="problem[]" value="項目4"  data-required><span>項目4</span></label>
<label><input type="checkbox" name="problem[]" value="項目5"  data-required><span>項目5</span></label>
<label><input type="checkbox" name="problem[]" value="その他" data-required><span>その他</span></label>
</p>
</fieldset>
<fieldset>
<legend>Q3 該当項目をお選びください。</legend>
<p>
<label><input type="radio" name="status" value="項目6" required><span>項目6</span></label>
<label><input type="radio" name="status" value="項目7" required><span>項目7</span></label>
</p>
</fieldset>
<input type="submit" name="submit" value="send">
</form>

Comments

[master_o]

丁寧にご連絡いただきありがとうございます。参考にさせていただきます。

Answer 3

フリーのフォームフレームワークをカスタマイズして書き直すことで解決しました！

Comments

[juner]

具体的には何をどうカスタマイズしたのかとても気になります。

[master_o]

PHP工房の無料配布コードをカスタマイズしました！