CODEWITHSUNDEEP
javascripthtmlemailmailto
user1703470
user1703470

Reputation:

How do I send an email with HTML with an address the user inputs?

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

Upvotes: 0

Views: 9325

Answers (3)

crunchBar
crunchBar

Reputation: 111

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>

Upvotes: 4

roelandvanbeek
roelandvanbeek

Reputation: 669

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!

Upvotes: 0

LukeStoneHm
LukeStoneHm

Reputation: 122

Not completely 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.

Upvotes: 0

Related Questions