HTML CSS Contact Form
index.html
1
<html>2
<head>3
<meta charset="UTF-8">4
<meta name="viewport" content="width=device-width, initial-scale=1.0">5
<title>Basic HTML CSS Contact Form</title>6
<link rel="stylesheet" href="/css/styles.css">7
</head>8
<body>9
<div class="form-container">10
<form class="form">11
<div class="form-group">12
<label for="email">Email</label>13
<input type="text" id="email" name="email" required="">14
</div>15
<div class="form-group">16
<label for="email">Subject</label>17
<input type="text" id="email" name="email" required="">18
</div>19
<div class="form-group">20
<label for="textarea">How Can We Help You?</label>21
<input name="textarea" id="textarea" rows="10" cols="50" required="" /> 22
</div>23
<div class="button">24
<button class="form-submit-btn" type="submit">Submit</button>25
</div>26
</form>27
</div>28
</body>29
</html>styles.css
1
* {2
box-sizing: border-box;3
}4
5
*:focus {6
outline: none;7
}8
body {9
display: flex;10
justify-content: center;11
align-items: center;12
height: 100vh;13
background: #000000; 14
font-family: 'Arial', sans-serif;15
overflow: hidden;16
}17
.button{18
display: flex;19
justify-content: center;20
align-items: center;21
}22
.form-container {23
width: 420px;24
border: 1px solid #414141;25
padding: 32px 24px;26
font-size: 14px;27
font-family: inherit;28
color: white;29
display: flex;30
flex-direction: column;31
gap: 20px;32
box-sizing: border-box;33
border-radius: 16px;34
}35
36
.form-container button:active {37
scale: 0.95;38
}39
40
.form-container .form {41
display: flex;42
flex-direction: column;43
gap: 20px;44
}45
46
.form-container .form-group {47
display: flex;48
flex-direction: column;49
gap: 2px;50
}51
52
.form-container .form-group label {53
display: block;54
margin-bottom: 5px;55
color: #717171;56
font-weight: 600;57
font-size: 12px;58
}59
60
.form-container .form-group input {61
width: 100%;62
padding: 12px 16px;63
border-radius: 8px;64
color: #fff;65
font-family: inherit;66
background-color: transparent;67
border: 1px solid #414141;68
}69
70
.form-container .form-group textarea {71
width: 100%;72
padding: 12px 16px;73
border-radius: 8px;74
resize: none;75
color: #fff;76
height: 96px;77
border: 1px solid #414141;78
background-color: transparent;79
font-family: inherit;80
}81
82
.form-container .form-group input::placeholder {83
opacity: 0.5;84
}85
86
.form-container .form-group input:focus {87
outline: none;88
border-color: #e81cff;89
}90
91
.form-container .form-group textarea:focus {92
outline: none;93
border-color: #e81cff;94
}95
96
.form-container .form-submit-btn {97
font-family: inherit;98
color: #717171;99
font-weight: 600;100
width: 40%;101
background: #313131;102
border: 1px solid #414141;103
padding: 12px 16px;104
cursor: pointer;105
border-radius: 6px;106
}107
108
.form-container .form-submit-btn:hover {109
background-color: #fff;110
border-color: #fff;111
}112
113
114
115
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
