Animated Contact Form Html Css

MUAZHAN

6 min read

·

Jun 28, 2024

30

Share

Animated Contact Form with HTML & CSS

This article will guide you through creating a visually appealing and animated contact form using HTML and CSS. We will use simple animations and transitions to create an engaging user experience.

HTML Structure

First, let's set up the basic HTML structure for our contact form:

    
    
    
    


    

        
Contact Us
        

            

                Name:
                
            
            

                Email:
                
            
            

                Message:
                
            
            Submit
        
    

In this code:

• We create a container div to hold the form elements.
• We add a heading <h2>Contact Us</h2>.
• The form element includes input fields for name, email, and a message area.
• Each input is wrapped in a div with the class form-group.
• We use required attribute for all input fields to ensure the user provides all necessary information.

CSS Styling and Animations

Now, let's add some CSS styling to enhance the form's appearance and add animations:

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 400px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

input:focus,
textarea:focus {
    border-color: #007bff;
    outline: none;
}

textarea {
    resize: vertical;
    height: 100px;
}

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

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

/* Animation for input fields */
.form-group input,
.form-group textarea {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    opacity: 1;
    transform: translateY(0);
}

In this CSS:

• We style the body with a light background and center the container.
• The container is styled with a white background, padding, rounded corners, and a box shadow.
• We style the form elements with margins, padding, border, and transition effects for hover and focus states.
• The animation for input fields uses opacity and transform properties to make them fade in and slide up when focused.

Explanation

• Basic HTML Structure: The HTML code sets up the skeleton of the form with input fields and labels.
• CSS Styling: The CSS styles the form's appearance, including colors, fonts, padding, and borders.
• Animations: The CSS animations add visual effects like fading and sliding for input fields when they are focused.

This example provides a basic framework for creating an animated contact form. You can further enhance the design and animation by incorporating additional CSS effects and JavaScript interactions.