How to Create an HTML Form That Sends You an Email

Sometimes, improving UX can cost a lot of money.

And oftentimes, some of the problems website visitors have are easy, simple fixes.

That begs the question: How can you find out if customers are enjoying their website experience?

The answer may be simpler than you think.

Having forms on your website is an effective way to get customer feedback about their experience during their visit. These forms give you insight about how to improve your website's UX for higher conversions in the long run.

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

Ultimately, forms are critical for solving dissatisfaction in a customer's experience, which ensures stronger customer relationships. If you don't have a form on your website, you could be missing out on more leads, higher conversions, and happier long-term customers.

Here, we're going to walk you through how to create a certain type of form — one that sends an email to you, as well as the customer, to ensure the form was received.

How to Create a Form in HTML and Send it to Email

It is possible to create an HTML form that sends emails, but it depends on how you work and on what platform you're working. This is to say that things are a little different if the plan is to use a mix of HTML and different scripts.

Using the Basics

Using just HTML? We've got you covered. From starting fresh, here is a sample code for use:

<form action=”mailto:contact@yourdomain.com”

method=”POST”

enctype=”multipart/form-data”

name=”EmailForm”>

Name:<br>

<input type=”text” size=”19″ name=”ContactName”><br><br>

Message:<br> <textarea name=”ContactCommentt” rows=”6″ cols=”20″>

</textarea><br><br> <input type=”submit” value=”Submit”> </form>

This code will create a form that asks for the contact's name, message, and includes a submit button. 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.

Another thing to note with this code is that it doesn't directly send to email addresses, but it can open in an email client or tool window to submit the form.

To make it so the form can work with your email server and send it to a mailbox, PHP is the answer — let's explore that option now.

Making a Complete Form

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.

If you need to make a complete form, follow the steps below.

When you're creating a webpage, instead of using the ".html" extension, type ".php" instead. This is similar to what happens when you save an image as "jpg" versus "png".

By doing this, the server will know to host the PHP you write. Instead of saving the empty HTML page as such, save it as something like this: "subscriberform.php". After your page is created and saved, you'll then be able to create the form.

In this step, you'll write the code to create the form. 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 you.

An important difference is the "action=contact.php" part. This portion of code is what will make the page send the form when submitted. Recall that in the first example, that wasn't an option.

After you create the form and add all the proper fixings depending on your design preferences, it's time to create the email portion.

For this, you're going to scroll to the beginning of the page (the very beginning). To enable sending data in the email, we have to add code that will process the data. Copy this code or create something similar:

<?php

if($_POST["message"]) {

mail("your@email.address", "Here is the subject line",

$_POST["insert your message here"]. "From: an@email.address");

}

?>

Recall that everything inside the first and last lines will tell the webpage 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, you can write copy of the email message inside the quotes, to be sent from whichever email address you choose.

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

Note that this is just one way to do this — alternatively, you can also create a form using a CRM like HubSpot.

If you're a HubSpot customer, keep reading to learn how to use HubSpot's tool to create an HTML form that sends you an email.

Using HubSpot

HubSpot Forms is part of the Marketing Hub, and doesn't require any previous technical knowledge.

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

When you're using HubSpot Forms, you can build custom forms that connect to your contacts list. You can also customize those forms and trigger automatic emails based on the completion of your forms. Note that the latter requires a premium upgrade. Click here for more information about HubSpot's forms.

HTML forms are a fairly simple process and an excellent way to connect with subscribers. Having these on your site gives customers an easy way to contact your company or sign-up for emails.

Forms that send an email back to you keeps information in your inbox for reference and ease. Remember that these aren't your only options for building forms. If you want a list of tools that help build forms, check out our post here.