diff --git a/css/main.css b/css/main.css
index 89c90ce..fb2e63a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -74,6 +74,45 @@ nav a:hover {
 	display: flex;
 }
 
+.banner {
+	display: flex;
+	background-color: var(--banner-bg);
+	margin: 0 auto;
+	justify-content: center;
+	padding: 2rem 0;
+	width: 60%;
+	min-width: 400px;
+}
+
+.banner form {
+	width: 100%;
+}
+
+.banner form > div {
+	padding: 1rem;
+}
+
+.banner form input {
+	border-bottom: 0.25rem solid black;
+	width: 60%;
+	min-width: 250px;
+}
+
+.banner input {
+	border: none;
+	font-size: 32px;
+}
+
+.banner button {
+	border: none;
+	background-color: var(--button-bg);
+	color: var(--button-text);
+	font-size: 36px;
+	cursor: pointer;
+	width: auto;
+	padding: 1rem 3rem;
+}
+
 .main-banner-buttons a {
 	display: inline-block;
 	margin: 0 auto;
@@ -85,7 +124,7 @@ nav a:hover {
 	font-size: 30px;
 }
 
-.main-banner-buttons a:hover {
+.main-banner-buttons a:hover, .banner button:hover {
 	background-color: var(--button-hover);
 	color: var(--button-text-hover);
 }
@@ -167,4 +206,19 @@ nav a:hover {
 
 #joinus {
 	background-image: url(../assets/bote.jpg);
+	flex-direction: column;
+	text-align: center;
+}
+
+#joinus .container {
+	display: block;
+}
+
+#joinus h1 {
+	background-color: var(--button-bg);
+	color: var(--button-text);
+	font-size: 56px;
+	padding: 0 2rem;
+	margin: 0 auto 2rem auto;
+	max-width: 200px;
 }
diff --git a/index.html b/index.html
index 1945c7c..c59bad9 100644
--- a/index.html
+++ b/index.html
@@ -43,6 +43,27 @@
 			</div>
 		</div>
 		<div id="joinus" class="fullpage">
+			<div class="container">
+				<div class="header">
+					<h1>Join</h1>
+				</div>
+				<div class="banner">
+					<form action="/subscribe.php" method="POST">
+						<div>
+							<input type="text" name="full_name" placeholder="Full Name">
+						</div>
+						<div>
+							<input type="email" name="email" placeholder="Email">
+						</div>
+						<div>
+							<input type="phone" name="phone" placeholder="Phone Number">
+						</div>
+						<div>
+							<button type="submit">Stay Notified!</button>
+						</div>
+					</form>
+				</div>
+			</div>
 		</div>
 		<div id="donate" class="fullpage">
 		</div>
diff --git a/mail.php b/mail.php
new file mode 100644
index 0000000..9cebddb
--- /dev/null
+++ b/mail.php
@@ -0,0 +1,46 @@
+<?php
+
+$token = $_POST['token'];
+$message = $_POST['message'];
+
+if ($token !== '1445') {
+    die("Error: invalid token.");
+}
+
+if (!$message) {
+    die("Error: invalid message (or lack thereof)");
+}
+
+$conn = mysql_connect(":/tmp/mysql.sock", "root", "");
+if (!$conn) {
+    die("MySQL connection error: " . mysql_error());
+}
+mysql_select_db("mileslinden", $conn);
+
+$result = mysql_query("SELECT * FROM subscribers");
+$to_emails = array();
+
+while ($row = mysql_fetch_assoc($result)) {
+    $to_emails[] = $row["email"];
+}
+
+$to = implode(", ", $to_emails);
+$headers = array(
+    'From: no-reply@mileslinden.com',
+    'Reply-To: no-reply@mileslinden.com',
+    'X-Mailer: PHP/' . phpversion()
+);
+if (!mail($to, "MILES LINDEN CAMPAIGN ALERT", $message, implode("\r\n", $headers))) {
+    die("Error: failed to send email message.");
+}
+?>
+<!DOCTYPE HTML>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Miles Linden for San Jose City Council</title>
+    </head>
+    <body>
+        <h1>Great success!</h1>
+    </body>
+</html>
diff --git a/subscribe.php b/subscribe.php
new file mode 100644
index 0000000..61cfaf2
--- /dev/null
+++ b/subscribe.php
@@ -0,0 +1,57 @@
+<?php
+
+$email = $_POST['email'];
+$fname = $_POST['full_name'];
+$phone = $_POST['phone'];
+$gender = $_POST['gender'];
+
+$pattern = '/^(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){255,})(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){65,}@)(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22))(?:\\.(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-+[a-z0-9]+)*\\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-+[a-z0-9]+)*)|(?:\\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\\]))$/iD';
+
+//eliminate every char except 0-9
+$phone_num = preg_replace("/[^0-9]/", '', $phone);
+
+//eliminate leading 1 if its there
+if (strlen($phone_num) == 11)
+	$phone_num = preg_replace("/^1/", '', $phone_num);
+
+if (!$email || preg_match($pattern, $email) !== 1 || !$fname || strlen($phone_num) != 10) {
+    die("Error: An email address, first name, and last name are required.");
+}
+if ($gender && $gender !== 'm' && $gender !== 'f') {
+    die("Error: An invalid gender was given.");
+}
+
+$conn = mysql_connect(":/tmp/mysql.sock", "root", "");
+if (!$conn) {
+    die("MySQL connection error: " . mysql_error());
+}
+mysql_select_db("mileslinden", $conn);
+
+$query = sprintf(
+    "INSERT INTO subscribers (`email`, `full_name`, `phone`, `gender`, `join_date`) ".
+    "VALUES ('%s', '%s', '%s', '%s', '%s')",
+    mysql_real_escape_string($email),
+    mysql_real_escape_string($fname),
+    mysql_real_escape_string($phone),
+    mysql_real_escape_string($gender),
+    date("Y-m-d H:i:s")
+);
+$res = mysql_query($query);
+
+if (!$res) {
+    die("MySQL query error: " . mysql_error());
+}
+
+mysql_close($conn);
+
+?>
+<!DOCTYPE HTML>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Miles Linden for San Jose City Council</title>
+    </head>
+    <body>
+        <h1>You have subscribed successfully!</h1>
+    </body>
+</html>
