Have you ever set up a form on your site, only to forget to check the entries that were submitted? Creating an HTML form that sends an email after submission is one of the simplest and most effective ways of resolving this issue.
Here, we’re going to walk you through how to create a form that sends an email to you, as well as the customer, to ensure the form was received.
Ideally, browsers would allow you to route form submissions directly to an email address. However, the reason they don’t is that emailing directly from an HTML web form would reveal the visitor’s email address, making the user vulnerable to malicious activities, such as phishing.
Adding a mailto: address to the form can be a potential way to circumvent this challenge. This option activates the default mail client on the user’s computer, prompting them to send the form over email. The web browser sends a request to the email service provider, not to the specified address.
There are a few problems with the mailto: option. For example, it isn’t 100% compatible with all browsers, it isn’t very user-friendly, and it’s impossible to control the formatting of the data when the form is sent by the browser.
Beyond that, a warning message will pop up when the user goes to submit the form, letting them know that the information they’re about to send will not be encrypted for privacy.
Below, we go over a few options for creating an HTML form that emails you when a new entry is submitted.
The option you choose depends on how you work and what platform you’re using. This is to say that things are a little different if the plan is to use a mix of HTML and different scripts. Below, we go over the different options available.
Method 1: Create an Email Send Form Using HTML (Not Recommended)
Using just HTML? From starting fresh, here is a sample code for use:
See the Pen How to Create an HTML Form That Sends You an Email by HubSpot (@hubspot) on CodePen.
This code will create a form that asks for the contact’s name, message, and includes a submit button (not visible in CodePen). Note that this code is basic — it won’t look super snazzy. For a more beautiful one, you’ll have to add some more lines of code specific to your needs.
While you can use just basic HTML, this isn’t the ideal option. This form doesn’t directly send to email addresses, but rather opens an email client or tool window to submit the form. This can spook the user out of submitting the form at all.
So, what HTML code allows you to send form submissions directly to an email address?
To make the form work with your email server and send it to a mailbox, PHP is the answer — let’s explore that option now.
Method 2: Create an Email Send Form Using PHP (Advanced)
To create a form subscribers can contact you with, the PHP script is going to be your best friend. I know, another acronym. This one stands for Hypertext Preprocessor, and this language collaborates with HTML to process the form.
Before jumping into the process, let’s break down a few form basics.
A webform has two sides: The front-end, seen in the browser by visitors, and a backend script running on the server.
The visitor’s web browser uses HTML code to display the form. When the form is submitted, the browser sends the information to the backend using the link mentioned in the “action” attribute of the form tag, sending the form data to that URL.
For example: