HTML/CSS contact form: I have been trying to figure this out all day. I need to
ID: 3748229 • Letter: H
Question
HTML/CSS contact form: I have been trying to figure this out all day. I need to create a dummy "contact us form". I have the markup just need to style it so it looks similar to the picture provided.
Here is mine:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title></title>
</head>
<body>
<div class="container">
<h1>Say Hello!</h1>
<p id="greet">Please contact us regarding any request or problem</p>
<form class="contact">
<div>
<label for="name">Name:</label>
<input id="name" type="text" name="textfield">
</div>
<div>
<label for="email">E-Mail Address:</label>
<input id="email" type="text" name="textfield">
</div>
<div class="radio">
<input type="radio" name="supportchooser" id="needhelp">
<label for="needhelp" class="choose">I need help with a problem.</label>
</div>
<div class="radio">
<input type="radio" name="supportchooser" id="feedback">
<label for="feedback" class="choose">I have feedback about your website.</label>
</div>
<div>
<label for="address">Feedback:</label>
<textarea id="address" name="addresstext"></textarea>
</div>
<div>
<input id="mailist" type="checkbox" name="join" value="mailist">
<label for="mailist">Join our mailing list!</label><br>
</div>
<div id="button">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
CSS:
body{
background-color: #34495e;
padding: 10px;
}
h1{
text-align: center;
}
label{
display: inline-table;
width: 30%;
padding-bottom: 10px;
margin: 2px 0;
}
p{
text-align: center;
}
input{
display: inline-table;
width: 69%;
margin: 2px 0;
box-sizing: border-box;
vertical-align: top;
border: 1px solid #000;
}
#button{
width: 20%;
text-align: center;
}
.container{
background-color: #aacfd0;
margin: auto;
width: 600px;
border-radius: 25px;
padding-bottom: 20px;
}
.contact{
background-color: #aacfd0;
box-sizing: border-box;
border: 2px solid #fff;
width: 500px;
margin: auto;
}
Explanation / Answer
If you have any doutbs, please give me comment...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<title></title>
</head>
<body>
<div class="container">
<h1>Say Hello!</h1>
<p id="greet">Please contact us regarding any request or problem</p>
<form class="contact">
<div>
<label for="name">Name:</label>
<input id="name" type="text" name="textfield">
</div>
<div>
<label for="email">E-Mail Address:</label>
<input id="email" type="text" name="textfield">
</div>
<div class="radio">
<input type="radio" name="supportchooser" id="needhelp">
<label for="needhelp" class="choose">I need help with a problem.</label>
</div>
<div class="radio">
<input type="radio" name="supportchooser" id="feedback">
<label for="feedback" class="choose">I have feedback about your website.</label>
</div>
<div>
<label for="address">Feedback:</label>
<textarea id="address" name="addresstext"></textarea>
</div>
<div class="radio">
<input id="mailist" type="checkbox" name="join" value="mailist">
<label for="mailist">Join our mailing list!</label><br>
</div>
<div id="button" class="radio">
<input type="submit" name="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
styles.css
body {
background-color: #34495e;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
}
* {
box-sizing: border-box;
}
label {
display: inline-table;
width: 30%;
padding-bottom: 10px;
margin: 2px 0;
display: inline-table;
}
p {
text-align: center;
}
input[type="text"] {
display: inline-table;
width: 69%;
margin: 2px 0;
box-sizing: border-box;
vertical-align: top;
border: 1px solid #000;
}
.radio {
margin-left: 30%;
width: 100%;
}
.radio label {
width: 69%;
}
#button {
width: 20%;
text-align: center;
}
.container {
background-color: #aacfd0;
margin: 0px auto;
width: 600px;
border-radius: 25px;
padding-bottom: 20px;
}
.contact {
background-color: #aacfd0;
box-sizing: border-box;
border: 2px solid #fff;
width: 500px;
margin: auto;
padding: 10px;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.