Coding Tutorial

Responsive Contact Form UI with Animation | Pure HTML & CSS Design

by Ahmed ismail
written by Ahmed ismail
Contact

Discover how to create a modern and professional contact page using HTML and CSS only. This complete tutorial includes full source code with responsive layout, clean UI design and smooth animations. You will discover how to build a fully functional contact section with a styled form, detailed contact information and integrated social media links all crafted to enhance your website’s appearance and improve user engagement

Table Of Contents
  1. Introduction
  2. Basic Requirements
  3. Development Tools
  4. Setup
  5. HTML Code
  6. CSS Code
  7. Output
  8. Conclusion

Introduction

Welcome to this tutorial building a modern and responsive contact page using HTML and CSS only. When you are designing a personal portfolio or a professional business site this project will guide you through building a clean and user friendly contact section that adds a smoothed touch to your website.

In this tutorial you will learn how to design attractive layout with smooth fade-in animations and integrated social media icons. We will also cover how to structure your layout using Flexbox to make it fully responsive across all screen sizes.

This project is ideal for developers of any skill level who want to create a stylish and functional contact page that enhance both usability and design.

Basic Requirements

1: HTML
-Used to create the structure of the contact form and contact info sections.

2: CSS
– For styling layout, animations, responsive design and visual aesthetics like gradients, shadows and spacing.

Development Tools

Code Editor

Web Browser

  • Google Chrome
  • Firefox
  • Microsoft Edge and etc.

Setup

Create new folder by press Ctrl+Shift+N or press right click into screen then click “New” and choose Folder.
rename with name (Contact_Page).
Open with Visual Studio or code editors like Sublime and create inside the folder two files:
1. Index.html.
2. style.css.

HTML Code

Open the Index.html file and paste the code shown below.

<!DOCTYPE html>
<html lang="en">
  <!--Created by Codeweave24-->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact CodeWeave24</title>
    <!-- styling-->
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
  </head>
  <body>
    <div class="cw-container">
      <div class="cw-header">
        <div class="cw-logo">CodeWeave24</div>
        <p class="cw-tagline">
          Get in touch with our team. We would love to hear from you!
        </p>
      </div>

      <div class="cw-contact-container">
        <form class="cw-contact-form">
          <h2 class="cw-form-title">Send us a message</h2>

          <div class="cw-form-group">
            <label for="name" class="cw-form-label">Your Name</label>
            <input
              type="text"
              id="name"
              class="cw-form-input"
              placeholder="Ahmed Ismail"
            />
          </div>

          <div class="cw-form-group">
            <label for="email" class="cw-form-label">Email Address</label>
            <input
              type="email"
              id="email"
              class="cw-form-input"
              placeholder="Ahmed@example.com"
            />
          </div>

          <div class="cw-form-group">
            <label for="subject" class="cw-form-label">Subject</label>
            <input
              type="text"
              id="subject"
              class="cw-form-input"
              placeholder="How can we help?"
            />
          </div>

          <div class="cw-form-group">
            <label for="message" class="cw-form-label">Message</label>
            <textarea
              id="message"
              class="cw-form-input cw-form-textarea"
              placeholder="Your message here..."
            ></textarea>
          </div>

          <button type="submit" class="cw-submit-btn">Send Message</button>
        </form>

        <div class="cw-contact-info">
          <div class="cw-info-card">
            <h3 class="cw-info-title">Contact Information</h3>

            <div class="cw-info-item">
              <div class="cw-info-icon">
                <i class="fas fa-map-marker-alt"></i>
              </div>
              <div class="cw-info-text">
                <div class="cw-info-label">Our Office</div>
                <div class="cw-info-value">Fardaha Street, Borama, Awdal</div>
              </div>
            </div>

            <div class="cw-info-item">
              <div class="cw-info-icon">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="cw-info-text">
                <div class="cw-info-label">Email Us</div>
                <div class="cw-info-value">contact@codeweave24.com</div>
              </div>
            </div>

            <div class="cw-info-item">
              <div class="cw-info-icon">
                <i class="fas fa-phone-alt"></i>
              </div>
              <div class="cw-info-text">
                <div class="cw-info-label">Call Us</div>
                <div class="cw-info-value">+252 63-6563735</div>
              </div>
            </div>
          </div>

          <div class="cw-info-card">
            <h3 class="cw-info-title">Follow Us</h3>
            <p style="color: #6b7280; margin-bottom: 1rem">
              Stay connected with us on social media
            </p>

            <div class="cw-social-links">
              <a href="#" class="cw-social-link">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#" class="cw-social-link">
                <i class="fab fa-linkedin-in"></i>
              </a>
              <a href="#" class="cw-social-link">
                <i class="fab fa-github"></i>
              </a>
              <a href="#" class="cw-social-link">
                <i class="fab fa-instagram"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
