form

met18001 · Mar 14, 2020 · 8218248 · 8218248
1 parent ef4cef9
commit 8218248
Show file tree

Hide file tree

Showing 9 changed files with 357 additions and 0 deletions.
diff --git a/week-8/NiceSimpleContactForm/contactengine.php b/week-8/NiceSimpleContactForm/contactengine.php
@@ -0,0 +1,43 @@
+<?php
+
+$EmailFrom = "chriscoyier@gmail.com";
+$EmailTo = "CHANGE-THIS@YOUR-DOMAIN.com";
+$Subject = "Nice & Simple Contact Form by CSS-Tricks";
+$Name = Trim(stripslashes($_POST['Name'])); 
+$Tel = Trim(stripslashes($_POST['Tel'])); 
+$Email = Trim(stripslashes($_POST['Email'])); 
+$Message = Trim(stripslashes($_POST['Message'])); 
+
+// validation
+$validationOK=true;
+if (!$validationOK) {
+  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
+  exit;
+}
+
+// prepare email body text
+$Body = "";
+$Body .= "Name: ";
+$Body .= $Name;
+$Body .= "\n";
+$Body .= "Tel: ";
+$Body .= $Tel;
+$Body .= "\n";
+$Body .= "Email: ";
+$Body .= $Email;
+$Body .= "\n";
+$Body .= "Message: ";
+$Body .= $Message;
+$Body .= "\n";
+
+// send email 
+$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");
+
+// redirect to success page 
+if ($success){
+  print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
+}
+else{
+  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
+}
+?>
diff --git a/week-8/NiceSimpleContactForm/contactthanks.php b/week-8/NiceSimpleContactForm/contactthanks.php
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
+
+<head>
+	<title>A Nice & Simple Contact Form</title>
+	
+	<link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+<body>
+
+	<div id="page-wrap">
+
+		<img src="images/title.gif" alt="A Nice & Simple Contact Form" />
+		<p>By <a href="http://css-tricks.com">CSS-Tricks</a></p>
+			
+			
+		<br /><br />
+		
+			
+		<h1>Your message has been sent!</h1><br />
+		
+		<p><a href="index.html">Back to Contact Form</a></p>
+	
+	</div>
+	
+	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
+	</script>
+	<script type="text/javascript">
+	_uacct = "UA-68528-29";
+	urchinTracker();
+	</script>
+
+</body>
+
+</html>
diff --git a/week-8/NiceSimpleContactForm/images/stripe.png b/week-8/NiceSimpleContactForm/images/stripe.png
diff --git a/week-8/NiceSimpleContactForm/images/title.gif b/week-8/NiceSimpleContactForm/images/title.gif
diff --git a/week-8/NiceSimpleContactForm/index.html b/week-8/NiceSimpleContactForm/index.html
@@ -0,0 +1,53 @@
+<!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>
+	<title>A Nice &amp; Simple Contact Form</title>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+	<link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+<body>
+
+	<div id="page-wrap">
+
+		<img src="images/title.gif" alt="A Nice &amp; Simple Contact Form" /><br /><br />
+		<p>By <a href="http://css-tricks.com">CSS-Tricks</a></p>
+
+		<p>There are a million contact form examples on the web, why this one? Because it's SIMPLE, it's FREE, it WORKS, it's VALID, and it's primarily styled with CSS.</p>
+
+		<p>If you are trying to contact CSS-Tricks, DO NOT USE THIS FORM. This is just an example, my real <a href="http://css-tricks.com/contact/">contact form is here</a>.</p>
+
+		<p><a href="http://css-tricks.com/examples/NiceSimpleContactForm.zip">[DOWNLOAD THIS EXAMPLE]</a></p>
+
+		<div id="contact-area">
+
+			<form method="post" action="contactengine.php">
+				<label for="Name">Name:</label>
+				<input type="text" name="Name" id="Name" />
+
+				<label for="City">City:</label>
+				<input type="text" name="City" id="City" />
+
+				<label for="Email">Email:</label>
+				<input type="text" name="Email" id="Email" />
+
+				<label for="Message">Message:</label><br />
+				<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
+
+				<input type="submit" name="submit" value="Submit" class="submit-button" />
+			</form>
+
+			<div style="clear: both;"></div>
+
+			<p>Check out a <a href="http://css-tricks.com/examples/NiceSimpleContactForm2">version of this</a> with SPAM protection.</p>
+
+		</div>
+
+	</div>
+
+</body>
+
+</html>
diff --git a/week-8/NiceSimpleContactForm/style.css b/week-8/NiceSimpleContactForm/style.css
@@ -0,0 +1,61 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-size: 62.5%;
+	font-family: Helvetica, sans-serif;
+	background: url(images/stripe.png) repeat;
+}
+
+p {
+	font-size: 1.3em;
+	margin-bottom: 15px;
+}
+
+#page-wrap {
+	width: 660px;
+	background: white;
+	padding: 20px 50px 20px 50px;
+	margin: 20px auto;
+	min-height: 500px;
+	height: auto !important;
+	height: 500px;
+}
+
+#contact-area {
+	width: 600px;
+	margin-top: 25px;
+}
+
+#contact-area input, #contact-area textarea {
+	padding: 5px;
+	width: 471px;
+	font-family: Helvetica, sans-serif;
+	font-size: 1.4em;
+	margin: 0px 0px 10px 0px;
+	border: 2px solid #ccc;
+}
+
+#contact-area textarea {
+	height: 90px;
+}
+
+#contact-area textarea:focus, #contact-area input:focus {
+	border: 2px solid #900;
+}
+
+#contact-area input.submit-button {
+	width: 100px;
+	float: right;
+}
+
+label {
+	float: left;
+	text-align: right;
+	margin-right: 15px;
+	width: 100px;
+	padding-top: 5px;
+	font-size: 1.4em;
+}
diff --git a/week-8/__MACOSX/NiceSimpleContactForm/._index.html b/week-8/__MACOSX/NiceSimpleContactForm/._index.html
diff --git a/week-8/form.html b/week-8/form.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Website Contact Form</title>
+
+</head>
+
+<body>
+    <form method="post" id="myForm" name="myForm">
+        <h1>Website Contact Form</h1>
+        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+        <section>
+            <h2>Contact information</h2>
+
+            <p>
+              <label for="name">
+                <span>Name: </span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="text" id="name" name="user">
+            </p>
+            <p>
+              <label for="mail">
+                <span>E-mail: </span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="email" id="mail" name="usermail">
+            </p>
+            <p>
+            <label for="sbj">
+                <span>Subject:</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="subject" id="msg" name="subject">
+            </p>
+            <label for="msg">
+                <span>Message: </span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="message" id="msg" name="message">
+            </p>
+        </section>
+
+        <section>
+            <button><a href="#" id="Submit" onclick="myfunction"()>Submit</a></button>
+        </section>
+    </form>
+    <script>
+
+
+
+//btnSubmit.addEventListener('click', () => {
+
+    function myfunction(){
+
+    if (document.myform.user.value== ""){
+        alert("Please fill out your name");
+        document.myForm.user.focus();
+          return false;
+    }
+    if(document.myform.usermail.value=="")	{
+				alert("enter email");
+				document.myForm.usermail.focus();
+          return false;
+                }
+    if(document.myform.subject.value=="")	{
+				alert("enter subject");
+				document.myForm.subject.focus();
+          return false;
+    }
+    if(document.myform.message.value=="")	{
+				alert("enter message");
+				document.myForm.message.focus();
+          return false;
+    }
+        else{
+          alert("submit form");  return true;
+        }
+      }
+    //document.getElementById("myForm").submit();
+
+
+
+
+
+    </script>
+</body>
+
+</html>
diff --git a/week-8/form2.html b/week-8/form2.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Contact Form</title>
+
+</head>
+<body>
+    <form  onsubmit="return false"; action="https://www.google.com/" class="form" >
+
+        <input type="text"   onkeyup="formBlur(this)" id="username" placeholder="Name">
+        <p id="p-user"></p>
+
+        <input type="subject" onkeyup="formBlur(this)" id="subject" placeholder="Subject">
+        <p id="p-subject" ></p>
+
+
+        <input type="email"     onkeyup="formBlur(this)"   id="email"    placeholder="Email">
+         <p id="p-email" ></p>
+
+
+        <textarea id="textarea" onkeyup="formBlur(this)" rows="4" cols="40" placeholder="message" ></textarea>
+        <p  id="p-textarea" ></p>
+
+        <button   onclick="actionForm()"  >Submit</button>
+        </form>
+        <script>
+
+function actionForm()
+    {
+    var username  =    document.getElementById('username'),
+        subject  =    document.getElementById('subject'),
+        email     =    document.getElementById('email'),
+        textarea  =    document.getElementById('textarea');
+        if(username.value == "")
+        {
+         document.getElementById('p-user').textContent    = "* Please input your name";  
+         document.getElementById('username').style.border = "1px solid red";
+        }
+        if(subject.value == "")
+        {
+         document.getElementById('p-subject').textContent = "* Please input your subject";
+         document.getElementById('subject').style.border = "1px solid red";
+        }
+
+        if(email.value == "")
+        {
+         document.getElementById('p-email').textContent = "* Please input your email"; 
+         document.getElementById('email').style.border = "1px solid red";
+        }
+
+        if(textarea.value == "")
+        {
+         document.getElementById('p-textarea').textContent = "* Please input your message "; 
+          document.getElementById('textarea').style.border = "1px solid red";
+        }
+
+    }    
+
+
+    function formBlur(input)
+    {
+        if(input.value != '')
+        {
+          input.nextElementSibling.textContent  = "";
+          input.style.border = '2px  solid green';
+        }  
+    }
+
+
+        </script>
+        </body>
+
+</html>