I have an app i am designing and there is a page for emails. The user inputs their name, email address and message and then clicks 'submit'. this works, but i don't know how to make the user's input be on the email. this is the code so far;

<form id="contacts-form" action="mailto:[email protected]">
    <ul class = "rounded">
        <li style = "color: #FFFFFF">Full Name:<input type="text" placeholder = "J. Doe" name = "signature" id = 'signature' /></li>
        <li style = "color: #FFFFFF">E-mail:<input type="text" placeholder = "[email protected]" name = "address" id = 'address' /></li>
        <li style = "color: #FFFFFF">Message:<input type = "text" placeholder = "Message" name = "message" id = 'message' /></li>

        <a href="mailto:address?subject=subject&body=message" class="button">Submit</a>
    </ul>
</form>

does anyone know how to change the code to allow the user input to go onto the email? Thanks a lot in advance x

I have an app i am designing and there is a page for emails. The user inputs their name, email address and message and then clicks 'submit'. this works, but i don't know how to make the user's input be on the email. this is the code so far;

<form id="contacts-form" action="mailto:[email protected]">
    <ul class = "rounded">
        <li style = "color: #FFFFFF">Full Name:<input type="text" placeholder = "J. Doe" name = "signature" id = 'signature' /></li>
        <li style = "color: #FFFFFF">E-mail:<input type="text" placeholder = "[email protected]" name = "address" id = 'address' /></li>
        <li style = "color: #FFFFFF">Message:<input type = "text" placeholder = "Message" name = "message" id = 'message' /></li>

        <a href="mailto:address?subject=subject&body=message" class="button">Submit</a>
    </ul>
</form>

does anyone know how to change the code to allow the user input to go onto the email? Thanks a lot in advance x

• javascript
• html
• email
• mailto

3 Answers 3

Try writing a function like this:

function sendEmail(){
    var addr = document.getElementById('address').value;
    var sig = document.getElementById('signature').value;
    var msg= document.getElementById('message').value;

    //concatenate to string to build URL
    var url = "mailto:" + .... + addr + ...;
    location.href = url; //(might want to use window.location or something else here)
}

And then change your link to:

<a href="javasctipt:void(0)" onclick="javascript:sendEmail()" class="button">Submit</a>

You'll have to use javascript to obtain the input values. With onclick="javascript:window.location='putURLhere'" you can imitate a link. What's left now is to create a URL that contains your values, which you can get with document.getElementById(id).value. With + you can concatenate them.

Example:

<a onclick="javascript:window.location='mailto:?subject=Message from '+document.getElementById('address').value+'&body='+document.getElementById('message').value">Submit</a>

I hope this helps!

Not pletely sure what you are asking by "allow the user input to go onto the email", but using document.getElementById('signature').value will return the input's value. You can then include that in your post/get.