如何使用智能表单脚本创建Web预订表单

最新推荐文章于 2021-07-13 15:19:11 发布

cunjie3951

最新推荐文章于 2021-07-13 15:19:11 发布

阅读量385

点赞数

文章标签： html java css js javascript ViewUI

预订表格可以在网站上达到许多目的。您可以使用它们来允许您的访客预订旅馆客房或热门活动的门票。它们还可以用于其他事情，例如与客户预约约会。

有许多插件和脚本可用于将预订表单添加到您的网站。针对您的情况的正确选择取决于您要寻找的功能以及易用性和预算等因素。在本教程中，我将向您展示如何使用CodeCanyon的Smart Forms脚本为您的网站创建预订表单。

为什么要使用智能表格？

在我们开始深入探讨该主题之前，我想解释一下为什么我选择Smart Forms来完成此任务。

您将在Smart Forms的说明页面上注意到的第一件事是，它提供了许多功能并允许您创建各种形式的表单。您正在创建的网站很有可能至少需要其他几种不同类型的表单，例如联系表单或评论表单。使用Smart Forms，您将能够在很短的时间内创建所有这些表单。

在定制和功能方面，您还会有很多选择。该脚本会定期更新，并会不断接收新功能。它还以三种独特的样式和配色方案提供了大量具有不同形式的入门模板。这样，您可以确定创建的任何表单都可以与网页的其余部分完美融合。

我们将要建设的

让我们使用智能表单创建预订表单的前端。我们将创建一个表格来预订酒店房间。相同的原则将适用于为活动或任何其他类型的表单创建预订表单。您只需要对输入字段进行适当的更改。

这是我们要做的：

入门

如果还没有，那么第一步是从CodeCanyon 购买脚本。购买脚本后，您将能够下载文件，并且还可以获得六个月的终身免费更新和支持。

解压缩下载的文件后。 zip文件，您会注意到它已经包含了许多模板，可用于所有内容，从简单的注释和联系表单到一些多步骤表单。您可以简单地在项目中开始使用这些模板中的任何一个，并且最好在十到十五分钟内完成。

为了帮助您了解所有基本知识，我们将从头开始创建预订表格。

创建预订表格

预订表单页面的标记一开始应该看起来像这样。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Booking Form - XYZ Hotels </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="path/to/css/smart-forms.css">
	<link rel="stylesheet" href="path/to/css/font-awesome.min.css">	   
  </head>
  <body>
 
	<!-- OUR BOOKING FORM MARKUP -->
 
  </body>
</html>

Smart Forms依靠Font Awesome来将所有图标添加到表单中，因此您必须加载两个CSS文件。

现在，我们将继续进行预订表格的内容。 Smart Forms框架将表单分为三部分：表单标题，表单主体和表单页脚。

顶部的表单标题部分用于以可显示的方式显示表单标题。对于预订表格，您可以说诸如在线预订房间或在数分钟内预订之类的内容 。

表单主体将包含一堆访客已填写的元素。您可以在此处询问任何相关信息，例如成年客人的人数和陪同他们的儿童人数。同样，您可以询问他们的停留时间，联系信息以及其他必要的详细信息。

表单页脚部分包含用于提交或取消表单的按钮。它在表单底部显着显示。

添加智能表单样板

这是我们需要在网页正文中添加的表格标记，以显示我们的预订表格。

<div class="smart-wrap">
  <div class="smart-forms smart-container wrap-2">
  
    <div class="form-header header-primary">
      <h4><i class="fa fa-calendar"></i>Make Room Reservations in Minutes</h4>
    </div>
    
    <form method="post" action="/" id="contact">
      <div class="form-body">
      
       <!-- OUR FORM ELEMENTS WILL GO HERE -->                                                
        
      </div>
      <div class="form-footer">
        <button type="submit" class="button btn-primary">Confirm Booking</button>
        <button type="reset" class="button">Cancel</button>
      </div>
      
    </form>
    
  </div>
</div>

到目前为止，我们已经将所有标记添加到了页面中，您应该得到与下图类似的内容。

建立表单组件

现在，将我们的实际表单元素添加到预订表单中。这是您需要这样做的标记。它将进入带有form-body类的div标签内。

<div class="section">
  <label for="guestname" class="field-label">Please Enter Your Name</label>
  <label for="guestname" class="field prepend-icon">
    <input type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe">
    <span class="field-icon"><i class="fa fa-user"></i></span>  
  </label>
</div>
              
<div class="frm-row">
  <div class="section colm colm6">
    <label for="guestemail" class="field-label">Email Address</label>
    <label for="guestemail" class="field prepend-icon">
      <input type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com">
      <span class="field-icon"><i class="fa fa-envelope"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="guestelephone" class="field-label">Telephone / Mobile</label>
    <label for="guestelephone" class="field prepend-icon">
      <input type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number">
      <span class="field-icon"><i class="fa fa-phone-square"></i></span>  
    </label>
  </div>
</div>

<div class="frm-row">
  <div class="section colm colm6">
    <label for="adults" class="field-label">Number of Adults</label>
    <label for="adults" class="field prepend-icon">
      <input type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults">
      <span class="field-icon"><i class="fa fa-users"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="children" class="field-label">Number of Children</label>
    <label for="children" class="field prepend-icon">
      <input type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children">
      <span class="field-icon"><i class="fa fa-users"></i></span>  
    </label>
  </div>
</div>

<div class="frm-row">
  <div class="section colm colm6">
    <label for="checkin" class="field-label">Check-in Date</label>
    <label for="checkin" class="field prepend-icon">
      <input type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy">
      <span class="field-icon"><i class="fa fa-calendar"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="checkout" class="field-label">Check-out Date</label>
    <label for="checkout" class="field prepend-icon">
      <input type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy">
      <span class="field-icon"><i class="fa fa-calendar"></i></span>  
    </label>
  </div>
