如何使 html 表单中的内容出现在 email 正文中

Question

我有一个包含多行输入的 html 表单。 我使用 javascript function 创建这些输入，如下例所示。

Javascript

const open = document.getElementById("modal-open-btn");
var i = 1;

open.addEventListener('click', () => { 
    // opens the modal that has the form
    modal_container.classList.add('show');
      
    // get data from json
    $.getJSON("../static/data.json", function(data) {      
        $.each(data, function(key, value) { 
            $("<div />", { "class":"form-group" })
            .append($("<label />", { for:"question" +i, text:"Question " +i}))
            .append($("<input />", { type: "text", id:"question"+i, value: key }))
            .appendTo(".example-output");
            $("<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++;
        })   
    });
})

HTML

<input id="modal-open-btn" class="right-button"></input>
<form class="form-container" action="mailto:?subject=Email" method="post" enctype="text/plain" >
     <p>Please find the details below.</p>
     <div class="example-output"></div>
     <button type="submit" class="btn btn-primary">Submit</button>
</form>

目前，如果用户单击 html 表单内的“提交”按钮，它会打开一个空白的 outlook email。但是，我想用表单内显示的内容预填充 outlook email 正文（class = "form -container"）除了提交按钮。 例如，我想包含文本“请在下面找到详细信息”。 其他值从 JS function 传递到 outlook email 正文中的 div =example-output'。

是否可以使用表单中的内容自动填充 outlook email 正文？ 在 JS function 中，它目前使用“输入”标签，但如果更容易的话，我也可以使用其他文本标签，如“p”。 或者是否可以将文本值直接从 js 传递到 outlook email 正文？ 我真的不关心 label 标签。 我只想展示捕获的内容

Answer 1

就像你在URL设置主题一样，你可以设置正文...

正文=内容

但是您需要使用 javascript，因此您需要处理 onSubmit 事件，而不是使用表单中的操作。

const form = document.getElementsByTagName("form")[0];
form.addEventListener('submit',()=>{
    // Change "inputName" with the name of your input
    const body = form.inputName.value;
    location.href = "mailto:?subject=Email&body="+encodeURIComponent(body);
    return false;
});

如您所见，我使用inputName ，您应该使用要使用的输入的名称更改它，如果需要，可以连接。

我使用encodeUIRComponent否则输入内容可能会与 URL 混淆并给出不好的结果，就像它添加了&一样。