如何让HTML表单内容自动填充至Outlook邮件正文？

当然可以实现，核心思路是动态构建包含邮件正文的mailto链接，替代表单默认的提交逻辑。以下提供两种可行方案，你可以根据需求选择：

方案一：保留输入框（允许用户修改内容） #

这种方案保留原有的input输入框，允许用户编辑内容后再生成邮件：

修改后的HTML #

<input id="modal-open-btn" class="right-button" type="button" value="Open Modal">
<form class="form-container">
     <p class="email-intro">Please find the details below.</p>
     <div class="example-output"></div>
     <button type="submit" class="btn btn-primary">Submit</button>
</form>

修改后的JavaScript #

const open = document.getElementById("modal-open-btn");
const form = document.querySelector(".form-container");
let i = 1;

open.addEventListener('click', () => { 
    modal_container.classList.add('show');
      
    $.getJSON("../static/data.json", function(data) {      
        $(".example-output").empty(); // 清空旧内容，避免重复加载
        i = 1; // 重置计数
        $.each(data, function(key, value) { 
            // 生成Question输入项
            $("<div />", {"class":"form-group"})
            .append($("<label />", { for:"question" +i, text:"Question " +i}))
            .append($("<input />", { type: "text", id:"question"+i, value: key }))
            .appendTo(".example-output");
            // 生成Answer输入项
            $("<div />", {"class":"form-group"})
            .append($("<label />", { for:"answer" +i, text:"Answer " +i}))
            .append($("<input />", { type: "text", id:"answer"+i, value: value }))
            .appendTo(".example-output");
            i++;
        })   
    });
});

// 处理表单提交事件
form.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交行为
    
    // 收集固定文本内容
    const introText = document.querySelector(".email-intro").textContent;
    let emailBody = introText + "\n\n"; // 换行分隔
    
    // 遍历所有输入项，拼接Question和Answer
    const formGroups = document.querySelectorAll(".form-group");
    for (let j = 0; j < formGroups.length; j += 2) {
        const questionVal = formGroups[j].querySelector("input").value;
        const answerVal = formGroups[j+1].querySelector("input").value;
        emailBody += `Question: ${questionVal}\nAnswer: ${answerVal}\n\n`;
    }
    
    // 编码内容避免特殊字符问题
    const encodedBody = encodeURIComponent(emailBody);
    // 构建完整的mailto链接
    const mailtoLink = `mailto:?subject=Email&body=${encodedBody}`;
    
    // 打开邮件客户端
    window.location.href = mailtoLink;
});

方案二：改用文本元素（无需用户编辑） #

如果不需要用户修改内容，直接展示文本更简洁，修改动态生成的部分为<p>标签即可：

修改动态生成逻辑的JavaScript片段 #

$.getJSON("../static/data.json", function(data) {      
    $(".example-output").empty();
    i = 1;
    $.each(data, function(key, value) { 
        // 用p标签直接展示Question和Answer
        $("<div />", {"class":"form-group"})
        .append($("<p />", { text:`Question ${i}: ${key}` }))
        .appendTo(".example-output");
        $("<div />", {"class":"form-group"})
        .append($("<p />", { text:`Answer ${i}: ${value}` }))
        .appendTo(".example-output");
        i++;
    })   
});

对应的提交处理逻辑 #

form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const introText = document.querySelector(".email-intro").textContent;
    let emailBody = introText + "\n\n";
    
    // 读取所有p标签的文本内容
    const detailTexts = document.querySelectorAll(".example-output p");
    detailTexts.forEach(textEl => {
        emailBody += textEl.textContent + "\n";
    });
    
    const encodedBody = encodeURIComponent(emailBody);
    const mailtoLink = `mailto:?subject=Email&body=${encodedBody}`;
    window.location.href = mailtoLink;
});

原理说明 #

原表单提交空白邮件的原因是：默认mailto表单提交只会传递带有name属性的input值，且无法包含固定文本内容。通过手动构建mailto链接，我们可以自定义邮件正文的所有内容，包括固定文本和动态生成的信息。

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