在这节课中，我们将构建一个表单——在这个例子中，它将是一个LEAD生成表单(我们想为我们虚构的业务捕获线索——最后它看起来像这样)。我们将用5步快速进行。
首先，我们将讨论表单中的内容(剖析)，我们将展示如何配置表单元素，我们将设置表单的样式，我们将讨论成功和错误状态，最后，我们将控制当用户填写此表单时发生的情况。
我们来看看解剖学。因此，我们可以引入一个表单(顺便说一下，有很多表单的东西可以添加)，但我们将从add面板中的form块开始(我们可以直接拖进来)。默认情况下，表单块里面已经有一堆东西了。这是至关重要的一个原因:我们需要一个表单块来实际捕获表单数据。
虽然我们可以看到很多东西，但这只是里面的三分之一。打开Form块?实际上有三件事:表单本身(我们看到的)，但第二，我们有一个SUCCESS消息(当有人提交表单时)。最后，一个ERROR消息(如果有人提交有问题)。
如果我们在Form下面稍微看一下，我们在画布上看到的几乎所有东西:所有的标签、文本字段和提交按钮。
米格尔(狂笑):你真的……
格里默:米格尔，怎么了?我们拍摄。
米盖尔:你不能这么说。
格里默:我可以，米格尔。我就这么做了。否则，形式解剖是无聊的。
但是这里有一个非常好的实践:不要删除字段标签。这些通常是可访问的导航的关键。所以，如果你想要最小化，考虑一下其他的方法。
如果我们想添加其他表单元素(就像我们在这里看到的)，我们可以直接拖进来。
我们现在就开始吧。我们可以开始建立这种“潜在客户生成模式”。我们将添加我们想要的字段。但是拖放东西....
米盖尔:无聊?
格里默:是的，有了编辑|的魔力，我们现在有了所有我们需要的主要形式。的名字。电子邮件。电话号码。公司的大小。和一个文本区域，以添加更多的信息。
让我们谈谈配置。
我们的目标是什么?我们添加了这些不同的元素，这样我们就可以从正在填写这张表格的潜在客户那里收集所有我们需要的信息。
有了很多这样的表单元素，我们可以双击它们(…或者甚至只是点击小按钮…)，我们可以看到所有的选项。
假设我们真的需要得到他们的名字和电子邮件。好了，我们可以进入，确保不仅是名字，而且电子邮件也被标记为REQUIRED。(也许其他选项是可选的。这取决于你。我喜欢把所有的东西都做好，但说实话，这也是为什么米格尔还在填我的生日请柬，尽管我确实已经庆祝了我的生日，哈，是的，三周前。)
但是在这些配置选项中还有更多的事情要做。任何时候我们在输入设置中看到NAME字段?这就是我们如何在内部标识字段的方法，这将在表单提交中显示出来。用户不会直接看到这个名称，但它仍然显示在代码中，因此要注意不要包含您不希望用户看到的内容。
下一个。文本的类型，比如电子邮件。这本质上就是验证。对于电子邮件，它将检查字段中所写的内容是否为电子邮件，而不是像Miguel的默认输入模式那样，随机敲击键盘字符。
米盖尔:那不是我默认的打字模式。
米盖尔Grimur:对不起。
米盖尔:没关系。
[米格尔回到他的笔记本电脑前，敲打键盘上的字符。]
在这之后，我们有占位符，这是在某人在字段中输入内容之前显示的文本。(当你开始在该字段中输入时，它会被覆盖。)
然后是所需的选项。我们之前已经讲过了:它阻止用户在不填写表格的情况下提交表单。
另一个是自动对焦。当用户加载这个页面时，这个文本字段将已经有焦点(它将有一个闪烁的光标)。但是要小心:如果你的表单在一个很长的页面上，这可能会导致有人被自动推到页面的底部。
我们也有Submit按钮的选项。双击。在这里我们可以将文本更改为一些令人兴奋的内容，如Engage。或提交。或执行。
如果我们想的话?我们可以改变等待文本。这是在提交表单时临时替换按钮文本的文本。
这一切吗?不。因为每个表单元素都有不同的选项(基于您可以在element的设置中访问的每个元素类型的各种输入设置)。
事实上，在不同的元素中有一些SECRET选项，希望您在构建自己的表单时能够发现它们。
但是让我们继续讨论样式。
这是超级强大的。字段标签(我们知道这个):字段标签默认在这里。我在我的项目中有一个名为“标签”的文本样式，它已经有一些排版样式，我可以通过选择每个标签快速应用相同的类，并添加该类的权利。(我使用的是Command + Enter键盘快捷键，这让我可以跳到右边的选择器字段。)而且，我的键盘和鼠标都在为我做这些事情。
让我们继续为文本字段创建一个类。我们称这个类为Fields，因为我们要用它来做其他事情。
背景色:让我们将其设置为浅灰色(我们有一个样本)。边框:让我们改变边框的颜色为0%。(顺便说一下…为什么?我马上就会讲到原因。)
现在就到这里。
让我们确保我们将这个类应用到我们所有的文本字段中…但我们实际上会更进一步。因为我们还将对SELECT字段(类似于公司大小的东西)应用这些样式更改，并且我们将对文本区域做同样的事情——我们将选择它并确保应用相同的类。
让我们快速介绍一下占位符，因为这是我们经常收到的请求。
占位符文本实际上是一个STATE。一个输入,
米盖尔:我查过了，不是的。
Grimur:米盖尔,引人入胜。让我告诉你我是什么意思。
米盖尔:请。
Grimur:选择这些字段中的任何一个(让我们确保该字段被选中并应用了一个类)…但我们可以进入下拉菜单，看看这个:PLACEHOLDER。
占位符指的是预先写好的文本(我们之前展示过)。所以如果我们想要一个非常非常浅的灰色(因为极简主义)，我们可以这样做。当然，它是世界上最不可见的东西，坦率地说，光是读这段文字就让我的视网膜灼热，所以让它变成灰色，不那么可怕。
但这是占位符。如果我们想改变打字文本的颜色。当有人开始输入任何这些文本字段时，我们控制颜色。让我们确保我们的样式为None。
然后我们向下修改字体的颜色，让它看起来很明显，比如红色。当我们这样做的时候，我们可以去预览，然后开始输入一些东西，然后……它是红色的。(注意这也会影响公司规模的Select字段。)
好的。退出预览模式?回去打开字体颜色?让它比现在的红一点?水合物……因为水化的关键吗?现在文字不是红色的了。
但关于输入内容还有另一个重要的部分。这就是让用户知道特定字段何时被选中(或FOCUSED)。
所以。如果我们去预览我们的页面，点击文本框里面?这个领域现在受到关注。根据您如何设计您的项目，您可能喜欢它的现状。或者你想做点不一样的事。如果是这样的话，我们可以重写那个样式。
我们可以通过选择文本字段并单击States来访问Focus。我们可以看到我们有了"聚焦"从这里我们可以STYLE…国家所有。对于我们来说，我们可以做一些像改变背景颜色之类的事情(让它变得更暗更明显来吸引更多的注意力)。
但对于聚焦状态，一个真正常见的东西是边框(让我们将颜色设置为黑色边框，以便看到效果)。如果我们在此之后进入预览模式，我们可以点击查看焦点状态是什么样子的。
但请记住:前面我们将边框颜色设置为透明。为什么?(为什么我们不把边界设置为0像素呢?)这是为什么。
如果我们将文本字段设置为None状态(不在Focused;只是在None)，我们将它设置为0像素?我们看到边界消失了。(预期)。
如果我们进入聚焦状态，并将它设置为5像素(我只是在这里添加这个来证明一点)…问题来了:如果我们回到none状态(我们可以点击键盘上的escape键)，然后进入预览模式，注意它是如何影响文档流的(东西会晃动，其他东西会聚焦)。
所以。一个更好的方法是:在none状态下(就像我们之前展示的那样)，让我们确保我们设置边界为一个像素(这次我没有设置任何为0像素)。但是我正在设置边界的颜色(它是ALPHA…为0)，这样我们就看不到边界了。
那么现在的专注状态呢?我们可以返回并设置alpha值为任何其他值(给它更多的对比度)…现在如果我们返回到none状态并进入预览，我们就都设置好了:我们可以在每个文本框上看到我们选择的边框(当我们聚焦时)。
所有的工作吗?对于这个设计，我实际上要删除较深的颜色，因为我们仍然可以看到聚焦效果与背景色。
无论如何，一旦我做好了打样的准备，我就可以进入预览，看看当每个字段(每个文本字段)被聚焦时它是什么样子的。
css中有很多神奇的进步，比如css大纲，这让很多事情变得更简单，我们在Webflow University上有很多这样的东西，但现在让我们讲一下按钮的样式。
但是我们的按钮呢?选中按钮后，我们可以设置它的样式。我们可以样式化重量，大小，字体的颜色，字母间距，我们可以改变大写，让我们改变背景颜色。(我们可以根据我们的设计来调整款式。)这些只是我们正在做的改变，但你可以随心所欲。
让我们继续讨论成功和错误状态。
我们现在在画布上看到的是什么?是正常状态。(事实上，当我们的表单块被选中后，我们可以转到元素设置，我们可以看到它是正常的)。转向成功?现在我们看到当有人提交表单时会发生什么。我们有一些占位符文本，只要我们选择了Navigator中的SUCCESS消息块，我们就可以对块或里面的任何东西设置样式。和…你可以添加额外的东西(举个例子，我拖进了一张图片)。
Error状态也是如此(如果提交表单时出现问题)。这里的控制类型与我们对成功信息的控制类型相同。恢复正常状态?我们完全可以看到我们的正常形态。
最后，让我们将所有这些整合到接收这些表单提交中。
这里只需要注意两件事(第一点很简单):如果你有一个表单，可以有多个表单——无论如何。您可以转到表单设置并设置表单的名称。
但是在第二部分，让我们讨论当有人发送表单时实际发生了什么。当然，表单数据会被捕获并显示在项目设置下(一旦我们在那里，我们可以转到它说的Forms的地方，所有的表单数据都在最下面)。
但如果我向上滚动这个页面呢?我可以控制这个的其他方面:当表单提交时通知WHO。
很简单，如果我希望表单数据总是被发送给我?grimur@studiobruk.com吗?现在我会收到一封电子邮件。想加入Tearsa吗?Tearsa@studiobruk.com。
现在每次填完表格都会寄给我和特蕾莎一份副本。然而。从名字? !那到底是什么?是打印错误吗?是不是应该写“表单名”?不。发件人名称是通知电子邮件是从谁或什么发送的。我还可以控制标题行，或回复行(如果我想让电子邮件可以回复的话)。我可以控制邮件的主体。
对于这些，我也可以使用变量，我们在Webflow University上有很多这方面的信息。如果你还没看过的话，去看看吧。
一次。当有人提交表单时?提交数据将通过电子邮件发送到该地址(或多个地址)，它也将在下面列出。你可以在这里访问它，或者你甚至可以下载一个CSV文件。
但是，我的朋友们，还有米格尔，那都是形式。我们浏览了表单的基本结构，双击配置和更改元素的输入设置，设置了表单的样式，讨论了包含成功和错误消息的状态，最后讨论了表单提交。当用户提交表单时会发生什么。
当我们全部完成时，我们只需点击几下就可以发布我们的网站，然后在PRODUCTION环境中进行测试。欧宝体育在线首页
1 2 3，类型类型类型。我刚写完《哈姆雷特》第三幕第一场。
但我也在Webflow Designer中向你们介绍了表单的基础知识。
