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

Question

I have a html form that contains multiple lines of inputs. I create these inputs using javascript function like the example below.

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>

Currently, if a user clicks the "Submit" button inside the html form, it opens a blank outlook email. However, I'd like to pre-populate the outlook email body with the content that appears inside the form (class = "form-container") except the submit button. For example, I want to include the text "Please find the details below." and the other values passed from the JS function to div =example-output' in the outlook email body.

Is it possible to auto-populate the outlook email body with the content within the form? In the JS function, it currently uses "input" tag but I'm okay with using other text tags like "p" if it's easier. Or is it posssible to pass the text values directly from the js to outlook email body? I don't really care about the label tag. I just want to show what's capture

Answer 1

Just like you set the subject in the URL, you can set the body...

body=Content

But you'll need to use javascript, so instead of using an action in the form you'll need to handle the onSubmit event.

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;
});

As you see, I used inputName , which you should change using the name of the input you want to use, you can concatenate if you want.

I used encodeUIRComponent or else the inputs content could mess with the URL and give bad results, like if it added a & .