How to Create a Form With Icons

Creating a form with icons is a great way to make it visually appealing and user-friendly.

In this tutorial, we will go through the steps to create a form with icons using HTML and CSS.

What are Forms

Forms are an essential part of any website, they are used to gather information from users and can range from simple contact forms to complex sign-up forms.

By adding icons to the form, you can make it more visually appealing and easy to use for the users.

HTML Structure for the Form

The HTML structure for a form typically includes a form element with a set of inputs, labels, and buttons. In this example, we will be using a simple contact form with name, email, and message fields.

<form>
  <label for="name">
    <i class="fa fa-user"></i>
    <input type="text" id="name" placeholder="Name">
  </label>
  <label for="email">
    <i class="fa fa-envelope"></i>
    <input type="email" id="email" placeholder="Email">
  </label>
  <label for="message">
    <i class="fa fa-pencil"></i>
    <textarea id="message" placeholder="Message"></textarea>
  </label>
  <button type="submit">Submit</button>
</form>

In this example, we have used Font Awesome icons for the user, email, and pencil icons.

You can add any other icons of your choice by including the CSS for the icon library.

CSS Styling for the Form

To style the form, we will add some CSS to the HTML structure. This includes adding padding, margins, and styles to the inputs, labels, and buttons.

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label i {
  margin-right: 10px;
  color: #999;
}

input,
textarea {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
}

button[type="submit"] {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #3e8e41;
}