使用 HTML CSS 和 PHP 的简单联系表单

本文将介绍如何使用 HTML、CSS 和 PHP 创建一个简单的联系表单。

HTML

假设我们已经有一个网站，现在需要添加一个联系表单。我们可以在 HTML 文件中添加以下代码：

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message:</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Submit</button>
</form>

在这个表单中，我们有三个输入框：姓名、电子邮件和消息。每个输入框都有 required 属性，这意味着用户必须填写相应的信息才能提交表单。

表单提交后，它将发送到 submit.php 文件。

CSS

现在我们需要一些样式来美化我们的表单。我们可以在 CSS 文件中添加以下代码：

form {
  width: 600px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  padding: 10px;
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 20px;
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

这些样式将使表单具有一个整洁的外观。

PHP

现在是时候创建 submit.php 文件了。这个文件将处理从表单提交的数据。在 submit.php 文件中添加以下代码：

// 接收表单提交的数据
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

// 发送电子邮件
$to = "your-email@example.com";
$subject = "New Contact Form Submission";
$message = "Name: $name\nEmail: $email\nMessage: $message";
$headers = "From: $email";

mail($to, $subject, $message, $headers);

这些代码将接收表单提交的数据，并使用 mail 函数将数据发送到您的电子邮件地址。

结论

现在您已经完成了一个基本的联系表单。当用户填写表单并提交时，它将发送到您的电子邮件地址。

您可以根据需要进行修改和定制，以满足您的特定要求。