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

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.

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 you.

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 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, even before defining the HTML Doctype). 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("[email protected]", "Here is the subject line",
$_POST["insert your message here"]. "From: [email protected]");
}
?>

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 “[email protected],” and the subject line is what follows. In the next line, you 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, 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 builder, and then embed it on your website.

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

1. HubSpot: Best Email Form Builder Overall

HubSpot includes a form builder in the free tier of all of its products. Because HubSpot already has your email, it will automatically send you 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, you don’t need any special technical knowledge. If you want to extend the form to include marketing capabilities, you can do so as well.

For example, 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.)

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

2. Forms.io: Best Quick Email Form Builder

Forms.io allows you to quickly create a form in its drag-and-drop interface. Then, you can embed the form on your site using an HTML embed code. You’ll receive an alert or notification, and you can 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.

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. It gives you several options for embedding forms on your website: JavaScript, iFrame, or the entire source code of the form. You also have the option of creating a lightbox or popup form.

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

Check out more form builders here.

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 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 we 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.

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.

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.