Let’s start by creating the form. We use Express to simplify managing the Web Server.
Go to Glitch and create a new Express project: Glitch :･ﾟ✧
The sample project is a working simple application, we’ll tweak that to provide our own functionality.
Open the views/index.html file.
Remove all the existing content of the main tag:
We are going to provide our own HTML:
<main>
<h1>Join my list</h1>
<form>
<input name="name" placeholder="Name" />
<input name="email" placeholder="Email" type="email" />
<input type="submit">
</form>
<p>I'll send you an email every week. No spam ever!</p>
</main>
Simple enough, right?
In the head tag of the document we can see it includes a CSS file, and a JavaScript file. We’ll need both, so we can leave them there, but we change the title tag and the meta description to “Join my list”.
Here’s the full HTML code at the moment:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Join my list</title>
<meta name="description" content="Join my list">
<link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's client-side javascript file -->
<script src="/client.js" defer></script>
</head>
<body>
<main>
<h1>Join my list</h1>
<form>
<input name="name" placeholder="Name" />
<input name="email" placeholder="Email" type="email" />
<input type="submit" value="Join" >
</form>
<p>I'll send you an email every week. No spam ever!</p>
</main>
</body>
</html>
Next, let’s wipe the contents of the public/client.js and public/style.css files.
Let’s start with the CSS. The form now is really poorly looking:
We’ll center the text, change the font and style the form input elements better. After all, it must be an attractive form otherwise people will think we’re not serious enough.
I certainly would not type my data in there, would you?
Add this CSS:
body {
text-align: center;
font-family: system-ui;
background-color: #ffe4e1;
}
main {
background-color: white;
padding-top: 50px;
padding-bottom: 80px;
max-width: 500px;
margin: 0 auto;
margin-top: 100px;
}
input {
padding: 10px;
}
input[type=submit] {
padding: 10px 20px;
background: white;
border: 1px solid lightgray;
cursor: pointer;
}
input[type=submit]:hover {
background: gray;
color: white;
}
This is the result:
Much better looking, right? I’m no designer! But if you are, feel free to style this form as you like.
If you click the Submit button now, the page simply reloads because the browser by default sends the data in the form to the same URL using the GET HTTP method, and our server will simply serve again the page.
In the next lesson we’ll make this form do something useful, with the help of a little bit of JavaScript.
Project link: https://glitch.com/edit/#!/node-course-project-newsletter-a