Skip to content

Instantly share code, notes, and snippets.

@pplantinga

pplantinga/form-progress.html

Forked from chriscoyier/index.html
Last active December 18, 2015 04:09
Show Gist options
  • Save pplantinga/5723638 to your computer and use it in GitHub Desktop.
Save pplantinga/5723638 to your computer and use it in GitHub Desktop.
Download ZIP
Example progress element usage, from Chris Coyer. This example actually works without editing.
Raw
form-progress.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form accept-charset="UTF-8" action="#" class="pro-form" id="pro-form" method="post">
<h1>Progress Form</h1>
<div class="progress-wrap">
<progress value="0" id="progress"></progress>
<div class="progress-message" id="progress-message">The form, it wants you.</div>
</div>
<input id="subscription_plan_id" name="subscription[plan_id]" type="hidden" value="1">
<input id="subscription_stripe_card_token" name="subscription[stripe_card_token]" type="hidden">
<div class="field">
<label for="card_name">Name on Card</label>
<br>
<input id="card_name" required="required" type="text">
</div>
<div class="field">
<label for="card_address_1">Street Address</label>
<br>
<input id="card_address_1" required="required" type="text">
<input id="card_address_2" type="text">
</div>
<div class="field">
<label for="card_zip">Zip Code</label>
<br>
<input id="card_zip" maxlength="10" pattern="[0-9]*" required="required" type="text">
</div>
<div class="field">
<label for="card_number">Credit Card Number</label>
<br>
<input id="card_number" pattern="[0-9]*" required="required" type="number">
</div>
<div class="field">
<label for="card_code">Security Code on Card (CVV)</label>
<br>
<input id="card_code" required="required" type="text">
</div>
<div class="field">
<label for="card_month">Card Expiration</label>
<br>
<select id="card_month">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<select id="card_year">
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
</select>
</div>
<div class="actions">
<input name="commit" type="submit" value="Subscribe">
</div>
</form>
</body>
</html>
Raw
script.js
$(document).ready( function() {
$("#pro-form input").blur(function() {
var numValid = 0;
$("#pro-form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
var progress = $("#progress"),
progressMessage = $("#progress-message");
progress.val( numValid / 6.0 );
if (numValid == 0)
progressMessage.text("The form, it wants you.");
else if (numValid == 1)
progressMessage.text("There you go, great start!");
else if (numValid == 2)
progressMessage.text("Nothing can stop you now.");
else if (numValid == 3)
progressMessage.text("You're basically a hero, right?");
else if (numValid == 4)
progressMessage.text("They are going to write songs about you.");
else if (numValid == 5)
progressMessage.text("SO CLOSE. PRESS THE THING.");
})
});
Raw
style.css
/* line 2, ../sass/style.scss */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 3, ../sass/style.scss */
body {
background: #333;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
font-size: 14px;
line-height: 1.4;
padding: 20px;
}
/* line 10, ../sass/style.scss */
h1, h2 {
font-family: Sans-Serif;
}
/* line 14, ../sass/style.scss */
.pro-form {
width: 350px;
border-radius: 20px;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #268ad0), color-stop(100%, #59c1d4));
background: -webkit-linear-gradient(#268ad0, #59c1d4);
background: -moz-linear-gradient(#268ad0, #59c1d4);
background: -o-linear-gradient(#268ad0, #59c1d4);
background: linear-gradient(#268ad0, #59c1d4);
padding: 2px 20px 20px 20px;
}
/* line 19, ../sass/style.scss */
.pro-form .field {
margin: 0 0 10px 0;
}
/* line 21, ../sass/style.scss */
.pro-form .field input[type=text], .pro-form .field input[type=number] {
width: 100%;
}
/* line 26, ../sass/style.scss */
#card_zip {
width: 50%;
}
/* line 29, ../sass/style.scss */
#card_code {
width: 30%;
}
/* line 32, ../sass/style.scss */
#card_address_2 {
margin-top: 3px;
}
/* line 36, ../sass/style.scss */
.actions {
margin-top: 25px;
}
/* line 38, ../sass/style.scss */
.actions .button {
display: block;
width: 100%;
float: none;
text-align: center;
font-size: 120%;
}
/* line 48, ../sass/style.scss */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* line 54, ../sass/style.scss */
input[type='text'],
input[type='number'] {
-webkit-appearance: none;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(#cccccc, #ffffff);
background: -moz-linear-gradient(#cccccc, #ffffff);
background: -o-linear-gradient(#cccccc, #ffffff);
background: linear-gradient(#cccccc, #ffffff);
padding: 4px 20px 4px 5px;
outline: 0;
border: 0;
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.3);
}
/* line 61, ../sass/style.scss */
input[type='text']:focus,
input[type='number']:focus {
background: white;
}
/* line 66, ../sass/style.scss */
.button {
float: left;
border: 0;
padding: 12px 16px;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #323232), color-stop(100%, #272727));
background: -webkit-linear-gradient(#323232, #272727);
background: -moz-linear-gradient(#323232, #272727);
background: -o-linear-gradient(#323232, #272727);
background: linear-gradient(#323232, #272727);
box-shadow: inset 0 1px 0 #3c3c3c;
border-radius: 5px;
border: 1px solid #111;
color: white !important;
font-size: 16px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
text-overflow: ellipsis;
cursor: pointer;
}
/* line 79, ../sass/style.scss */
.button:hover, .button:focus, .button.gsc-cursor-current-page {
background: #333;
text-decoration: none !important;
-webkit-box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.5);
}
/* line 83, ../sass/style.scss */
.button:hover strong, .button:focus strong, .button.gsc-cursor-current-page strong {
background: #999;
color: black;
}
/* line 88, ../sass/style.scss */
.button:active {
position: relative;
top: 1px;
box-shadow: none;
}
/* line 93, ../sass/style.scss */
.button.active {
background: black;
}
/* line 96, ../sass/style.scss */
.button a {
color: white;
}
/* line 101, ../sass/style.scss */
.progress-wrap {
text-align: center;
font-size: 10px;
color: white;
margin: 0 0 20px 0;
}
/* line 106, ../sass/style.scss */
.progress-wrap progress {
width: 100%;
margin: 0 0 5px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment