HTML CSS Contact Form

How to create a simple responsive contact form using HTML and CSS with a gradient background.

Final output:

Step-by-step guide for HTML CSS Contact Form:

1. Create a new section with the class name contact-form. This will be the outer container for our contact form. Add your form title and subtitle.

<section class="contact-form">
    <h2>Get In Touch With Us</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</section>

Let’s add some styles to it. Set a max-width for the form wrapper and align it to the center. Add some padding and border-radius. Set a font and for the background color, use a linear-gradient.

.contact-form {
  text-align: center;
  max-width: 350px;
  margin-inline: auto;
  padding: 2.5rem 2rem;
  border-radius: 0.8rem;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(45deg, #f7efe5, #ffc7c7);
}

.contact-form h2 {
  font-size: 1.8rem;
  color: #524a4e;
  margin: 0;
}

.contact-form p {
  margin-top: 0.5rem;
}

Output:

2. Now, add the form below the subtitle. Add an appropriate label along with the input field for the username.

<form>
    <label for="name">Name:</label>
    <input type="text" name="name">
</form>

.contact-form form {
  text-align: left;
  padding-top: 0.5rem;
}

.contact-form label {
  color: #524a4e;
}

Output:

3. Add more form fields and their respective labels too.

<form>
    <label for="name">Name:</label>
    <input type="text" name="name">
    <label for="email">Email:</label>
    <input type="email" name="email">
    <label for="phone">Phone:</label>
    <input type="number" name="phone">
    <label for="message">Message:</label>
    <textarea name="message" rows="5"></textarea>
</form>

Change the height for input fields. Add more styles to inputs and textarea.

.contact-form input {
  height: 2.5rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: none;
  box-shadow: none;
  border-radius: 0.3rem;
  margin: 0.3rem 0 1rem 0;
  background-color: #f6f6f6;
}

Output:

4. Lastly, add a submit button before closing the form tag.

<form>
    ...
    <input type="submit" value="Send Message">
</form>

Style the submit button. To avoid the height being applied on the submit input, use the CSS :not() pseudo-class.

.contact-form input[type="submit"] {
  background-color: #524a4e;
  color: #ffffff;
  font-size: 1.1rem;
  padding: 0.8rem;
  margin-bottom: 0;
}
.contact-form input:not([type="submit"]) {
  height: 2.5rem;
}

Output:

Final Output Code for Responsive HTML CSS Contact Form:

HTML

<section class="contact-form">
    <h2>Get In Touch With Us</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    <form>
        <label for="name">Name:</label>
        <input type="text" name="name">
        <label for="email">Email:</label>
        <input type="email" name="email">
        <label for="phone">Phone:</label>
        <input type="number" name="phone">
        <label for="message">Message:</label>
        <textarea name="message" rows="5"></textarea>
        <input type="submit" value="Send Message">
    </form>
</section>

CSS

.contact-form {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  padding: 2.5rem 2rem;
  max-width: 350px;
  border-radius: 0.8rem;
  margin-inline: auto;
  background: linear-gradient(45deg, #f7efe5, #ffc7c7);
  -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.contact-form h2 {
  font-size: 1.8rem;
  color: #524a4e;
  margin: 0;
}

.contact-form p {
  margin-top: 0.5rem;
}

.contact-form form {
  text-align: left;
  padding-top: 0.5rem;
}

.contact-form label {
  color: #524a4e;
}

.contact-form input:not([type="submit"]) {
  height: 2.5rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0.3rem;
  margin: 0.3rem 0 1rem 0;
  background-color: #f6f6f6;
}

.contact-form input[type="submit"] {
  background-color: #524a4e;
  color: #ffffff;
  font-size: 1.1rem;
  padding: 0.8rem;
  margin-bottom: 0;
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.