Svelte+Astro环境下Ajax表单无法通过FormSubmit API发送邮件

核心问题分析 #

1. 表单未设置id="form"，导致jQuery选择器jq("#form")无法选中表单，提交事件根本没绑定成功——点击提交按钮触发的是浏览器默认表单提交行为，所以页面刷新，AJAX请求完全没发出去。
2. 就算事件绑定成功，也没阻止浏览器默认的表单提交逻辑，依然会触发页面刷新，中断AJAX请求。

修复步骤（jQuery版本） #

1. 给表单添加id #

修改表单HTML，补上id="form"：

<form method="POST" id="form">
   <div class="flex">
        <input class="input-style" id="name" type="text" name="name" required placeholder="Name">
        <input class="input-style" id="email" type="email" name="email" required placeholder="Email"> 
         <input type="hidden" name="_subject" value="Downlu - Support Email">
    </div>
    <textarea class="input-style" id="message" name="message" cols="60" rows="4" placeholder="Message" required></textarea>
     <button class="btn-submit" type="submit">Send</button>
</form>

2. 阻止默认提交行为并完善AJAX代码 #

在提交事件处理函数开头添加event.preventDefault()，同时把隐藏字段的内容整合到请求数据里：

<script>
    import { onMount } from 'svelte';
    import jq from 'jquery';

    onMount(() => {
        jq("#form").submit(function (event) {
            // 阻止浏览器默认表单提交行为
            event.preventDefault();
            
            var formData = {
                name: jq("#name").val(),
                email: jq("#email").val(),
                message: jq("#message").val(),
                _subject: "Downlu - Support Email"
            };

            jq.ajax({
                method: 'POST',
                url: 'https://formsubmit.co/ajax/01e95b7b608117ff23368c8ea240889d',
                dataType: 'json',
                accepts: 'application/json',
                data: formData,
                success: (data) => console.log('发送成功:', data),
                error: (err) => console.error('发送失败:', err)
            }); 
        });
    });
</script>

更优雅的Svelte原生实现（推荐） #

既然用了Svelte，完全可以抛弃jQuery，用框架原生的表单绑定和事件处理，代码更简洁且符合框架特性：

<script>
    let name = '';
    let email = '';
    let message = '';
    const subject = "Downlu - Support Email";

    async function handleSubmit(e) {
        e.preventDefault();
        
        const formData = {
            name,
            email,
            message,
            _subject: subject
        };

        try {
            const response = await fetch('https://formsubmit.co/ajax/01e95b7b608117ff23368c8ea240889d', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            });

            const data = await response.json();
            console.log('发送成功:', data);
            // 发送成功后可以清空表单
            name = '';
            email = '';
            message = '';
        } catch (err) {
            console.error('发送失败:', err);
        }
    }
</script>

<form on:submit={handleSubmit}>
   <div class="flex">
        <input class="input-style" type="text" bind:value={name} required placeholder="Name">
        <input class="input-style" type="email" bind:value={email} required placeholder="Email"> 
    </div>
    <textarea class="input-style" bind:value={message} cols="60" rows="4" placeholder="Message" required></textarea>
     <button class="btn-submit" type="submit">Send</button>
</form>

额外排查点 #

• 确认formsubmit.co提供的API URL正确，且你的接收邮箱已经在formsubmit后台完成验证（未验证邮箱大概率收不到邮件）。
• 打开浏览器控制台（F12），查看Network标签，确认AJAX请求是否发送，以及返回的状态码和错误信息，方便定位深层问题。

内容的提问来源于stack exchange，提问作者Xanthan