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.

  226 Responses to “Variable Email Form with Mailto”

  1. Right and this will make great help of all users..

    keep it up..

  2. Decent post I would say. The java script code you provided is really easy and understandable. Great job done..

  3. Thank you very much. That is awesome because I have no clue about javascripting, this will fix my problems :)

  4. 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.

  5. really mailto beatiful ? am usefull

  6. very thanksTo 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

  7. Damn… More complicated than I thought it would be :D

  8. Great post. Thank you so much!! Just bookmarked.

  9. Very handy, indeed Robert. Most of the time I code PHP, I will save this script for future projects. Sharing knowledge is great.
    Sergei

  10. I’ve had to implement something like this. I think google has a tool with their captcha tools for this.

  11. Hi, this is interesting article, that is the thing I’m looking for over the net. Finally I found it. I learned a lot, this useful article and I think other readers might find it useful as well.

  12. it can be done only with the help of javascreept

  13. I am still waiting for you to post something new. I have almost exhausted your archives! where ya been?

  14. Nice share, There are many thing to learn from this script. Javascript has done the trick.

  15. Thanks to you for such awesome JavaScript code. Mailto is really looking me handy, I will try this special code and make it ok for work.

  16. Thanks for the nice information, i have gone through all comments and that are really good….

  17. This is a great alternative. Thanks for the info.

  18. I find here a good advice with a good direction….

  19. Wow, this is a great code. Javascript really does the job. There are really less bloggers like you who actually focus on coding. Nice to see your blog.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>