How to Send HTML Form Data to Your Email (A Complete Guide)

As a web developer, you’ll often need to capture data from users via HTML forms. This could be for contact forms, surveys, or feedback. While HTML alone can’t send the form data directly to your email, you can achieve this with server-side scripting or third-party services. In this blog post, I’ll walk you through both approaches.

Method 1: Sending Form Data Using PHP

If you have access to a server with PHP installed, this is a reliable and customizable solution.

Step 1: Create the HTML Form

Let’s start by creating a simple form that collects the user’s name, email, and message.

<form action="sendEmail.php" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</form>

In this form:

• The action="sendEmail.php" attribute tells the form to send the data to a PHP script when it’s submitted.
• The method="post" ensures that the data is securely sent to the server.

Step 2: Write the PHP Script (sendEmail.php)

Now, we need a PHP script that will take the form data and email it to you.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = htmlspecialchars($_POST['name']);
  $email = htmlspecialchars($_POST['email']);
  $message = htmlspecialchars($_POST['message']);

  $to = "your-email@example.com";  // Replace with your email
  $subject = "New Form Submission";
  $body = "Name: $name\nEmail: $email\nMessage:\n$message";

  $headers = "From: $email";

  if (mail($to, $subject, $body, $headers)) {
    echo "Message sent successfully!";
  } else {
    echo "Failed to send message.";
  }
}
?>

• The PHP script collects the form data using the $_POST superglobal, sanitizes it with htmlspecialchars(), and then uses PHP’s mail() function to send the email.
• You’ll replace your-email@example.com with your actual email address.

After submitting the form, you should receive the data in your inbox, and the user will see a success message.

Hosting the PHP Script

For this to work, your website needs to be hosted on a server that supports PHP (e.g., using a hosting provider like cPanel or a local server like XAMPP for development).

Method 2: Sending Form Data Using a Third-Party Service

If you don’t have access to a server or don’t want to write backend code, third-party services like Formspree and EmailJS provide an easy alternative.

Using Formspree

Formspree is a simple and effective service that lets you send form submissions to your email without writing any server-side code.

1. Sign up at Formspree.
2. Create a form on their platform, and they will give you a form ID.
3. Modify your HTML form like this:

<form action="https://formspree.io/f/your-form-id" method="POST">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</form>

Replace "your-form-id" with the ID provided by Formspree. When the user submits the form, the data will be sent directly to your email.

Using EmailJS

EmailJS allows you to send emails directly from JavaScript without needing a backend.

1. Sign up at EmailJS.
2. Follow their integration guide to link your form with EmailJS. You’ll need to add a bit of JavaScript to handle the form submission, but they provide step-by-step instructions.

Which Method Should You Choose?

• PHP: This option is ideal if you have access to a PHP-enabled server and want full control over form processing. It’s customizable and scalable but requires some backend coding skills.
• Formspree or EmailJS: These services are perfect for simple use cases where you want to avoid backend development. They’re easy to set up and reliable for most contact forms.

Sending HTML form data to your email can be accomplished with either server-side programming (like PHP) or third-party services (like Formspree or EmailJS). If you’re comfortable with coding and have a hosting environment, PHP offers greater flexibility. If you’re looking for something quick and easy, Formspree or EmailJS can handle the job without requiring any backend work.

By following this guide, you’ll have a functioning contact form that sends user submissions straight to your inbox. Happy coding!