如何使 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 混淆並給出不好的結果，就像它添加了&一樣。