HTML

Explained

Also Read
Article thumbnail Modern Website Footer Design Using HTML and CSS Only.

Main Container

<div class="cw-container">

This wraps the entire content inside one styled box.

Header

<div class="cw-header">
        <div class="cw-logo">CodeWeave24</div>
        <p class="cw-tagline">
          Get in touch with our team. We would love to hear from you!
        </p>
      </div>

Shows the site name and a short message inviting users to contact you.

Contact Section Wrapper

<div class="cw-contact-container">

This wraps both the contact form and contact info side by side.

Contact Form Area

<form class="cw-contact-form">
  <h2 class="cw-form-title">Send us a message</h2>

->Name Feild

<div class="cw-form-group">
  <label for="name">Your Name</label>
  <input type="text" id="name" placeholder="Ahmed Ismail"/>
</div>
  • A text field where users type their name.

->Email Feild

<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Ahmed@example.com" />
  • An input field for email.

->Subject Feild

<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="How can we help?"/>
  • Enter the purpose of the message.

->Message Box

<label for="message">Message</label>
<textarea id="message" placeholder="Your message here..."></textarea>
  • A larger box where users write their full message.

->Submit Button

<button type="submit" class="cw-submit-btn">Send Message</button>
  • A button to submit the form.

Contact Info Section

<div class="cw-contact-info">

->Info Card: Contact Details

<h3 class="cw-info-title">Contact Information</h3>

Shows office address, email, and phone with icons:

<i class="fas fa-map-marker-alt"></i> – Location  
<i class="fas fa-envelope"></i> – Email  
<i class="fas fa-phone-alt"></i> – Phone

->Info Card: Social Media Links

<h3 class="cw-info-title">Follow Us</h3>

Shows icons that link to Twitter, LinkedIn, GitHub, and Instagram:

<i class="fab fa-twitter"></i>  
<i class="fab fa-linkedin-in"></i>  
<i class="fab fa-github"></i>  
<i class="fab fa-instagram"></i>

You can add your real links in the href="#" parts.

Also Read
Article thumbnail How to build a professional About us page With HTML,CSS and JS.

CSS Code

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
}

.cw-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

/* Header Section */
.cw-header {
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: cw-fadeIn 0.8s ease-out forwards;
  padding: 0 1rem;
}

