Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a contact form with CSS?

CSS Web Development Front End Technology

A contact form is an essential element on websites that allows users to communicate directly with site owners. CSS helps create visually appealing and user-friendly contact forms with proper styling for input fields, labels, and buttons.

Syntax

form {
    /* Form container styles */
}

input[type="text"], textarea {
    /* Input field styles */
}

input[type="submit"] {
    /* Submit button styles */
}

label {
    /* Label styles */
}

Example: Creating a Complete Contact Form

The following example demonstrates how to create a responsive contact form with proper styling −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    * {
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 20px;
    }
    
    .form-container {
        max-width: 600px;
        margin: 0 auto;
    }
    
    h1 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
    }
    
    form {
        border-radius: 8px;
        background-color: #ffffff;
        padding: 30px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    label {
        font-size: 16px;
        font-weight: 500;
        color: #333;
        display: block;
        margin-bottom: 5px;
    }
    
    input[type="text"], 
    input[type="email"], 
    textarea {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        margin-bottom: 20px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }
    
    input[type="text"]:focus,
    input[type="email"]:focus,
    textarea:focus {
        outline: none;
        border-color: #4CAF50;
    }
    
    textarea {
        height: 120px;
        resize: vertical;
    }
    
    input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 15px 30px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        transition: background-color 0.3s ease;
        width: 100%;
    }
    
    input[type="submit"]:hover {
        background-color: #45a049;
    }
</style>
</head>
<body>
    <div class="form-container">
        <h1>Contact Us</h1>
        <form>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Enter your first name" required>
            
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Enter your last name" required>
            
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" placeholder="Enter your email address" required>
            
            <label for="message">Message</label>
            <textarea id="message" name="message" placeholder="Write your message here..." required></textarea>
            
            <input type="submit" value="Send Message">
        </form>
    </div>
</body>
</html>

Output

A clean, modern contact form appears with a white background and subtle shadow. The form includes:
- Centered "Contact Us" heading
- Four input fields: First Name, Last Name, Email Address, and Message
- Light gray borders that turn green when focused
- A green "Send Message" button that darkens on hover
- Responsive design that adapts to different screen sizes

Key Features

This contact form includes several important features:

  • Responsive Design: Uses max-width and proper viewport settings for mobile compatibility
  • Visual Feedback: Focus states change border colors to indicate active fields
  • Proper Input Types: Uses type="email" for email validation
  • Accessibility: Labels are properly associated with form controls using for attributes
  • Smooth Transitions: CSS transitions provide smooth color changes on hover and focus

Conclusion

CSS contact forms combine functionality with visual appeal through proper styling of form elements. Focus on user experience with clear labels, appropriate input types, and visual feedback for better usability.

Updated on: 2026-03-15T14:36:13+05:30

534 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements