小河片做网站:PHP联系人表单:使用HTML和PHP创建表单-极简慕枫

小河片做网站:PHP联系人表单:使用HTML和PHP创建表单

2019-01-15

小河片做网站

准备好了吗?我们开始吧

许多WordPress插件提供了功能齐全的联系人表单,可以立即安装和使用,但我们相信美丽的设计和你的权利,它的风格,无论你选择。因此,第一个视频将侧重于如何创建,但主要是如何风格,您的联系形式使用CSS 3。

本视频教程中没有多少HTML 5,因为联系人表单是用以前的HTML版本中可用的代码构建的,但是您可以使用这个第一个视频教程来加强我们在前面的教程中学到的许多东西。因此,没有任何进一步的讨论,它在这里。

联系人表单HTML和CSS Dummies教程

你要学的是:

  • CSS 3造型基础
  • 如何创建HTML 5联系人表单
  • 如何创建优雅的CSS 3联系人表单

创建-CSS 3-联系人-表单

在本HTML联系人表单教程的末尾,您将看到类似于上面的屏幕截图的内容。请在视频教程之后查看演示,以获得在25分钟内您将做什么的感觉。对于初学者和专家来说,这都是一个很好的练习!

查看演示并下载源文件。

挑战:制作联系人表格,回复和验证

你能让这份联系表格回复吗?我会给你一个提示,但它将是有点无关的联系形式,但你肯定是足够聪明的工作方式完成它,是吗?

提示:这都是关于媒体查询的!

当然,验证字段非常重要,这样您就不会收到任何不必要的信息,或者确保您从联系人表单中需要的所有信息都是有用的。为了做到这一点,您需要在代码中包含HTML 5验证。这是相当容易做到的,你所需要的只是耐心和愿意测试新的东西!

如何使联系人表单HTML工作

虽然要使其功能化需要一点服务器端编程,但我很高兴为您指明正确的方向!

要为您的网站制作此表单功能,您需要用PHP对其进行编码。

注意:PHP联系人表单教程的重点是让它在功能上发挥作用,但是您只需要自己添加安全特性(Google it!)。

祝好运!

联系人-form-html-php-教程

我相小河片做网站信,几乎每个人都能同意在从静态HTML网站到WordPress驱动的网站上使用的联系表格的重要性。我发现自己多次为客户创建自定义PHP联系人表单,并且总是根据客户端的需要更改周围的内容。

在阅读了本教程之后,您应该对创建自定义PHP联系人表单有了更好的理解。这些对于您自己的项目以及对客户的项目都是非常有用的。

我已经使用这些基本的联系表格,调查,甚至为客户创建简单的服务台票证系统。清单没完没了,只要有创意就行了。我将讨论制作您自己的自定义HTML和PHP表单所需了解的所有内容。

查看演示并下载源文件。

如何创建简单的PHP联系人表单

首先要在HTML文档中创建表单,我们需要选择要放置表单的位置。一般情况下,大多数表格将从以下几个方面开始:

并以下结束标记结尾:


当按下Submit按钮时,表单操作将告诉此表单要查找什么。在这个例子中,我们将使用下面的内容,这是我们将要创建的第二个文件mail.php

开始表单的代码的起始行显示了mail.php的操作和POST方法,这将触发PHP脚本在表单填写并按Submit按钮时发送电子邮件。

mail.php的作用和方法

在开始表单之前,我们需要了解的最后一件事是如何使用输入-这将告诉浏览器允许文本类型的输入,以完成一个字段。通过使用TextArea,我们可以创建表单,并为用户创建输入信息的空间,稍后我们将使用PHP通过电子邮件发送这些信息。

我们在表单上创建的每个区域都将被赋予一个名称,我们也将在PHP文档中使用这个名称来标记正在发送的信息。

查看联系人表格

现在让我们开始我们的例子。我们将创建一个非常简单的起点,我将向您展示如何根据您自己的需要进行修改。了解代码及其工作原理将有助于您更好地使用它,并有助于确保您在将这些代码放在一个实时网站上时遇到的问题较少。

我将从一个非常基本的联系形式开始,让我们开始。下面是我们将用来创建联系人表单的基本HTML。

HTML表单代码


Name

Email

Message


使用上面的代码-您可以直接将它插入到HTML文档中来创建表单本身。稍后,我们将更多地修改它,并创建一些更自定义的内容。

联系表格PHP:如何实际创建它?

现在,为了使表单工作,我们需要使用一些PHP。这部分实际上比大多数人想象的要容易。我们将使用PHP$_POST函数,并为我们在表单中创建的每个名称创建标签。这将允许我们在以后进一步自定义表单。

