Skip to content

Instantly share code, notes, and snippets.

@bennettscience

bennettscience/form.html

Created June 15, 2017 00:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bennettscience/9ed8df9f033883eab481cde9e04074f7 to your computer and use it in GitHub Desktop.
Save bennettscience/9ed8df9f033883eab481cde9e04074f7 to your computer and use it in GitHub Desktop.
Download ZIP
Form for Ray Bird snail mail
Raw
form.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Camp Ray Bird Summer Camp</title>
<meta name="description" content="Summer Camp and Mission Work at Camp Ray Bird"/>
<meta name="rating" content="safe for kids" />
<link rel="stylesheet" href="styles/style.css" type="text/css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37547679-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
img { max-width:100%; width:100%; position:relative;}
.main { width: 100%; margin-top: 5px; }
.content { width: 80%; margin:0 auto; font-family:sans-serif; font-size:18px; font-weight: 300; }
.header { display: block; position: relative; width:80%; margin: 0 auto; }
.header__img { width: 100%; height: auto;}
.lesson { display:block; position:relative; }
.lesson__title { margin: 20px auto; text-align:center; }
.reading { display:block; font-weight:900; text-align:center; font-size:28px; margin:5px 0;}
.reading--quote { display:block; font-size: 18px; font-weight:300; width:40%; font-style: italic; text-align:center; margin: 0 auto;}
.form { display: block; position:relative; width:100%; }
.form__field { margin:3px 0; border:0; background-color:rgba(230,230,230,0.75); padding: 5px 2px; line-height:1.25; font-size:18px; font-weight:300 }
.form__field--normal { width:40% }
.form__field--hidden { }
.form__field--textarea { width:80%; height:5em }
.form__field--wide { width: 80% }
.form__field--small { width: 10% }
.form__submit {
display:block;
width:180px;
height:50px;
/*background-color:rgba(110, 255, 110, 0.8);*/
border-radius:0;
border: none;
background: #499bea; /* Old browsers */
background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%);
font-size:18px;
font-weight:300;
}
.form__submit:hover {
background: #2a659e;
background: -moz-linear-gradient(top, #2a659e 0%, #207ce5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #2a659e 0%,#207ce5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #2a659e 0%,#207ce5 100%);
color:#fff;
cursor:pointer;
}
.footer { margin-bottom: 15px; }
.footer__contact { text-align:center; }
</style>
</head>
<body>
<div class="main">
<!-- <div id="main_header">
</div>
<div id="slideshow">
<img src="images/banners/summer.jpg" alt="Campfire" class="active" />
<img src="images/banners/fall.jpg" alt="Playing in the leaves" />
<img src="images/banners/winter.jpg" alt="Sledding" />
<img src="images/banners/spring.jpg" alt="Kites" />
</div>
-->
<div class="content">
<div class="header">
<div class="header__img"><img src="img/superSnailHeader.png" alt="Snail mail header"></div>
</div>
<div class="lesson">
<h1 class="lesson__title">Lesson 1: Creation</h1>
</div>
<form class="form" enctype="multipart/form-data" method="post" name="snailmail" onsubmit="return validateForm()" action="snailmail-handler.php">
<fieldset>
<input class="form__field--hidden" type="hidden" name="lesson" value="Lesson 1">
Your first and last name:
<input class="form__field form__field--normal" name="name">
<br />
<b>STOP!!!</b>
<br />
<p>Before you start: Ask yourself, <em>Have I prayed recently? Have I talked with God today?</em> Take a couple minutes to talk to God now.</p>
<hr>
<p>What are a couple cool things that <em>you</em> can think of that God has created?</p>
<textarea class="form__field form__field--textarea" name="a_what has God created?"></textarea>
<p>I was sitting on the fishing pier out at camp just looking at all of the creation around me...from the lake, to the flowers and the fish. It is just amazing. We learned at camp that God created everything. You can read all about it in Genesis 1! Today we are going to look at how Jesus, as He is God, was involved in creation! -Susan</p>
<hr />
<div class="reading"><p>Read Colossians 1:15-20.</p></div>
<p>Let’s go verse by verse and see what we learn! Write out what you learn from:</p>
<ul>
<li>Vs. 15: <input class="form__field form__field--wide" type="text" name="a_v15"></li>
<li>Vs. 16: <input class="form__field form__field--wide" type="text" name="a_v16"></li>
<li>Vs. 17: <input class="form__field form__field--wide" type="text" name="a_v17"></li>
<li>Vs. 18: <input class="form__field form__field--wide" type="text" name="a_v18"></li>
<li>Vs. 19: <input class="form__field form__field--wide" type="text" name="a_v19"></li>
<li>Vs. 20: <input class="form__field form__field--wide" type="text" name="a_v20"></li>
</ul>
<p>So, when I see <input class="form__field form__field--small" type="text" value="J" name="a_jesus"> I am also seeing <input class="form__field form__field--small" type="text" value="G" name="a_God">. <input class="form__field form__field--small" type="text" value="J" name="a_jesus2"> created all things and all things were created for <input class="form__field form__field--small" type="text" value="J" name="a_jesus2" />. Jesus existed <input class="form__field form__field--small" value="b" name="a_before"/> creation began. Jesus <input class="form__field form__field--small" type="text" value="h" name="a_holds" /> <input class="form__field form__field--small" type="text" value="e" name="a_everything" /> together. All of us can be brought <input class="form__field form__field--small" type="text" value="b" name="a_back"/ > to God because of Jesus’ death on the cross.</p>
<h2>Fall MiniCamp: Nov 3-5th (Deadline for lessons 1-5 Oct 30)</h2>
<input class="form__submit form__submit--active" type="submit" value="Submit snail mail">
</fieldset>
</form>
<div class="footer">
<div class="footer__contact">
<p><a href="http://raybird.org" target="blank_" >Ray Bird Ministries</a> | 25765 Edison Rd, South Bend, Indiana, 46628 | (574) 232-8523</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function validateName() {
var name = document.forms["snailmail"]["name"].value
var names = name.split(' ')
if (names.length < 0) return 'You must enter your name.'
if (names.filter(function(n) { return n.length !== 0}).length < 2) return 'You must enter your full name'
return null
}
function validateAnswers() {
var answers = document.forms["snailmail"]
for (var i = 0; i < answers.length; i++) {
if (answers[i].name.startsWith('a_') && answers[i].value.length === 0 && answers[i].name !== 'a_Picture')
return "You must complete all questions."
}
}
function validateForm() {
var validators = [ validateName, validateAnswers ]
var errors = validators.map(function (v) { return v()})
errors = errors.filter(function (e) { return e })
if (errors.length > 0) {
alert('You must fix the following problems:\n' + errors.join('\n'))
return false
}
// alert('Alas, the form handler has not been implemented, so you may not submit')
// return false;
return true
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment