Permalink
Browse files

First complete release.

  • Loading branch information...
0 parents commit ff5a220de65cd72bfcdca3576a03b37f207ef819 tomrogers123 committed Oct 21, 2011
Showing with 178 additions and 0 deletions.
  1. +21 −0 README.markdown
  2. +112 −0 demo/index.html
  3. +11 −0 demo/style.css
  4. +34 −0 jQuery.stageform.js
@@ -0,0 +1,21 @@
+## StageForm jQuery Plugin
+
+A simple application, dependant on JavaScript and the JQuery library, that segments HTML forms in order that the user is not overwhelmed with data. It looks for <fieldset></fieldset> elements (that are the semantic way to define areas of a form) inside of the element that it is invoked on and only displays one at a time.
+
+### Features
+- Simple to implement.
+- No JS dependant markup is targeted.
+- Attaches action to valid elements.
+
+### Usage
+
+As yet, there are no option you can pass to the function meaning, providing that the plugin file is loaded after JQuery itself, that you just call:
+
+```javascript
+
+ $('#some-form').stageForm();
+
+```
+
+## Feature Enhancements
+This is my first ever plugin. As I learn more and more, I will actively improve the feature set of this as well as adding various customisation options (such as changing the animation between fieldsets). If you have any suggestions, problems or would like to help make it better, please post to the issue queue. In particular, I would really appreciate it if somebody helped me to make it more efficient.
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+
+ <meta charset="UTF-8" />
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <title>Contact Form</title>
+
+</head>
+
+<body>
+
+ <div id="wrapper">
+
+ <header>
+ <h1>Really Simple Contact Form</h1>
+ </header>
+
+ <section id="main-content">
+ <form action="index.php" method="post" novalidate id="stage">
+
+ <fieldset class="message-details">
+
+ <legend>Message or Comment</legend>
+
+ <div class-"form-element-wrapper">
+ <label for="comments">Comments:</label>
+ <textarea name="comments" id="comments" rows="8" cols="40"></textarea>
+ </div>
+
+ </fieldset>
+
+ <fieldset class="personal-data">
+
+ <legend>Personal Information</legend>
+
+ <div class="form-element-wrapper">
+ <label for="name">Full Name:</label>
+ <input type="text" id="name" name="name" required />
+ </div>
+
+ <div class="form-element-wrapper">
+ <label for="email-address">Email:</label>
+ <input type="email" name="email-address" id="email-address" required />
+ </div>
+
+ <div class="form-element-wrapper">
+ <label for="phone">Phone:</label>
+ <input type="tel" name="phone" id="phone" required />
+ </div>
+
+ </fieldset>
+
+ <fieldset class="address-data-inputs">
+
+ <legend>Address Information</legend>
+
+ <div class="form-element-wrapper">
+ <label for="house-id">House Name or ID:</label>
+ <input type="text" id="house-id" name="house-id" placeholder="Hill House" required />
+ </div>
+
+ <div class="form-element-wrapper">
+ <label for="street">Street:</label>
+ <input type="text" id="street" name="street" placeholder="Banks Street" />
+ </div>
+
+ <div class="form-element-wrapper">
+ <label for="town">Town:</label>
+ <input type="text" id="town" name="town" placeholder="Funky Town"/>
+ </div>
+
+ <div class="form-element-wrapper">
+ <label for="county">County:</label>
+ <input type="text" id="county" name="county" placeholder="North Yorkshire" list="counties"/>
+ <datalist id="counties">
+ <option value="North Yorkshire">North Yorkshire</option>
+ </datalist>
+ </div>
+
+ <div class="form-element-wrapper">
+ <label for="postal-code">Postal Code:</label>
+ <input type="text" id="postal-code" name="postal-code" />
+ </div>
+
+ </fieldset>
+
+ <input type="submit" value="Fire Off Message" id="submit" />
+
+ </form>
+
+ </section>
+
+ </div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
+ <script src="../jQuery.stageform.js" type="text/javascript"></script>
+
+ <script type="text/javascript" charset="utf-8">
+
+ $(function() {
+
+ $('#stage').stageForm();
+
+ });
+
+ </script>
+
+</body>
+
+</html>
@@ -0,0 +1,11 @@
+* {margin: 0; padding: 0;}
+fieldset {margin: 20px 0; background: #fff;}
+input,textarea,label {font-size: 26px;}
+body {background: #111; font-family: Helvetica,sans-serif;}
+#wrapper {margin: 20px auto; width: 800px; -moz-border-radius: 5px; background: #eeeddd; padding: 30px;}
+input[type="submit"] {font-size: 26px; background: #fff;}
+input:focus,textarea:focus {border: 3px solid #ccc; }
+.form-element-wrapper,fieldset {margin: 5px 0; padding: 10px; border-radius: 5px; padding: 5px;}
+.message-details label {display: block;}
+legend {background: #fff;}
+h1 {font-weight: normal; font-size: 60px; text-align: center;}
@@ -0,0 +1,34 @@
+var i = -1;
+
+(function($) {
+
+ $.fn.stageForm = function() {
+
+ return this.each(function() {
+
+ var target = $(this).find('fieldset');
+ target.not(':last').append('<button class="next-section" type="button">Next</button>');
+ target.last().append('<button class="show-all" type="button">Display All Sections</button')
+ .click(function() {
+ target.fadeIn();
+ $('.show-all').remove();
+ $('.next-section').remove()
+ });
+
+ target.not(':first').hide();
+
+ $(this).find('.next-section').click(function() {
+
+ i++;
+
+ $(this).parent().fadeOut('fast', function() {
+ $(this).siblings('fieldset').eq(i).show('fast');
+ });
+
+ });
+
+ });
+
+ };
+
+})(jQuery);

0 comments on commit ff5a220

Please sign in to comment.