Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

i tried but can’t get solution

“Your input elements should have a width, padding, and a margin on the bottom.”
input[type=“text”],
input[type=“email”]{
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Contact Form</title>
</head>
<body>

  <div class="form-container">
    <form>
      <h2>Contact Us</h2>

      <label for="name">Name</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>

      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit">Submit</button>
    </form>
  </div>

</body>
</html>


/* file: styles.css */
.form-container {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 20px;
  width: 400px;
  margin: 50px auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

label {
  display: block;
  margin: 5px 0;
  color: #333;
}

input[type="text"],
input[type="email"]{
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

textarea {
  resize: vertical;
  width: 100%;
  padding: 10px 20px;
  margin-bottom: 10px;
  min-height: 100px;
}

button {
  background-color: #007bff;
  color: #fff;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Design a Contact Form - Design a Contact Form

https://www.freecodecamp.org/learn/full-stack-developer/lab-contact-form/design-a-contact-form

2

If you want to style all input elements, there’s a much simpler css selector for that.

1 Like