Carcigenicate
Carcigenicate

Reputation: 45750

Properly populate an email using only HTML

For an assignment, I need to put a form in my webpage, and have the form populate an email for the user to send.

I wrote up this after searching around:

<form enctype="text/plain" method="post" action="mailto:[My Email Here]">
    <input type="text" name="subject" value="Subject" />
    <input type="text" name="body" value="Body" />

    <input type="submit" name="submit" value="Submit" />
</form>

Which, as I expected opens my mail client and populates an email for me. The problem is, the way it's populated is quite ugly and unintuitive. The subject line is left blank, and the body is filled with:

subject=Subject

body=Body

submit=Submit

(4 lines of white-space)

Ideally, I'd like the "subject" to end up in the subject, the "body" field to be the only thing that ends up in the body, and the "submit" to not appear to the user at all.

Is this possible?

I am only allowed to use HTML at this point. (Solely HTML. No inline scripting allowed).

Upvotes: 3

Views: 2750

Answers (2)

Nuthan Kumar
Nuthan Kumar

Reputation: 493

mailto forms will always adds all the fields to mail body. javascript can do trick for you. are you allowed to use Javascript ..?

May be this will work for you

<html>

<form onsubmit="window.location='mailto:[email protected]?subject='+myform.subject.value + '&body='+myform.comments.value" name="myform"  method="post">

<input name="subject"  value="Commencement Form" />
<input name="comments"  value="my body" />
<input type="submit" value="submit">
</from>
</html>

Upvotes: -1

gfullam
gfullam

Reputation: 12045

GET instead of POST

Change the form's method from POST to GET. Using the GET method will append the key/value pairs from the input fields as a query string on the mailto: link in the action attribute. This creates a URL that email clients understand how to parse:

mailto:{TARGET EMAIL ADDRESS}?subject=Subject&body=Body

<form enctype="text/plain" method="GET" action="mailto:{TARGET EMAIL ADRESS}">
    <input type="text" name="subject" value="Subject"/>
    <input type="text" name="body" value="Body"/>
    <input type="submit" name="submit" value="Submit">
</form>

Upvotes: 5

Related Questions