Skip to content

Instantly share code, notes, and snippets.

@cassidoo
Created December 3, 2021 18:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cassidoo/b4a5d916dc1ddf9e5b3057dfe26a605e to your computer and use it in GitHub Desktop.
Save cassidoo/b4a5d916dc1ddf9e5b3057dfe26a605e to your computer and use it in GitHub Desktop.
Netlify Form Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ha ha, Business!</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<h1>I am an incredibly fancy business woman</h1>
<section>
<p>I totally know about business, and you should compliment me:</p>
<form name="contact" method="POST" netlify>
<p>
<label>Your Name: <br /><input type="text" name="name" /></label>
</p>
<p>
<label>Message: <br /><textarea name="message"></textarea></label>
</p>
<p>
<button type="submit">Send compliment</button>
</p>
</form>
</section>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;800&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
section {
max-width: 800px;
}
label {
font-size: 0.8rem;
}
input,
textarea {
width: 100%;
height: 40px;
border: none;
border-bottom: 1px solid #d6d6d6;
font-size: 1.3rem;
}
input:focus,
textarea:focus {
outline: 1px dotted #d6d6d6;
}
button {
padding: 20px;
background: black;
color: white;
border-radius: 10px;
font-size: 1.3rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment