How to Create an HTML Form That Sends You an Email

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.

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.

HubSpot's Free Online Form Builder

Generate leads from your website using a powerful online form builder.

• Customer Surveys
• Lead Capture
• Event Registration
• And More!

Get started free

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 skill set:

• Method 1: Create an Email Send Form Using HTML
• Method 2: Create an Email Send Form Using PHP
• Method 3: Create an Email Send Form Using a Form Builder
• Method 4: Create an Email Send Form Using a Plugin

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 asks me 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 my branding, I would have to add lines of code specific to my 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.

Pro tip: You might see a customer’s message when you email from an HTML web form. Sadly, your visitors are at risk of phishing due to this security lapse.

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 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: <form action=https://yourwebsite.com/myform-processor.php> .

The server then passes the data to the script specified in the action URL — myform-processor.php in this case. Using this data, the backend script can create a database of form submissions, direct the user to another page (e.g., payment), and send an email.

There are other scripting languages you can use in backend programming, like Ruby, Perl, or ASP for Windows. However, PHP is the most popular and is used by almost all web hosting service providers.

If you’re creating a form from scratch, here are the steps you can take. I’ll work through them below.

Step 1: Use PHP to create a page.

For this step, I need to have access to my website’s cPanel on my hosting platform.

When creating a web page, instead of using the “.html” extension, I typed “.php” instead. This is similar to what happens when I save an image as “jpg” versus “png.”

By doing this, the server will know to host the PHP I wrote. Instead of saving the empty HTML page as such, I saved it as “subscriberform.php”. After my page is created and saved, I can then create the form.

Step 2: Make the form using code.

In this step, I write the code to create the form.

If you’re not sure how to create forms in HTML, check out HTML Dog’s resource for a primer on the basics.

The following code is what’s needed for a basic form:

 

<form method=“post” action=“subscriberform.php”>
<textarea name=“message”></textarea>
<input type=“submit”>
</form>

Because this is similar to the HTML-only write-up, these lines will also create a name for the form and an area for subscribers to type a custom message and send it to me.

Image Source

An important difference is the action=“subscriberform.php” part. This portion of code is what will make the page send the form when submitted.

Step 3: Make the form send an email.

After I create the form and add all the proper fixings depending on my design preferences, it’s time to create the email portion.

For this, I’m going to scroll to the beginning of the page (the very beginning, even before defining the HTML Doctype). To enable sending data in the email, I have to add code that will process the data. I copied this code:

 

<?php
if($_POST[“message”]) {
mail(“your@email.address”, “Here is the subject line”,
$_POST[“insert your message here”]. “From: an@email.address”);
}
?>

Everything inside the first and last lines will tell the web page to make these functions perform as PHP. This code also checks to see if a subscriber uses the form. From there, it checks to see if the form was sent.

Further breaking it down, “mail” sends the completed form as an email to “your@email.address,” and the subject line is what follows. In the next line, I can write a copy of the email message inside the quotes, to be sent from whichever email address you choose.

Once the form is submitted, the page sends the data to itself. If the data has been successfully sent, the page sends it as an email. The browser then loads the page’s HTML — the form included.

With that, I have the basic code I need to create the form.

Note that this is just one way to do this. Alternatively, you can also create a form using a builder and then embed it on your website.

What you need to know: Making a PHP form from scratch isn’t beginner-friendly. If you’re looking to use PHP, I suggest you consider using a backend platform with no language dependency. Otherwise, it can be hard to manage email send forms.

HubSpot's Free Online Form Builder

Generate leads from your website using a powerful online form builder.

• Customer Surveys
• Lead Capture
• Event Registration
• And More!

Get started free

Method 3: Create an Email Send Form Using a Form Builder

If you’re not using WordPress to build your website and are not coding-savvy, you may be at a loss as to how you can create a form. This is especially true if your CMS doesn’t offer a drag-and-drop page editor.

Each of the tools below allows you to build a form that sends an email without any coding. The best part is that you don’t need to change content management systems if you don’t want to. Instead, you can embed the form on your website using each tool’s embed code.

Check out my favorite form builders and my thoughts below.

(Pro tip: A drag-and-drop editor can make it much easier and simpler to create an email-sending form. Try Content Hub. It’s 100% free!)

1.HubSpot: Best Email Form Builder Overall

Start using HubSpot's free Form Builder tool.

