ijams-midterm/contact.html at master · martinatan/ijams-midterm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>

<html>
<head>
	<title> The Reader's Nook </title>

	<link rel="stylesheet" type="text/css" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Lustria|Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    	* {
    		box-sizing: border-box;
    	}

    	form label{
    		font-family: Lustria, Serif;
    		color: #3f0d12;
    		font-size: 18px;
    		font-weight: bold;
    	}

    	form input, textarea{
    		font-family: Raleway, Sans-Serif;
    		color: #3f0d12;
    		background-color: #f1f0cc;
    	}


    	input[type=text], select, textarea {
    	  font-family: Raleway, Sans-Serif;
    	  width: 100%;
    	  padding: 16px;
    	  font-size: 16px;
    	  border: 1px solid #ccc;
    	  border-radius: 4px;
    	  box-sizing: border-box;
    	  margin-top: 6px;
    	  margin-bottom: 16px;
    	  resize: vertical;
    	}

    	input[type=submit] {
    	  font-size: 18px;
    	  background-color: #A71D31;
    	  color: white;
    	  padding: 12px 20px;
    	  border: none;
    	  border-radius: 4px;
    	  cursor: pointer;
    	}

    	input[type=submit]:hover {
    	  background-color: #3f0d12;
    	}

    	.container {
    	  border-radius: 5px;
    	  background-color: #d5bf86;
    	  padding: 20px;
    	}
    </style>
    <script type="text/javascript">
    function verify() {
        event.preventDefault();
        if (document.getElementById("fname").value == "") {
            alert("Please enter a first name");
            return true;
        }

        if (document.getElementById("lname").value == "") {
            alert("Please enter a last name");
            return true;
        }

        if (document.getElementById("email").value == "") {
            alert("Please enter an email");
            return true;
        }

        emailTxt = document.getElementById("email").value

        if (!emailTxt.includes("@")) {
            alert("Please enter a valid email");
            return true;
        }

        if (!emailTxt.includes(".")) {
            alert("Please enter a valid email");
            return true;
        }

        alert("Thank you for reaching out to us! We will try our best to follow up with you within 3-5 business days.");
        document.getElementById("contactform").reset();
    }
    </script>
</head>


<body>
<div id="page-wrapper">
    <script type="text/javascript" src="includes/header.js"></script>

	<div class="main-container">
    	<h1 style="text-align:center;">Contact Us</h1>
    	<p>Fill out the form below to send us an email.</p>
		<div class="container">
		  <form id="contactform">
		    <label for="fname">First Name*</label>
		    <input type="text" id="fname" name="fname" placeholder="Enter your first name...">

		    <label for="lname">Last Name*</label>
		    <input type="text" id="lname" name="lname" placeholder="Enter your last name...">

		    <label for="email">Email*</label>
		    <input type="text" id="email" name="email" placeholder="Enter the email we can contact you at...">

   		    <label for="phone">Phone Number (optional)</label>
		    <input type="text" id="phone" name="phone" placeholder="Enter a phone number we can contact you at...">

   		    <label for="subject">Subject</label>
		    <input type="text" id="subject" name="subject" placeholder="Choose a subject line for your email">

		    <label for="message">Message</label>
		    <textarea id="message" name="message" placeholder="Write something..." style="height:150px"></textarea>

		    <input type="submit" value="Submit" onclick="return verify();"/>
		  </form>
		</div>
	</div>

     <script type="text/javascript" src="includes/footer.js"></script>
</div>

</body>

</html>