使用HTML、CSS和PHP创建简单的联系表单
联系表单是允许用户通过您的网站直接与您联系的好方法。联系表单是任何网站的重要组成部分,因为它允许访问者与网站所有者取得联系。网站上的联系表单为访问者提供了提问、询问或提供反馈的简便方法。
在本教程中,我们将讨论如何使用HTML、CSS和PHP创建一个简单的联系表单。
步骤1:创建HTML表单
创建联系表单的第一步是使用HTML创建其结构。在此步骤中,我们将创建表单元素,允许访问者输入其信息并将其发送给网站所有者。
步骤2:CSS - 样式表单
创建联系表单的下一步是使用CSS对其进行样式设置。虽然可以创建没有任何样式的基本表单,但添加一些设计元素可以使其看起来更专业且更具视觉吸引力。这是一个带有基本CSS样式的联系表单示例:
<!DOCTYPE html> <html> <head> <title> Contact Form </title> <style> body { font-family : Arial, sans-serif; } h1 { text-align : center; } form { margin : auto; max-width: 500px; } label { display : block; margin-bottom: 10px; } input[type = "text"], input[type = "email"], textarea { padding: 10px; width: 100%; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 20px; } submit{ background-color : #4CAF50; color : #fff; padding : 10px 20px; border : none; border-radius : 4px; cursor : pointer; } button:hover { background-color : #3e8e41; } </style> </head> <body> <h1> Contact Us </h1> <form method = "post" action = "sendmail.php" > <label for = "name" > Name: </label> <input type = "text" name = "name" id = "name" required> <label for = "email" > Email: </label> <input type = "email" name = "email" id = "email" required> <label for = "message" > Message: </label> <textarea name = "message" id = "message" required></textarea> <button type = ”submit” name = ”submit”> Submit </buton> </form> </body>
我们首先在代码中定义一个联系表单。“<!DOCTYPE html>”声明文档类型为HTML5;代码定义了一个将使用post方法提交给名为“sendmail.php”的PHP脚本的表单。
该表单包含三个输入字段:姓名、电子邮件和消息;当用户单击“提交”按钮时,表单的数据将发送到PHP脚本进行处理。
此CSS代码将使用简单、现代的设计来设置表单样式。“body”元素设置字体系列,“h1”元素居中“联系我们”标题。“form”元素居中表单并将最大宽度设置为500px。
“label”元素为输入字段的标签添加间距和样式。输入字段本身采用填充、边框和边距属性进行样式设置,并且按钮元素创建一个引人注目的按钮,并在悬停时更改颜色。
步骤3:创建PHP脚本
现在我们已经创建了HTML表单并对其进行了样式设置,我们需要创建一个PHP脚本,该脚本将处理表单提交并将消息发送给网站所有者。以下是一个您可以使用的简单的PHP代码:
示例
<?php if(isset($_POST['submit'])){ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $to = "[email protected]"; $subject = "New Message from Contact Form"; $body = "Name : $name
Email: $email
$message"; mail($to,$subject,$body); echo "Thank you for your message!"; } ?>
此代码首先通过检查是否已按下“提交”按钮来检查表单是否已提交。如果已按下,则代码检索表单字段的值并将其存储在变量中,“$to”变量应设置为要将表单提交发送到的电子邮件地址。
接下来的几行创建将发送的电子邮件。“$subject”变量是表单的主题,“$body”变量包含通过表单提交的消息。“mail()”函数将电子邮件发送到指定的电子邮件地址。
总之,使用HTML、CSS和PHP创建简单的联系表单对于任何网站都至关重要。它允许访问者与网站所有者联系,通过遵循本文中概述的步骤,您可以创建一个基本的联系表单,这将帮助您与网站访问者保持联系。