如何修复表单Submit按钮无法将内容发送至指定邮箱的问题

问题根源 #

1. button标签不支持href属性：你给submit按钮添加的href属性无效，该属性仅适用于<a>标签，button标签不识别它。
2. form标签缺少核心配置：未指定表单的提交目标（action）和提交方式（method），导致点击按钮后浏览器没有明确的执行逻辑。
3. 表单控件无name属性：即便提交成功，邮箱中只会收到无标识的内容，无法区分姓名、邮箱等对应字段。

纯HTML修复方案 #

无需JS，直接修改表单相关代码即可解决：

1. 给<form>标签添加action（指向你的邮箱地址）、method="post"、enctype="text/plain"（让邮件内容格式更清晰易读）。
2. 为每个input和textarea添加name属性，对应字段名称，确保邮件内容能区分各信息项。
3. 删除button上无用的href属性。

修改后的核心代码片段：

<form action="mailto:johnsonisaiah13@yahoo.com" method="post" enctype="text/plain">
    <div class="input-row">
        <div class="input-group">
            <label>Name</label>
            <input type="text" placeholder="Your Name" required name="name">
        </div>
        <div class="input-group">
            <label>Phone</label>
            <input type="text" placeholder="(888) 888-8888" name="phone">
        </div>
    </div>
    <div class="input-row">
        <div class="input-group">
            <label>Email</label>
            <input type="email" placeholder="YourEmail@Email.com" required name="email">
        </div>
        <div class="input-group">
            <label>Subject</label>
            <input type="text" placeholder="You're Hired!" required name="subject">
        </div>
    </div>
    <label>Message</label>
    <textarea rows="5" placeholder="You are so cool, please make my website cool too!" required name="message"></textarea>
    <button class="form-button" type="submit" value="Send">SEND</button>
</form>

可选JS增强（优化用户体验） #

如果需要在提交后关闭模态框或给出提示，可添加一段简单JS：

const form = document.querySelector('form');
const modalContainer = document.getElementById('modal_container');

form.addEventListener('submit', function() {
    setTimeout(() => {
        modalContainer.classList.remove('show');
    }, 1000); // 延迟1秒关闭模态框，给用户操作邮件客户端的反应时间
});

注意事项 #

• 这种mailto方式依赖用户本地配置的邮件客户端（如Outlook、苹果邮件），若用户未配置客户端，可能无法正常唤起邮件发送窗口。
• 邮件内容以纯文本形式发送，仅支持基础格式，无法添加复杂样式或附件。

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