Create a simple Contact form in HTML and CSS

Please fill the contact form (sample). After you have filled all the textboxes, click the button to save the data. The data will be saved in a .txt file.

Your Name

Your Age

Country

Message

👉 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:700;}
    
    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