表单/表格

全屏分步式用户调查问卷表单设计

面包多

全屏分步式用户调查问卷表单设计-创客云
这是一款非常实用的 jQuery 和 CSS3 全屏分步式用户调查问卷表单设计效果。该表单每一个步骤显示在一个屏幕中,只有填写了相应的信息,下一步按钮才会出现。该表单使用 animate.css 来制作元素动画,效果非常的酷。

HTML 结构

该用户问卷表单采用扁平化的风格。在页面的顶部有一个很细的进度条来显示已完成的步骤。整个表单的分步采用无序列表来制作。进度条的 HTML 结构如下:

也想出现在这里?联系我们
WordPress 主题
  1. <div class="progress">
  2.     <div class="progress-bar" style="width: 0;"> 
  3.       <span class="sr-only">60% Complete</span> 
  4.     </div>
  5. </div>

分步表单的 HTML 结构如下:

  1. <div class="questionaire">
  2.     <form>
  3.       <ul class="progress-form">
  4.         <li class="form-group animated fadeInRightBig  activate" data-color="#E1523D" data-percentage="20%">
  5.           <label for="nameInput">
  6.           <h1>Hey there!</h1>
  7.           Let's get this party started. Would you mind introducing yourself?
  8.           </label>
  9.           <input type="text" class="form-control getName" id="q1" placeholder="Herby"  required="required"/>
  10.         </li>
  11.         ...
  12.         <li class="form-group animated hide scrollable" data-color="#00AF66"  data-percentage="100%">
  13.           <h3>Please Review Your Answers (click on any of them to edit):</h3>
  14.           <div class=" editable">
  15.             <div class="break answer1" contenteditable="true"></div>
  16.             ...
  17.           </div>
  18.         </li>
  19.       </ul>
  20.     </form>
  21. </div>

该用户问卷表单只提供了一些基本的 CSS 样式。并使用媒体查询来制作响应式表单效果。所有的动画效果都是通过animate.css来完成的。

JAVASCRIPT

在 jQuery 代码中,主要是处理进度条的动画,以及提交按钮和下一步按钮的相应处理。分别为它们在触发事件的时候添加和移除相应的 class 类。其中在.help 上调用了 Bootstrap 内置的 popover()方法来弹出一个提示框。

  1. $('.help').popover();

每一个步骤提交的答案都会被写入到最后一步的列表中:

  1. $(function () {
  2.     $('#q1').keyup(function () {
  3.         var nameValue = $(this).val();
  4.         $('.answer1').html(nameValue);
  5.     });
  6.     $('#q2').keyup(function () {
  7.         var nameValue = $(this).val();
  8.         $('.answer2').html(nameValue);
  9.     });
  10.     $('#q3').keyup(function () {
  11.         var nameValue = $(this).val();
  12.         $('.answer3').html(nameValue);
  13.     });
  14.     $('#q4').keyup(function () {
  15.         var nameValue = $(this).val();
  16.         $('.answer4').html(nameValue);
  17.     });
  18.     $('#q5').keyup(function () {
  19.         var nameValue = $(this).val();
  20.         $('.answer5').html(nameValue);
  21.     });
  22. });
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!