在这节课中,我们将构建一个形式,对于这个示例,它将引领一代形式(我们希望捕获使虚构的业务,它会像这样结束时)。很快,我们将在5步骤。
首先我们会在什么形式(解剖),我们将展示如何配置表单元素,我们的风格形式,我们会谈的成功和错误状态,最后,我们将控制时会发生什么人填写这张表格。
让我们看一看解剖学。所以我们可以引进一个表单(顺便说一下,有很多形式的事情您可以添加),但我们会开始…形式块从添加面板(我们可以拖动)。并在默认情况下,表单块里面有很多东西了。这是至关重要的一个原因:我们需要一种形式块捕获表单数据。
虽然有很多的东西我们可以看到,只有三分之一的里面有什么。打开表单块吗?有三件事:表单本身(我们所看到的),但第二…我们有一个成功消息(当有人提交表单)。最后,一条错误消息(如果有人问题提交。)
如果我们看一个小looksie形式下,几乎所有我们看到在画布上:我们所有的标签、文本框和submit按钮。
米盖尔(笑痴狂):你真的…
Grimur:米盖尔,怎么了?我们拍摄。
米盖尔:你不能这么说。
米盖尔,Grimur:我可以。我所做的。否则,形态解剖学是无聊的。
但有一个很好的练习:不删除字段标签。这些通常可导航的关键。所以,如果你想去最小的,考虑其他的方法。
如果我们想要添加其他表单元素(如我们看到的)我们可以拖动这些正确的。
现在让我们做。我们可以开始建立这种“领先一代的形式。“所以我们我们想要添加的字段。但拖拽东西…。
米盖尔:无聊?
Grimur:是的,现在的魔法编辑|拥有一切我们需要领导创形式。的名字。电子邮件。电话号码。公司的大小。和一个文本区域添加更多的信息。
让我们谈谈配置。
我们的目标是什么?我们添加这些不同的元素,这样我们可以从潜在客户收集我们需要的所有信息…是谁填写这张表格。
所以有很多这些表单元素,我们可以双击(…或者只是点击小按钮…),我们可以看到我们所有的选项。
假设我们真的需要他们的名字和电子邮件。我们可以进去,并确保不仅名字,但电子邮件标记为需要。(可能其他都是可选的。这完全取决于你。我喜欢一切必需的,但老实说,这也是米格尔的原因仍然是填写我的生日回复尽管我有,事实上,庆祝我的生日,哈哈,是的,三个星期前。)
但是有更多的在这些配置选项。任何时候我们看到NAME字段输入设置?这是我们内部识别领域,它将出现在表单提交。直接用户不会看到这个名字,但是它仍然出现在代码,所以小心不要包括你不希望用户看到的东西。
下一个。文本的类型,像电子邮件。这就是验证。邮件,会检查以确保写在什么领域是一个电子邮件,而不是一个随机的砸键盘字符,像米格尔的默认输入模式。
米盖尔:那不是我的默认输入模式。
米盖尔Grimur:对不起。
米盖尔:没关系。
(Miguel回到他的笔记本电脑,砸键盘字符类型。)
之后,我们有占位符,这是有人类型之前显示的文本。(这被覆盖的那一刻你开始打字。)
然后所需的选项。我们覆盖这个:早些时候,它阻止某人提交表单没有填出来。
和其他大型自动对焦。当用户加载这个页面,这个文本字段已经集中(它会闪烁的光标)。但是要注意:如果你的形式在一个长页面,它可能会导致有人得到自动下推到页面的底部。
我们还可以选择提交按钮。双击。在这里,我们可以改变文本像进行激动人心的东西。或提交。或执行。
如果我们想要什么?我们可以改变等文本。这个文本将取代按钮文本表单被提交时暂时。
这一切吗?不。因为每个表单元素有不同的选项(各种输入设置基于每个元素类型,您可以访问元素的设置)。
事实上,有秘密的选择在不同的元素,希望你会发现在构建自己的形式。
但让我们看看样式。
这是超级强大。字段标签(我们知道这个):默认字段标签都在这里。我有一个文本样式称为“标签”在我的项目中,已经有一些排版风格,我可以快速应用相同的类通过选择每一个标签,并添加类。(我使用命令+输入键盘快捷键可以让我直接选择字段)。同时,我的键盘和鼠标为我所做的这一切。
让我们也去创建一个类…我们的文本字段。我们称这类“字段”,因为我们使用其他东西。
背景颜色:让我们把这个浅灰色的颜色(我们有一个样本)。边境边境:让我们改变颜色0%的α。(顺便说一下…为什么?我要讲为什么。)
现在就是这样。
我们确保这个类适用于我们所有的文本字段…但我们会继续把这一步。因为我们也会运用这些风格变化选择字段(公司规模的东西),我们会做同样的事情为我们的文本区域,我们将选择它并确保相同的类。
快速:我们覆盖占位符,因为这是一个请求我们得到很多。
占位符文本实际上是一个国家。一个输入,
米盖尔:我检查,它不是。
Grimur:米盖尔,引人入胜。让我告诉你我的意思。
米盖尔:请。
Grimur:这些字段选择(让我们确保选择字段,它有一个类应用)……但我们可以进入我们的下拉,看看这个:占位符。
的文本占位符是指预先写好的(我们之前显示这个)。如果我们想要一个非常浅灰色(因为简约主义),我们可以这么做。当然,它是世界上最不可见的,坦白说,灼热的我的视网膜只是想读这段文字,所以让它灰色的,没那么可怕。
但这是占位符。如果我们想要改变的颜色输入文本…所以当有人开始输入到这些文本字段,我们控制颜色。我们确保我们的样式。
我们会下降,影响字体颜色——让它明显喜欢红色的东西……当我们做,我们可以去预览,并开始键入一些,和…它是红色的。(注意,也影响公司规模的选择字段)。
好吧。退出预览模式?回去,打开字体颜色吗?让它红色略低于红现在?水合物…因为水化是关键吗?现在的文本不是红色的。
但还有另一个重要的部分类型的东西。这就是让用户知道,当一个特定的领域选择(或集中)。
所以。如果我们去预览页面,点击文本框内?现在这一领域集中。这取决于你风格的项目,你可能会喜欢它。或者你想做些不同的事情。如果是这样的话,我们可以覆盖的风格。
我们可以通过选择文本框获得焦点,点击状态。我们可以看到我们有“专注。”,从这里我们可以风格…国家所有。对我们来说,我们可以做类似的改变背景颜色(画一些更多的关注,使它有点深和更明显)。
但对于集中状态,一个很常见的是一个边境(让我们设置颜色黑色边框,所以我们看到效果)。如果我们进入预览模式后,我们可以点击看看,焦点状态是什么样子。
但是请记住:我们早些时候边框颜色透明。为什么?(为什么我们不直接将边界设置为0像素?)这是为什么。
如果我们把我们的文本字段没有状态(不集中;只是在没有),我们将其设置为0像素?我们看到了边界消失。(预期)。
如果我们进入专注状态,类似5像素(我只是添加这证明一点)……问题是:如果我们回到我们的没有状态(我们可以逃脱撞到键盘),我们进入预览模式,注意它如何影响文档流(摇晃,其他事情是重点)。
所以。的一个更好的方法是这样的:没有一个国家(像我们之前显示),让我们确保我们将边界设置为一个像素(我不设置任何0像素这一次)。但我设置的颜色,边境(0)是α…。我们没有看到边界。
现在和集中状态吗?我们可以回去和设置,α别的(给它一些对比)……现在,如果我们回到没有状态去预览,我们都设置:我们可以看到我们选择的边界(我们)关注每一个文本字段。
所有的工作吗?这个设计,我要删除深点的颜色,因为我们仍能看到集中效应与背景颜色。
不管怎样,一旦我准备设计打样,我可以进入预览每个字段时,看看它是什么样子(每个文本字段)是专注。
现在有神奇的css像css的发展轮廓,使这更容易,我们有大量的Webflow大学但是现在让我们进入样式按钮。
但是我们的按钮呢?与我们的按钮选择,我们可以风格。我们可以风格的重量,大小和颜色的字体,字符间距,我们可以在资本化和改变,让我们改变背景颜色。(我们可以匹配我们的设计风格变化。)这些都是我们做的修改但是你可以选择你喜欢风格。
让我们继续成功和错误状态。
现在我们所看到的在画布上吗?是正常状态。(事实上,与我们形成块选择,我们可以去元素设置,我们可以看到它在正常)。切换到成功?现在我们看看会发生什么当有人提交表单。我们有一些占位符文本,只要我们选择了成功消息块在Navigator,我们可以内部的块或任何风格。和…你可以添加额外的事情(例如,我拖着在一个图像)。
和它是一样的错误状态(如果有一个问题提交表单)。相同类型的控制,我们已经为我们的成功消息。回到正常状态?我们有完全访问我们的标准形式。
最后,让我们一起将这一切变成收到这些表单提交。
,只有两件事要注意(第一个是简单):如果你有一种形式,多种形式,等等。你可以去形式设置和设置表单的名称。
但是对于第二部分…让我们来谈谈当有人发送形式实际上发生了什么。当然,表单数据捕获,并将出现在项目设置(一旦我们在那里,我们可以去那里说的形式,和我们所有的表单数据一直在底部)。
但如果我向上滚动页面吗?我可以控制的其他方面:谁通知当提交表单。
足够简单,如果我想让表单数据总是发送给我吗?grimur@studiobruk.com吗?现在,我将得到一个电子邮件。想要添加Tearsa吗?Tearsa@studiobruk.com。
现在形式的一个副本发送到我和Tearsa每次填写。然而。从名字? !甚至是什么?这是一个错误吗?应该说“表单名称”吗?不。的名字是谁通知的电子邮件发送。我也可以控制主题,或答复行(如果我想要电子邮件回复…)。我可以控制邮件的主体。
很多,我也可以使用变量,我们有大量的信息在Webflow大学。所以如果你还没有检查出来。
一次。当有人提交表单吗?提交的数据将邮件地址(或地址),它也会被下面列出。你可以访问它,或者你甚至可以下载一个CSV文件。
但是,我的朋友,和米格尔…是形式。我们去的基本结构形式,我们双点击配置和更改输入设置在我们的元素,我们风格形式,我们谈到了包括成功和错误消息,最后,我们覆盖了表单提交。当用户提交表单。
当我们都完成了,我们可以在几个点击我们网站发布…去测试这个在生产环境中。欧宝体育在线首页
1、2、3、类型类型的类型。我刚写了第三幕,场景的哈姆雷特。
但我也介绍了基础知识的形式与大家…Webflow的设计师。
