diff --git a/css/forms.css b/css/forms.css new file mode 100644 index 0000000..42b085f --- /dev/null +++ b/css/forms.css @@ -0,0 +1,86 @@ +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} +body { + background-image: url(../img/galaxy.jpg); + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; +} +.wrapper { + width: 80%; + margin: 0 auto; + padding: 1em; + display: flex; + flex-flow: row nowrap; + background-color:orange; +} +p, [for="abtype"], [for="select"] { + margin-bottom: 0.3rem; + margin-top: 2rem; +} +section { + flex-basis: 57%; + margin-right: 10%; +} +aside { + flex-basis: 33%; +} +fieldset { + border: 1px solid black; + border-radius: 10px; + margin-bottom: 2rem; +} +legend { + font-weight: bold; + font-size: 1.3rem; + margin-top: 1.5rem; + margin-bottom: 1rem; +} +label { + display:block; + padding-bottom: 0.3rem; +} +textarea { + height: 10rem; + padding: 1rem; +} +select { + font-size: 1rem; +} +button { + font-size:1rem; + margin:2rem 0; + background-color:blue; + color:white; + border-radius: 10px; + border:none; + padding:0.5rem 1rem; +} +button:hover { + background-color: white; + color:red; +} +input:not([type="radio"]):not([type="checkbox"]), textarea,select { + display:block; + margin-bottom: 2rem; + width:20rem; + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + padding: 0 1rem; + border: none; + border-radius: 10px; +} + + + + + + + + + + diff --git a/forms.html b/forms.html new file mode 100644 index 0000000..f2a465c --- /dev/null +++ b/forms.html @@ -0,0 +1,87 @@ + + + + + Alien Abduction Order Form + + + +
+
+

Alien Abduction Order Form

+

Fill out the form below to place an order for an alien abduction by one of our fine UFOs.

+
+ +
+ Your contact information + + + + + + + + +
+ +
+ + About your abduction + + + + + +

What type of UFO do you prefer?

+ + + + + + + + + + + + +
+ +
+
+ +
+ + + + + + + + diff --git a/img/galaxy.jpg b/img/galaxy.jpg new file mode 100644 index 0000000..3c9a7b2 Binary files /dev/null and b/img/galaxy.jpg differ diff --git a/img/image credit.rtf b/img/image credit.rtf new file mode 100644 index 0000000..31f620c --- /dev/null +++ b/img/image credit.rtf @@ -0,0 +1,10 @@ +{\rtf1\ansi\ansicpg1252\cocoartf1561\cocoasubrtf600 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +{\*\expandedcolortbl;;} +\margl1440\margr1440\vieww10800\viewh8400\viewkind0 +\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0 + +\f0\fs24 \cf0 https://images.nasa.gov/details-GSFC_20171208_Archive_e000056.html\ +\ +Photo caption: Galaxy cluster Abell 370 contains several hundred galaxies tied together by the mutual pull of gravity. Photographed in a combination of visible and near-infrared light, the brightest and largest galaxies are the yellow-white, massive, elliptical galaxies containing many hundreds of billions of stars each. Spiral galaxies have younger populations of stars and are bluish. Mysterious-looking arcs of blue light are distorted images of remote galaxies behind the cluster. The cluster acts as a huge lens in space that magnifies and stretches images of background galaxies like a funhouse mirror. Photo Credit: NASA, ESA, and J. Lotz and the HFF Team (STScI).} \ No newline at end of file diff --git a/js/forms.js b/js/forms.js new file mode 100644 index 0000000..bd5e5ee --- /dev/null +++ b/js/forms.js @@ -0,0 +1,101 @@ +var form = document.getElementsByTagName("form")[0]; +form.addEventListener("submit", function(e) { + e.preventDefault(); + sendData(); +}); + +// https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript +function sendData() { + var XHR = new XMLHttpRequest(); + var urlEncodedData = ""; + var urlEncodedDataPairs = []; + + urlEncodedDataPairs.push( + encodeURIComponent("name") + + "=" + + encodeURIComponent(form.querySelector("[name='name']").value) + ); + urlEncodedDataPairs.push( + encodeURIComponent("send_to") + + "=" + + encodeURIComponent(form.querySelector("[name='send_to']").value) + ); + urlEncodedDataPairs.push( + encodeURIComponent("email") + + "=" + + encodeURIComponent(form.querySelector("[name='email']").value) + ); + urlEncodedDataPairs.push( + encodeURIComponent("phone") + + "=" + + encodeURIComponent(form.querySelector("[name='phone']").value) + ); + urlEncodedDataPairs.push( + encodeURIComponent("date") + + "=" + + encodeURIComponent(form.querySelector("[name='date']").value) + ); + urlEncodedDataPairs.push( + encodeURIComponent("qty") + + "=" + + encodeURIComponent(form.querySelector("[name='qty']").value) + ); + + // radio buttons + let radio = document.getElementsByName("ufotype"); + for (var i = 0, length = radio.length; i < length; i++) { + if (radio[i].checked) { + urlEncodedDataPairs.push( + encodeURIComponent("ufotype") + "=" + encodeURIComponent(radio[i].value) + ); + } + } + + // dropdown menu + var dropdown = form.querySelector("[name='abtype']"); + urlEncodedDataPairs.push( + encodeURIComponent("abtype") + + "=" + + encodeURIComponent(dropdown.options[dropdown.selectedIndex].text) + ); + urlEncodedDataPairs.push( + encodeURIComponent("comments") + + "=" + + encodeURIComponent(form.querySelector("[name='comments']").value) + ); + urlEncodedDataPairs.push( + encodeURIComponent("subscribe") + + "=" + + encodeURIComponent(form.querySelector("[name='subscribe']").checked) + ); + + // Combine the pairs into a single string and replace all %-encoded spaces to + // the '+' character; matches the behaviour of browser form submissions. + urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+"); + + // Define what happens on successful data submission + XHR.addEventListener("load", function(event) { + if (XHR.readyState === XHR.DONE) { + if (XHR.status === 200) { + alert("Your order has been received! Check your email."); + } else { + alert("Oh oh! We have a problem! " + XHR.responseText + "."); + } + } + }); + + // Define what happens in case of error + XHR.addEventListener("error", function(event) { + // This is normally a timeout or connection error. + alert("Oops! Something went wrong."); + }); + + // Set up our request + XHR.open(form.getAttribute("method"), form.getAttribute("action")); + + // Add the required HTTP header for form data POST requests + XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + + // Finally, send our data. + XHR.send(urlEncodedData); +}