Variable Email Form with Mailto

I just finished a quick project where the client wanted a HTML form that he could host locally on his PC. The form was to be filled out often, and upon submitting, the contents are  emailed to the desired representative in the field. Sound easy? Leaving a blank mailto won’t work.

To create a form like this start out by building your regular web page, and whatever form fields that you desire. To get the mailto action to work for various emails there is only one trick, and all it requires is some javascript.

Below is the javascript and HTML for the form fields you will need to edit:

<body>
<SCRIPT language=”JavaScript”>
function OnSubmitForm()
{
if(document.pressed == ‘Email‘)
{
var email = prompt(“Please enter the email the form will be submitted to:”);
var toemail = “mailto:’” + email + “‘”;
document.emailform.action = (toemail);
}
}
</SCRIPT>
<form name=”emailform” onSubmit=”return OnSubmitForm();” method=”post” enctype=”text/plain”>
<Misc Text Fields>
<input type=”submit” onClick=”document.pressed=this.value” VALUE=”Email” />
</body>

Starting with the form, the only thing unusual is the onSubmit attribute. It’s telling the form to complete the javascript function once the submit button has been clicked. Notice the submit button also has a little javascript.

If you are having a problem getting this to work, look how I color coded. You may just be missing or not identifying elements correctly.

247 Comments

Add a Comment

Your email address will not be published. Required fields are marked *