Your requirement is simple; you have created a form and want to get the information submitted in the form via email. However, getting this right is not very easy as it sounds. This article attempts to clear the misunderstandings that some people used to have about email forms.
How to send email directly from your HTML form?
It would have been a nice feature for a web developer if the browsers let them route the form submission directly to an email address. But this is not the case. The reason is that if the browsers allowed emailing directly from the form page, that will reveal the visitors email address. A malicious hacker can collect the email address of the visitors to the web page and then spam them. In order to protect the web users, no client side language can send email without the user’s intervention.
Is there an HTML Code to send email from a form submission?
There is no feature in HTML to send the form submission directly to an email address. What about “mailto” ? Using mailto: You can set the action field of the form as ‘mailto’. In this case, the web browser invokes the email client to send the form submission to the email address specified.
<form action="mailto:you@yourwebsite.com">
However, this method is not compatible across browsers. It is not user friendly too; on form submission, it throws a warning message. For more details on this method, see: email form using mailto
Can JavaScript send the form submission to an email address?
No. JavaScript can’t do email either. If the client-side JavaScript allowed sending email programmatically, spammers will be the first to exploit it and you will hate your web browser!
So, How to get email from an HTML form?
Before jumping into the solution, I will take you through the general structure of a web form. A web form has two parts: the front-end of the form that you see in your browser and a back-end script that runs on the webserver.
Your web browser displays the Form using the HTML front-end code. When you submit the form, the browser sends the information you submitted in the form to the back-end.
The link to the back-end script is mentioned in the ‘action’ attribute of the HTML form tag.
<form action="http://yourwebsite.com/yourform-processor.php">
The browser picks the link (URL) mentioned in the action attribute and sends the form submission data to that URL. The webserver passes the form submission data to the script in the action URL (yourform-processor.php in the example.) Now, the back-end script can send emails, save form submission to a database or even direct the user to a payment page.
How to create a back-end Script?
There are a number of scripting languages created for back-end programming. PHP is one of the popular and widely supported scripting platform (Others include Perl, Ruby, ASP- for windows only- etc) Almost all hosting services support PHP on their webservers.
Working of a simple PHP script
The PHP script runs on your web server. When a form is submitted, the form mail script collects the data submitted in the form, composes an email and sends the email to the address it is configured.
