Have you ever set up a form on your site only to lose track of the information? Creating HTML email forms is an effective way to solve this problem.
Below, you’ll learn how to create a form that sends an email to you as well as the customer upon submission. This simple trick will help you create a seamless inbound strategy.
table of contents
What is HTML Form?
An HTML form is used on a website to collect information entered by visitors. If you want to be notified when someone submits their information, you can set up a process that sends email from the HTML form.
Ideally, the browser will allow you to route form submissions directly to an email address. However, the reason not to do this is that emailing directly from an HTML web form exposes the visitor’s email address, leaving the user vulnerable to malicious activities such as phishing.
Also, HTML does not provide the option of creating 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 it. This is the last option if you can’t create a PHP-based form.
However, there are some issues with the mailto: option.
- It is not 100% compatible with all browsers.
- The process is not very user friendly.
- You cannot control the formatting of the data when the form is sent by the browser.
- When the user submits the form, a warning message pops up letting them know that the information they are about to send will not be encrypted for privacy.
Instead, you’ll want to look into alternative methods of sending email from a form, which we’ll discuss below.
How to create an HTML form that sends an email
There are several 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.
That is to say that things are a bit different if the plan is to use a mix of HTML and various scripts. Choose the option that works best with the skills of your team.
Method 1: Create a send email form using HTML (not recommended)
Using HTML only? If you’re just starting out, our team is here to help. This code will help you to create a form Who will notify you by email.
The form will ask for the name and message of the contact. 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 sleeker look that matches your branding, you’ll need to add lines of code specific to your needs.
remember: While you can just use basic HTML, it’s not an ideal option. It does not send forms directly to email addresses, but instead opens an email client or tool window to submit the form. This may scare the user away from submitting the form at all.
So, what HTML code allows you to send form submissions directly to email addresses?
To get the form to 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)
For creating 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 forms.
Before jumping into the process, let’s break down some of the basic basics.
PHP Forms: What You Need to Know
A web form has two sides: the frontend, which is seen by visitors in a browser, 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 a notification to the backend using the link specified in the “action” attribute of the form tag, sending the form data to that URL.
For example: <फॉर्म एक्शन = https://yourwebsite.com/myform-processor.php>,
The server then sends the data to the script specified in the action URL – in this case myform-processor.php. Using this data, the backend script can create a database of form submissions, direct the user to another page (such as payment), and send an email.
There are other scripting languages you can use for backend programming, such as Ruby, Perl or ASP for Windows. However, PHP is the most popular and is used by almost all web hosting service providers.
If you are building a form from scratch, here are the steps you can take.
Step 1: Use PHP to build the page.
For this step, you must have access to your website’s cPanel on your hosting platform.
When you’re creating a webpage, type in “.php” instead of using the “.html” extension. 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 wrote. Instead of saving the empty HTML page as: “subscriberform.php”. After your page is created and saved, you’ll be able to create the form.
Step 2: Create the form using the code.
In this step, you will write the code to create the form.
If you’re not sure how to build forms in HTML, take a look at html dog Resource for a primer on the basics.
The following code is required for the basic form:
<form method="post" action="subscriberform.php">
Because this is similar to HTML-only write-up, these lines will also create a name for the form and an area for customers to type in a custom message and send it to you.
The action=”subscriberform.php” part is an important difference. This part of the code is what will send the form to the page when submitted.
Step 3: Send an email to the form.
After you’ve created the form and added all the appropriate fixings based on your design preferences, it’s time to create the email part.
For this, you’re going to scroll to the beginning of the page (the very beginning, even before the HTML Doctype is defined). To enable sending data in email, we need to add code that will process the data. Copy this code or create something similar:
mail("email@example.com", "Here is the subject line",
$_POST["insert your message here"]. "From: firstname.lastname@example.org");
Everything inside the first and last lines will tell the webpage to perform these tasks as PHP. This code also checks to see if a customer accessed the form. From there, it checks to see if the form was sent.
Breaking it down further, “mail” sends the completed form as an email to “email@example.com”, and the subject line is as follows. On the next line, you can type a copy of the email message inside the quotes, which will be sent from any email address you choose.
Once the form is submitted, the page sends data to itself. If the data is sent successfully, the page sends it as an email. The browser then loads the HTML of the page – form included.
With this, you have the basic code needed to build the form.
Note that this is just one way of doing this. Alternatively, you can also create a form using the builder and then embed it on your website.
Method 3: Create an Email Send Form Using a Form Builder
If you are not using WordPress to build your website and are not coding-savvy, you may be at a loss as to how to create a form. This is especially true if your CMS doesn’t provide a drag-and-drop page editor.
Each of the tools below allows you to create a form that sends an email without any coding. The best part is that you don’t need to change the content management system if you don’t want to. Instead, you can embed the form on your website using the embed code for each tool.
(Pro tip: A drag-and-drop editor can make it very easy and simple to create an email-sending form. Try CMS Hub, It’s 100% free!)
1. hubspotOverall Best Email Form Builder
HubSpot includes a form builder in the free tier of all 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 to other tools in the platform, including marketing hub And CMS Hub, Plus, you don’t need any special technical knowledge. If you want to expand the form to include marketing capabilities, you can do that as well.
For example, you can create custom forms that connect to your contact list. You can even customize those forms and trigger automated emails based on the completion of your forms. (Note that the latter requires a premium upgrade.)
If you want to know how to receive email after form submission, have a look at our knowledge base articles,
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 the HTML embed code. You will receive an alert or notification, and then you can Manage responses in the backend of the tool,
It is free for 10 users. If your company needs more seats, you can get access for $14.99/month.
3. jotform: Best Email to Builder for Multiple Forms
Jotform is free with its own branding. Pricing starts at $24/month if you want watermark-free forms.
See more farm builders here,
Method 4: Create a Send Email Form Using a Plugin
If you’re running a WordPress website, we have good news: you have a lot form builder plugins available to you, most of which are free. All of these tools will send an email when a submission is received.
1. hubspot form plugin: Best for Lead Generation
If you plan to use your forms as a lead generation tool, we highly recommend using the HubSpot Forms plugin. It connects directly to your HubSpot account, so you can use it 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 when you receive a submission. You can embed forms anywhere on your site including sidebars and footers.
3. ARforms, Best for Compatibility
ARForms allows you to receive email notifications based on conditions you set up, but you can also receive email notifications for all submissions. You can also integrate it with other tools in your tech stack, including HubSpot, PayPal, and Google Sheets.
Importance of HTML form sending email
Whether you want to convert more visitors into leads, collect information for your sales team, or build loyal brand advocates, forms are essential to an inbound strategy.
If you don’t have a form sending email, you could be missing out on more leads, increased conversions and engaged customers.
Start leveling up your form today.
Editor’s Note: This post was originally published in December 2019 and has been updated for comprehensiveness.