现在,我们将创建mail.php文件-这就是从表单生成电子邮件并将其发送出去的内容:

mail.php


注意我们创建的三个名称标记。我们有名字,电子邮件和信息。这是我们以我们的形式创造的三个。这是将从我们的联系方式通过电子邮件发送的信息。

$收件人区域将需要修改,以适应您的电子邮件地址,您希望有电子邮件发送到。您还可以根据需要修改其他信息,如主题和成功消息。稍后,当我们开始更多地定制表单时,我们将对这些内容进行更深入的研究。

向联系人表单添加更多自定义

现在,由于我们对联系人表单HTML有了基本的了解,并将其与PHP结合起来创建一个基本的联系人表单,我将更进一步,现在展示如何定制此表单,以更好地满足您对项目的需求。

我将展示如何添加下拉选项框,并解释如何添加复选框或单选按钮来选择要选择的项目,并从表单中发送电子邮件。

添加下拉选项框

要添加下拉框,我们需要在HTML代码中添加部分,以创建表单的区域,并将适当的代码添加到PHP中,以识别来自HTML的输入并能够发送。

下面是一个简单的HTML联系人表单下拉框示例:

Dropdown Box


在上面的例子中,我们创建了一个带有选项1到4的下拉框。选项值将是实际提交的内容,其中的文本将是用户在进行选择时实际看到的内容。请记住,这将需要插入到表单字段中小河片做网站的HTML文档中。

下面是我们用下拉框创建的HTML联系人表单的一个示例:

带有下拉框的HTML联系人表单

Name

Email

Phone

Dropdown Box


Message


现在,我们需要更改联系人表单PHP,以确保HTML表单中的信息被呈现并提交到提供的电子邮件地址。

让我们来看看我小河片做网站们修改过的PHP,它现在将具有可读的下拉框。

请注意,我们已经将“下拉”添加为$_post变量,该变量现在将被发送。下拉名称本身来自标记为

Size选项允许您一次选择可查看的行数。最一般的设置是“1”,但如果您愿意,可以将其更改为更多。

在联系人表单中添加单选按钮和复选框

若要添加单选按钮和复选框,将与上述相同。我们需要将其添加到HTML代码中,然后修改PHP以从联系人表单HTML中获取输入并正确发送。

下面是添加复选框的HTML代码示例:

Request Phone Call:

Yes:
No:

使用所有接触形式的元素的完整示例

对于这个例子,我已经更改了一些名称,我们可以为我们完成的示例创建一个自定义的联系人表单,因为我们对它的工作方式有了基本的了解。

我们的HTML联系人表单代码

Name

Email

Phone

Request Phone Call:

Yes:
No:

Website

Priority


Type


Message


同样,我们的PHP将与此HTML表单相对应,以使其工作:

我们完成的PHP联系人表格代码

自定义联系人表单成功上的“谢谢”消息

在本教程的最后一部分,我将解释如何定制我们创建的PHP脚本的最后一行。基本的方式只是在我们的屏幕上回响“谢谢”,但我们需要做一个更好的方法,这样我们的观众就可以轻松地回到另一个页面。

这对于创建自定义页面重定向或在完成表单后将用户带到另一个区域的链接非常有用。请记住,在使用PHP时,有些HTML在不破坏PHP代码方面会有所不同。

我们需要在这个单引号中使用单引号,而不是双引号,这样我们就不会终止我们的PHPArg。

我们将在“谢谢”消息之后添加一个空格,并将一个链接添加回我们的“form.html”文档(或您希望创建的任何链接),并使用内联样式更改链接的颜色。

让我们看看mail.php文件中修改过的echo命令:

echo "Thank You!" . " -" . " Return Home";

你可以玩上面的例子,为你的网站创建你自己的感谢信息。不需要内联样式;我只是在本例中使用它们,而不是包含样式表。请记住,仅在成功发送消息时才会看到echo命令。否则,将发送错误消息。

下载联系人表单文件

我提供下载完成的表格供您玩。您可以随意使用它,并为您自己的项目定制它。对于您的联系人表单,还有许多其他的事情可以用PHP完成。

您可能需要考虑的一个是CAPTCHA,它可以防止垃圾邮件。您也可以自定义表单的其他部分并创建自己的!祝大家玩得开心,我希望大家都喜欢这篇文章,并发现它对他们自己的需求很有用。

您可以通过单击[此处]下载示例文件。

注意:我在演示下载中包含了一些使用CSS的样式示例。这将允许您查看表单的样式,并了解如何使用CSS对其进行样式设计。

联系电话 400-6065-301

微信咨询 寒总监