.cw-logo {
  font-size: clamp(2rem, 5vw, 2.5rem);
  font-weight: 800;
  color: #4f46e5;
  margin-bottom: 0.75rem;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cw-tagline {
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto;
}

/* Contact Form */
.cw-contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.cw-contact-form {
  flex: 1;
  min-width: 280px;
  background: white;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  opacity: 0;
  transform: translateY(20px);
  animation: cw-fadeIn 0.8s ease-out 0.2s forwards;
  box-sizing: border-box;
}

.cw-form-title {
  font-size: clamp(1.5rem, 4vw, 1.8rem);
  margin-bottom: 1.25rem;
  color: #111827;
}

.cw-form-group {
  margin-bottom: 1.25rem;
}

.cw-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.cw-form-input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: clamp(0.9rem, 2vw, 1rem);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.cw-form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.cw-form-textarea {
  min-height: 120px;
  resize: vertical;
}

.cw-submit-btn {
  background: linear-gradient(90deg, #4f46e5, #8b5cf6);
  color: white;
  border: none;
  padding: 0.9rem 2rem;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cw-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
}

/* Contact Info */
.cw-contact-info {
  flex: 1;
  min-width: 280px;
  opacity: 0;
  transform: translateY(20px);
  animation: cw-fadeIn 0.8s ease-out 0.4s forwards;
}

.cw-info-card {
  background: white;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.cw-info-title {
  font-size: clamp(1.3rem, 3.5vw, 1.5rem);
  margin-bottom: 1.25rem;
  color: #111827;
}

.cw-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.cw-info-icon {
  margin-right: 1rem;
  color: #4f46e5;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  min-width: 24px;
}

.cw-info-text {
  flex: 1;
}

.cw-info-label {
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.cw-info-value {
  color: #6b7280;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  word-break: break-word;
}

/* Social Links */
.cw-social-links {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.cw-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 8vw, 40px);
  height: clamp(36px, 8vw, 40px);
  border-radius: 50%;
  background: #f3f4f6;
  color: #4f46e5;
  transition: all 0.3s ease;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

.cw-social-link:hover {
  background: #4f46e5;
  color: white;
  transform: translateY(-3px);
}

/* Animations */
@keyframes cw-fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .cw-container {
    padding: 1rem;
  }

  .cw-contact-container {
    gap: 1.5rem;
  }

  .cw-contact-form,
  .cw-contact-info {
    min-width: 100%;
  }

  .cw-info-item {
    flex-direction: column;
  }

  .cw-info-icon {
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .cw-header {
    margin-bottom: 1.5rem;
  }

  .cw-contact-form {
    padding: 1.25rem;
  }

  .cw-info-card {
    padding: 1.25rem;
  }

  .cw-form-input {
    padding: 0.7rem 0.9rem;
  }

  .cw-submit-btn {
    padding: 0.8rem;
  }
}
CSS

Explained

Page & Container Styling

  • body – Sets global styles like font, background color, text color and spacing.
  • min-height: 100vh Makes the page take full screen height.
  • .cw-container – Centers all content and limits its maximum width.
  • padding & box-sizing – Ensures spacing doesn’t break layout.

Header

  • .cw-header – Centers text and uses animation for a smooth entrance.
  • .cw-logo – Big, bold text with a colorful gradient.
  • background-clip: text – Makes the gradient show inside the text.
  • .cw-tagline – Smaller text below the logo with a soft gray color.

Contact Form

  • .cw-contact-form – White card with rounded corners and shadow.
  • .cw-form-input – Input fields with borders and smooth focus effects.
  • .cw-form-textarea – Larger field for writing messages.
  • .cw-submit-btn – Gradient button with hover effects and full width.

Contact Info and Social Icons

  • .cw-contact-info – Container for contact cards (address, email, phone).
  • .cw-info-card – White boxes with shadows holding contact details.
  • .cw-info-icon – Icons (map, mail, phone) styled in purple.
  • .cw-social-link – Circular social icons that change color on hover.
Also Read
Article thumbnail 3D Digital Clock with Animated Color Transitions.

Output

Contact
Contact Page

Conclusion

This project goes beyond just adding a simple footer. You are actually creating a modern contact section that looks clean, professional and user friendly all with just HTML and CSS.

Even though it does not use any JavaScript it still includes nice design touches like:

Gradient backgrounds on text and buttons,
Smooth hover effects for interactivity,
Stylish social media icons and others.

View Demo
Download source code

My name is Ahmed Ismail, and I am the author and developer of this website.

Related Posts

Make Your Website Stand Out with a Stunning...

Animated Loading Screen with Progress and Smooth Page...

Custom 404 Page Design with HTML & CSS...

Modern Website Footer Design Using HTML and CSS...

How to build a professional About us page...

3D Digital Clock with Animated Color Transitions

Neo Login & Signup with HTML, CSS &...

How to Create an Animated Clock with HTML,...

Secure Password Generator using HTML, CSS and JavaScript.

Circular Scroll Progress Bar Using HTML, CSS &...

3 comments

Custom 404 Page Design With HTML & CSS Only – Step-by-Step Guide July 16, 2025 - 2:42 pm

[…] Posts Custom 404 Page Design with HTML & CSS… Responsive Contact Form UI with Animation | Pure… Modern Website Footer Design Using HTML and CSS… How to build a professional About us page… 3D […]

Reply
Animated Loading Screen With Progress And Smooth Page Transition July 22, 2025 - 2:14 pm

[…] Loading Screen with Progress and Smooth Page… Custom 404 Page Design with HTML & CSS… Responsive Contact Form UI with Animation | Pure… Modern Website Footer Design Using HTML and CSS… How to build a professional About us page… 3D […]

Reply
Make Your Website Stand Out With A Stunning Tech Slider August 3, 2025 - 2:04 pm

[…] Loading Screen with Progress and Smooth Page… Custom 404 Page Design with HTML & CSS… Responsive Contact Form UI with Animation | Pure… Modern Website Footer Design Using HTML and CSS… How to build a professional About us […]

Reply

Leave a Comment

Save my name, email, and website in this browser for the next time I comment.

@2021 - All Right Reserved. Designed and Developed by PenciDesign

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More