WordPressの利点の一つは、バックエンドの知識が必要なく簡単にお問い合わせフォームを作成できることです。今回はMW WP Formを使用してお問い合わせフォームを作成します。この方法のメリットは、確認画面から完了画面までの遷移を容易に構築できることです。それでは始めましょう。※申し訳ありませんが、本記事はフォームの構築を目的としておりますので、予めCSSでデザインを作成したうえで、進めていきます。デザインの形成は割愛していますので予めご了承ください。

同じメールアドレスを入力させなくする

<script>
    document.querySelector('form').addEventListener('submit', function(event) {
        var email1 = document.getElementById('inputMail').value;
        var email2 = document.getElementById('inputMail2').value;

        // すでに存在するエラーメッセージがあれば削除
        var oldErrorMessage = document.getElementById('emailError');
        if (oldErrorMessage) oldErrorMessage.remove();

        if (email1 === email2) {
            // 新しくp要素（エラーメッセージ）を作成
            var errorMessage = document.createElement('p');
            errorMessage.style.color = 'red';
            errorMessage.innerText = 'メールアドレスが重複しています';
            errorMessage.id = 'emailError'; // このエラーメッセージにIDを付与

            // エラーメッセージをinputMail2の次の要素として挿入
            var inputMail2 = document.getElementById('inputMail2');
            inputMail2.parentNode.insertBefore(errorMessage, inputMail2.nextSibling);

            // フォーム送信を止める
            event.preventDefault();
        }
    });
</script>

ChatGPTが情報を提供してくれました。非常に役立つツールです。もしまだ学習で取り入れていない方は、試してみることをおすすめします。

これで以上です。次回は、エラーメッセージの設定と自動返信メールの設定を行います。