html contact form template

1<div class="container">
2  <form action="action_page.php">
3
4    <label for="fname">First Name</label>
5    <input type="text" id="fname" name="firstname" placeholder="Your name..">
6
7    <label for="lname">Last Name</label>
8    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
9
10    <label for="country">Country</label>
11    <select id="country" name="country">
12      <option value="australia">Australia</option>
13      <option value="canada">Canada</option>
14      <option value="usa">USA</option>
15    </select>
16
17    <label for="subject">Subject</label>
18    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
19
20    <input type="submit" value="Submit">
21
22  </form>
23</div>
24
25<style>
26	/* Style inputs with type="text", select elements and textareas */
27input[type=text], select, textarea {
28  width: 100%; /* Full width */
29  padding: 12px; /* Some padding */ 
30  border: 1px solid #ccc; /* Gray border */
31  border-radius: 4px; /* Rounded borders */
32  box-sizing: border-box; /* Make sure that padding and width stays in place */
33  margin-top: 6px; /* Add a top margin */
34  margin-bottom: 16px; /* Bottom margin */
35  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
36}
37
38/* Style the submit button with a specific background color etc */
39input[type=submit] {
40  background-color: #04AA6D;
41  color: white;
42  padding: 12px 20px;
43  border: none;
44  border-radius: 4px;
45  cursor: pointer;
46}
47
48/* When moving the mouse over the submit button, add a darker green color */
49input[type=submit]:hover {
50  background-color: #45a049;
51}
52
53/* Add a background color and some padding around the form */
54.container {
55  border-radius: 5px;
56  background-color: #f2f2f2;
57  padding: 20px;
58}
59</style>
60