Have you ever set up a form on your site, only to lose track of the information? Creating an HTML email form is an effective way to resolve this issue.
Below, you’ll learn how to create a form that sends an email to you, as well as the customer, after a submission. This simple trick will help you build a seamless inbound strategy.
Table of Contents
What is an HTML form?
An HTML form is used on a website to collect information entered by visitors. If you want to be notified when someone has submitted their information, you can set up a process that sends emails from an HTML form.
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.
Further, HTML doesn’t offer an option to create a form that sends an email after submission. Instead, you can use the form action element to set a mailto: address (in this case, your own), triggering the submitter’s mail client to open. This is a last-ditch option if you can’t create a PHP-based form.
However, there are a few problems with the mailto: option.
- It isn’t 100% compatible with all browsers.
- The process isn’t very user-friendly.
- You can’t control the formatting of the data when the form is sent by the browser.
- A warning message will pop up when the user submits the form, letting them know that the information they’re about to send will not be encrypted for privacy.
Instead, you’ll want to look for alternative ways to send an email from a form, which we will discuss below.
How to Make an HTML Form that Sends Email
There are multiple 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. Choose the option that works best with your team’s skillset.
Method 1: Create an Email Send Form Using HTML (Not Recommended)
Using just HTML? If you’re starting fresh, our team is here to help. This code will help you create a form that will notify you via email.
The form will ask for the contact’s name and message. It also includes a submit button (not visible in CodePen) that users will click to submit their information.
Note that this code is basic. It won’t look super snazzy. For a more visually appealing form that matches your branding, you’ll have to add lines of code specific to your needs.
Remember: 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 that sends an email, PHP is going to be your best friend. PHP 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.
PHP Forms: What You Need to Know
A web form has two sides: The frontend, 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:
https://blog.hubspot.com/marketing/html-form-email