</div>

<div class="spacer-t20 spacer-b30">
  <div class="tagline"><span>Please answer these questions for a pleasant stay</span></div>
</div>

<div class="frm-row">
  <div class="option-group field">
  
    <div class="section colm colm6">
      <label class="switch">
        <input type="checkbox" name="switch1" id="switch1" value="switch1">
        <span class="switch-label" data-on="YES" data-off="NO"></span>
        <span>Will you be bringing a pet?</span>
      </label>
    </div>
        
    <div class="section colm colm6">
      <label class="switch">
        <input type="checkbox" name="switch2" id="switch2" value="switch2">
        <span class="switch-label" data-on="YES" data-off="NO"></span>
        <span>Do you need us to pick you up?</span>
      </label>
    </div>
              
  </div>
</div>



<div class="section">
  <label for="comment" class="field-label">Anything else we should know about?</label>
  <label for="comment" class="field prepend-icon">
    <textarea class="gui-textarea" id="comment" name="comment" placeholder="Let us know about any special accommodation needs"></textarea>
    <span class="field-icon"><i class="fa fa-comments"></i></span>
    <span class="input-hint"> 
      <strong>Please:</strong> Be as descriptive as possible
    </span>   
  </label>
</div>

将所有标记添加到表单后，它现在应如下图所示。

现在看来似乎很多代码，但是您可以从不同的入门模板中复制大部分代码。之后，您只需要对标记进行少量更改即可对其进行自定义。例如，您可以轻松更改Font Awesome图标的类，以更准确地表示输入字段。

重要的是要记住，在更改表单元素的某些属性时应格外小心，因为这会影响表单的整体外观或行为。例如，您可以通过更改colm类来更改不同元素的宽度。当一行中的两个输入元素具有类colm8和colm4 ，它们的宽度之比为2：1。如果数字加起来不等于12，那么您还将在该行中看到一些空格。

每当您更改前端字段的name属性的值时，请确保更改后端PHP文件中的相应值。这样，您将不会丢失用户提供的任何表单数据。

在我们的预订表格中添加验证

Smart Forms框架依靠核心jQuery和许多其他与jQuery相关的插件为您提供不同的功能，例如月份和时间选择器或拖放文件的功能。您可以使用总共22个不同JavaScript文件来增强表单的功能。

确保仅包括使您的特定表单起作用所需的文件。文档中提到了每个文件的功能。在我们的案例中，我们将需要包括核心jQuery文件，jQuery UI文件和表单验证文件。

您只需将以下代码添加到您的网页即可包含所有JavaScript文件。您可以将其放在文档的头部或正文的末尾。

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/additional-methods.min.js"></script>

添加文件后，需要添加一些代码以开始验证过程或将其他元素（例如日期范围选择器）添加到表单UI。这是您需要添加的代码。

<script type="text/javascript">
$("#booking-form").validate();

$("#checkin").datepicker({
	defaultDate: "+1w",
	changeMonth: false,
	numberOfMonths: 1,
	prevText: '<i class="fa fa-chevron-left"></i>',
	nextText: '<i class="fa fa-chevron-right"></i>',
	onClose: function( selectedDate ) {
		$( "#checkout" ).datepicker( "option", "minDate", selectedDate );
	}
});

$("#checkout").datepicker({
	defaultDate: "+1w",
	changeMonth: false,
	numberOfMonths: 1,
	prevText: '<i class="fa fa-chevron-left"></i>',
	nextText: '<i class="fa fa-chevron-right"></i>',			
	onClose: function( selectedDate ) {
		$( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
	}
});
</script>

您将必须使用为booking-form设置的ID替换booking-form表单，然后它将自动开始验证字段。下图显示了开始验证后默认情况下错误消息的显示方式。

初始化日期选择器时，您可以传递几个选项。他们将确定日历的用户界面，例如要显示的月份数或应该显示日历的日期。例如，将defaultDate设置为+100w将在未来100周内打开日历。

还有一点需要注意的是，在选择日期之后，签入日历会将签出日历的最小日期设置为所选日期。这是通过附加在onClose事件上的回调函数完成的。签出日历的功能类似，但是它设置了签入日历的最大日期。

最后的想法

在本教程中，我们学习了如何使用CodeCanyon上的Smart Forms脚本创建预订表单。在此过程中，我们介绍了一些基础知识，可帮助您快速入门并创建自己的独特表单。如您所见，使用智能表单通过输入验证和其他增强功能可以轻松创建美观的表单。

您可以使用Smart Forms框架创建更多功能，而不仅仅是预订表单。创建标记和添加JavaScript功能的过程将与我们在此介绍的过程相似。如果您感到困惑，详细的文档将为您提供帮助。您还将获得六个月的免费支持，因此弄清楚如何进行表格工作将非常容易。

翻译自: https://code.tutsplus.com/tutorials/how-to-create-a-web-booking-form-with-the-smart-forms-script--cms-33825

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用智能表单脚本创建Web预订表单

预订表格可以在网站上达到许多目的。您可以使用它们来允许您的访客预订旅馆客房或热门活动的门票。它们还可以用于其他事情，例如与客户预约约会。有许多插件和脚本可用于将预订表单添加到您的网站。针对您的情况的正确选择取决于您要寻找的功能以及易用性和预算等因素。在本教程中，我将向您展示如何使用CodeCanyon的Smart Forms脚本为您的网站创建预订表单。为什么要使用智能表格？...
复制链接

扫一扫