Creating a responsive contact form with HTML, CSS, and JavaScript

Creating a responsive contact form with HTML, CSS, and JavaScript is a crucial task for any website owner or developer. A contact form is an essential element of a website that allows users to connect with the website owner or support team. In this blog, we will discuss how to create a responsive contact form using HTML, CSS, and JavaScript.

HTML Structure

The first step in creating a contact form is to create an HTML structure. Here is a basic HTML structure for a contact form:

<form class="contact-form">
  <h2>Contact Us</h2>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>
  </div>
  <button type="submit">Send</button>
</form>

The above code creates a basic structure for a contact form. It includes a title, three input fields for the user's name, email address, and message. Also, there's a submit button for users to submit their details.

CSS Styling

Now that we have created the HTML structure, it's time to style the form using CSS. Here's a basic CSS styling for the contact form:

.contact-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  background-color: #f2f2f2;
}

.contact-form h2 {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  resize: none;
}

button[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: none;
  background-color: #3498db;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

The above CSS code creates a basic styling for the contact form. It sets the width of the form to 100% and the maximum width to 600px. Also, it sets the margin and padding for the form, background color, and font styles for the form's title, input fields, and submit button.

JavaScript Validation

The final step in creating a responsive contact form is to validate user input using JavaScript. Here's a basic JavaScript code that validates the user's input:

const form = document.querySelector(".contact-form");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const messageInput = document.getElementById("message");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  if (nameInput.value === "" || emailInput.value === "" || messageInput.value === "") {
    alert("Please fill out all fields");
  } else {
    alert("Thank you for your message!");
    form.reset();
  }
});

The above JavaScript code creates variables for the form and each input field. It then adds an event listener to the form's submit button, preventing the default behavior of submitting the form to the server.

The event listener checks if the name, email, and message input fields are empty. If any of the fields are empty, an alert message is displayed, prompting the user to fill out all the fields. If all fields have valid data, an alert message is displayed, thanking the user for their message, and the form is reset.

Conclusion

Creating a responsive contact form is an essential part of any website. By following the steps outlined in this blog, you can create a fully responsive contact form using HTML, CSS, and JavaScript. Remember to style the form to match your website's design, and validate user input to ensure that you receive accurate and complete messages from your users.