Today we are going to see how to create simple email form using html and css. This concept very useful to beginner of email form creation. This form easy to create using html and css code. Only this email form need user _First name and _Last name, _Phone number and _Message.See the demo video create easy way.
Code:
Html:
<form method="post" action="submit.php">
<h2>Fill in the form below</h2>
<input id="first-name" type="text" required placeholder="First name" name="First-Name">
<input type="text" required placeholder="Last name" name="Last-Name">
<input id="eml" type="email" required placeholder="Email" name="Email">
<input id="tel" type="tel" placeholder="Phone Number" name="Phone-Number">
<textarea rows="6" required placeholder="Message" name="Message"></textarea>
<button type="reset">Reset</button>
<button type="send">Send</button>
</form>
Css:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html,body {
background:blue;
padding:0;
margin:0;
font-family:sans-serif;
color:#fff
}
form {
width:90%;
max-width:500px;
margin:15px auto;
}
input, textarea {
width:100%;
margin-bottom:10px;
border-radius:3px;
border:solid 1px #ccc;
padding:4px 7px;
}
#eml, #tel {
width:49%;
}
#tel {
float:right;
}
button {
width: 120px;
float:right;
margin-left:15px;
border-radius:3px;
border:solid 1px #ccc;
padding:4px 7px;
}
button:hover {
background-color:rgb(79, 186, 238);
}
0 Comments