javascript - 使用 Emailjs 时，我的收件箱没有收到表单输入信息

Question

我最近开始使用 Emailjs 将表单输入信息接收到我自己的电子邮件地址。一切似乎都设置得很好，但(经过几个小时的研究)似乎无法弄清楚为什么我没有收到任何输入信息。任何帮助将不胜感激!

HTML 代码

    <!--SCRIPT FOR EMAILjs-->

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
    <script type="text/javascript">
        (function () {
            emailjs.init("user_xxxxxxxxxxxxxxxxxxxxx");
        })();
    </script>


    <!--LOCATION FORM-->

    <form class="contact_form" onsubmit="return sendMail(this);">
        <input type="text" name="full_name" class="form_inputs fullName_input" autocomplete="off" placeholder="Full Name"
            onfocus="this.placeholder = ''" onblur="this.placeholder = 'Full Name'">

        <input type="text" name="emailAddress" class="form_inputs emailAddress_input" autocomplete="off"
            placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'">

        <p class="cleaningLocationTitle">Cleaning Location:</p>

        <input type="text" name="streetAddress" class="form_inputs streetAddress_input" autocomplete="off"
            placeholder="Street Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Street Address'"
            required>

        <input type="text" name="townCity" class="form_inputs townCity_input" autocomplete="off" placeholder="Town/City"
            onfocus="this.placeholder = ''" onblur="this.placeholder = 'Town/City'" required>

        <input type="text" name="postcode" class="form_inputs postcode_input" autocomplete="off" placeholder="Postcode"
            onfocus="this.placeholder = ''" onblur="this.placeholder = 'Postcode'">

        <textarea class="short_description_box" name="cleanRequest"
            placeholder="Please give a short description of your cleaning needs. i.e Washing dishes, vacuuming throughout..."
            onfocus="this.placeholder = ''"
            onblur="this.placeholder = 'Please give a short description of your cleaning needs. i.e Washing dishes, vacuuming throughout...'"></textarea>
    </form>


    <div class="findcleaner_buttonWrap">
        <button class="findcleaner_button" type="submit" onClick="location.href='mapsAPI.html'">Find me a cleaner
        </button>
    </div>

JAVASCRIPT 代码

function sendMail(contactForm) {
    emailjs.send("gmail", "contact_form", {
            "full_name": contactForm.fullname.value,
            "user_email": contactForm.emailAddress.value,
            "street_address": contactForm.streetAddress.value,
            "town_city": contactForm.townCity.value,
            "user_postcode ": contactForm.postcode.value,
            "clean_request  ": contactForm.cleanRequest.value,
        })
        .then(
            function (response) {
                console.log("success", response);
            },
            function (error) {
                console.log("FAILED", error);
            }
        )
}

Answer 1

在您的表单中，代码期望提交表单以触发 EmailJs。但是，表单本身没有提交按钮(任何类型)来触发提交。相反，您在表单外部有一个提交按钮，用于将访问者重定向到 mapsAPI.html。

我将提交按钮移至表单中，从按钮中删除了 onclick 处理程序，并将位置重定向添加到 emailjs 函数的成功中。

  <!--SCRIPT FOR EMAILjs-->

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.3.2/dist/email.min.js"></script>
    <script type="text/javascript">
        (function () {
            emailjs.init("user_xxxxxxxxxxxxxxxxxxxxx");
        })();
    </script>


    <!--LOCATION FORM-->

    <form class="contact_form" onsubmit="return sendMail(this);">
        <input type="text" name="full_name" class="form_inputs fullName_input" autocomplete="off" placeholder="Full Name"
            onfocus="this.placeholder = ''" onblur="this.placeholder = 'Full Name'">

        <input type="text" name="emailAddress" class="form_inputs emailAddress_input" autocomplete="off"
            placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'">

        <p class="cleaningLocationTitle">Cleaning Location:</p>

        <input type="text" name="streetAddress" class="form_inputs streetAddress_input" autocomplete="off"
            placeholder="Street Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Street Address'"
            required>

        <input type="text" name="townCity" class="form_inputs townCity_input" autocomplete="off" placeholder="Town/City"
            onfocus="this.placeholder = ''" onblur="this.placeholder = 'Town/City'" required>

        <input type="text" name="postcode" class="form_inputs postcode_input" autocomplete="off" placeholder="Postcode"
            onfocus="this.placeholder = ''" onblur="this.placeholder = 'Postcode'">

        <textarea class="short_description_box" name="cleanRequest"
            placeholder="Please give a short description of your cleaning needs. i.e Washing dishes, vacuuming throughout..."
            onfocus="this.placeholder = ''"
            onblur="this.placeholder = 'Please give a short description of your cleaning needs. i.e Washing dishes, vacuuming throughout...'"></textarea>



    <div class="findcleaner_buttonWrap">
        <button class="findcleaner_button" type="submit">Find me a cleaner
        </button>
    </div>

</form>

function sendMail(contactForm) {
    emailjs.send("gmail", "contact_form", {
            "full_name": contactForm.fullname.value,
            "user_email": contactForm.emailAddress.value,
            "street_address": contactForm.streetAddress.value,
            "town_city": contactForm.townCity.value,
            "user_postcode ": contactForm.postcode.value,
            "clean_request  ": contactForm.cleanRequest.value,
        })
        .then(
            function (response) {
                location.href='mapsAPI.html
                console.log("success", response);
            },
            function (error) {
                console.log("FAILED", error);
            }
        )
}