HubSpot includes a form builder in the free tier of all of its products. Because HubSpot already has my email, it will automatically send me a message when a new entry is submitted.

HubSpot’s form builder is linked with other tools in the platform, including Marketing Hub and CMS Hub. Plus, I don’t need any special technical knowledge. If I want to extend the form to include marketing capabilities, I can do so as well. Here’s a walkthrough of how you can add HubSpot forms to your site:

[Video: https://www.youtube.com/watch?v=e5f4Nzg7ciw ]

For example, I can build custom forms that connect to my contacts list. I can also customize those forms and trigger automatic emails based on the completion of my forms. (Note that the latter requires a premium upgrade.)

If you want to learn how to receive an email after a form submission, take a look at our Knowledge Base article.

Best for: HubSpot’s form builder is the best option if you’re just getting started and don’t want to spend big on making forms. With the help of the form builder tool, anyone, regardless of skill level, can develop visually appealing forms that effectively convert website visitors into leads and expand their business.

2. Forms.io: Best Quick Email Form Builder

Forms.io allowed me to quickly create a form in its drag-and-drop interface. Then, I could embed the form on my site using an HTML embed code. I received an alert or notification when the form was filled out. I could then manage responses in the tool’s backend.

It’s free for 10 users. If your company needs more seats, you can have access for $14.99/month.

Best for: Whether you’re looking to create a singular-step or multiple-step form, Forms.io can get it done in seconds. While using its pre-defined templates, you can easily choose from logos, colors, and fonts to reflect your brand.

3. Jotform: Best Email for Builder for Multiple Forms

If you expect that you’ll need more than one form, Jotform is a great choice.

When I trialed Jotform, I had several options for embedding forms on my website: JavaScript, iFrame, or the entire source code of the form. I also had the option of creating a lightbox or pop-up form.

Jotform is free with its branding. Pricing starts at $24 a month if you want a watermark-free form.

Check out how you can customize your notifications for their feedback form:

Best for: With Jotform, you should be able to access your email forms from any device — just as you can access your emails. Every form is responsive by default, so you can easily complete it on a computer, tablet, or phone. What I find useful is that the app helps to check contributions on the move, even when offline.

You can check out more form builders options here.

HubSpot's Free Online Form Builder

Generate leads from your website using a powerful online form builder.

• Customer Surveys
• Lead Capture
• Event Registration
• And More!

Get started free

Method 4: Create an Email Send Form Using a Plugin

If you’re running a WordPress website, we have good news: You have a plethora of form builder plugins available to you, most of which are free. These tools will all send you an email upon receiving a submission.

1. HubSpot Form Plugin: Best for Lead Generation

If you’re planning to use your form as a lead generation tool, then I highly recommend using the HubSpot form plugin. It links directly to your HubSpot account, allowing you to use it in conjunction with HubSpot CRM, Marketing Hub, Sales Hub, and more.

Here’s what it’ll look like when you add the plugin to your Wordpress site:

Pro tip: Inserting the form via a Hubspot plugin can be necessary to ensure that the embed code remains intact if you find out that your WordPress form is malfunctioning.

2. WPForms: Best for Embedding Anywhere

WPForms is a drag-and-drop form builder that allows you to configure it to email you upon receiving a submission. You can also embed the form anywhere on your site, including the sidebar and footer.

Pro tip: With WPForms, you will immediately receive an email notification as soon as a form is submitted, as shown below. You can even create notifications for numerous recipients and use confirmation features to send the user to a personalized thank-you page or display a custom success message.

3. ARForms: Best for Adaptability

ARForms allows you to receive email notifications based on conditions you’ve set, but you can also get email notifications for all submissions.

You can also integrate it with other tools in your tech stack, including HubSpot, PayPal, and Google Sheets.

Even with their templates, you can personalize your form by adding multiple fields, as shown below:

Pro tip: ARForms’ integrated pop-up form capabilities and range of triggers are what make it so powerful. You can increase your form conversion rates by using trigger actions to make your forms more visible to site users.

The Importance of HTML Forms that Send Emails

Whether you want to convert more visitors to leads, collect information for your sales team, or create loyal brand advocates, forms are imperative to an inbound strategy.

If you don’t have a form that sends emails, you could be missing out on more leads, increased conversions, and engaged customers.

Start leveling up your forms today.

Editor's note: This post was originally published in December 2019 and has been updated for comprehensiveness.