Create a simple Contact form in HTML and CSS

css

Tools you can use

Please fill the contact form! (sample)

👉 Also .. Create beautiful Tables with HTML and CSS code at the click of a button.


How to create a Contact form using HTML and CSS

The form data will be saved in a text file (.txt file). Therefore, I have added a small piece of JS code at end.

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form using HTML and CSS</title>

  <!--Add style to the form-->
  <style>
    * { font-family: Calibri; font-size: 20px; background-color: #fff; }
    
    #formContainer {
      box-sizing: border-box;
      margin: 10px;
      padding: 10px 0;
    }
    #formContainer > div {
      padding: 10px 0;
      overflow: hidden;
      text-align:left;
      margin: 0 auto ;
      width: 80%;
    }
    
    #formContainer label {color: #7fd323; font-weight:bold;}
    
    input[type=text], textarea, select 
    {
      width: 100%;
      padding: 12px;
      margin: 5px 0 0 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      overflow: hidden;
      box-sizing: border-box;
    }
    
    ::-webkit-input-placeholder { color: #888; font-size: 18px;}
    :-ms-input-placeholder {color: #888; font-size: 18px;}
    ::placeholder {color: #888; font-size: 18px;}
    
    input[type=button]{ 
      width: auto;
      cursor: pointer;
      padding: 7px;
      background-color: #7fd323;
      color: #fff;
      border: 1px solid transparent;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <div id="formContainer">
    <div>
      <label for="txtName">Your Name</label>
      <input type="text" id="txtName" placeholder="Enter your name" />
    </div>
    <div>
      <label for="txtAge">Your Age</label>
      <input type="text" id="txtAge" placeholder="Enter your age" />
    </div>
    <div>
      <label for="txtEmail">Email</label>
      <input type="text" id="txtEmail" placeholder="Enter your email address" />
    </div>
    <div>
      <label for="selCountry">Country</label>
      <select id="selCountry">
        <option selected value="">-- Choose the country --</option>
        <option value="India">India</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
      </select>
    </div>
    <div>
      <label for="msg">Message</label>
      <textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
    </div>
    <div>
      <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
    </div>
  </div>
</body>
</html>

<script>
  // Script to save the form data in a text file.

  function saveFile() {
    var e = document.getElementById("txtName"),
        t = document.getElementById("txtAge"),
        n = document.getElementById("txtEmail"),
        a = document.getElementById("selCountry"),
        o = document.getElementById("msg"),
        l = "\r Name: " + e.value +
        " \r\n Age: " + t.value +
        " \r\n Email: " + n.value +
        " \r\n Country: " + a.value +
        " \r\n Message: " + o.value,
        d = new Blob([l], { type: "text/plain" }),
        m = document.createElement("a");

    m.download = "formData.txt",
    window.navigator && window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveBlob(d, "formData.txt") : (null != window.webkitURL ? m.href = window.webkitURL.createObjectURL(d) : (m.href = window.URL.createObjectURL(d),
    m.style.display = "none",
    document.body.appendChild(m)), 
    m.click())
}
</script>
Try it