Creating an HTML contact form that sends an email involves combining HTML, CSS, and a bit of server-side processing. W3Schools provides a wealth of resources to guide you through this process. Let's dive in and build a simple contact form that sends emails using PHP and HTML.
Before we start, ensure you have a basic understanding of HTML, CSS, and PHP. Also, you'll need a server with PHP support. If you're using XAMPP or MAMP, you're good to go!
Setting Up the HTML Contact Form
The first step is to create an HTML form with fields for the user's name, email, subject, and message. Here's a simple example:
<form action="process.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Submit">
</form>
Action Attribute
The action attribute in the form tag specifies where to send the form data. In our case, it's "process.php", where we'll handle the form submission.
Method Attribute
The method attribute determines how to send form-data. The "post" method sends data embedded in the body of the HTTP request. It's the preferred method when submitting forms.
Processing the Form (PHP)
Now, let's create a PHP file ("process.php") to process the form data.
The PHP mail function sends emails. Here's how you can use it to send the form data:
$name = strip_tags(trim($_POST["name"]));
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$subject = strip_tags(trim($_POST["subject"]));
$message = strip_tags(trim($_POST["message"]));
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
$recipient = "your-email@example.com";
$headers = "From: $name <$email>\r\nReply-To: $email";
mail($recipient, $subject, $message, $headers);
header("Location: thank_you.html");
}
Sanitizing Input
Always sanitize user input to prevent SQL injection and XSS attacks. Here, we're using PHP's built-in filter functions to sanitize and validate the email.
Sending the Email
If the email is valid, we send the email using the PHP mail function. We store the headers as a string, specifying the sender's name and email.
Redirecting
After sending the email, we redirect the user to a "thank you" page (thank_you.html) using the header function.
Improving Email Delivery
For better email deliverability, consider using a more robust PHP library like PHPMailer or SwiftMailer. They provide features like attachment support, HTML emails, and SMTP authentication.
Additionally, you might want to set up an SMTP server to send emails, as it improves deliverability and provides better tracking of sent emails.
That's it! You now have a simple contact form that sends emails using HTML, PHP, and W3Schools as your guide. This form can be embedded into any webpage, and users will receive your replies directly in their inboxes.
Now, go ahead and style your form with some CSS to make it look amazing. Happy coding!