How to Create a Responsive Form with HTML and CSS

Author:

Introduction

Responsive forms adjust their layout and appearance based on the screen size, ensuring they are user-friendly across devices. Whether on a desktop, tablet, or mobile device, a responsive form remains accessible and easy to use. In this tutorial, we will create a simple responsive form using HTML and CSS.

Problem Statement

Create a form that:

  • Adjusts its layout to fit various screen sizes (desktop, tablet, mobile).
  • Includes fields such as name, email, and message.
  • Is visually appealing and functional on both large and small screens.

Example:

  • Input: The user fills out the form on different devices.
  • Output: A responsive form that adjusts to the screen size.

Solution Steps

  1. Use the <form> Element: Structure the form using HTML with input fields such as name, email, and message.
  2. Style the Form with CSS: Use CSS to style the form and make it responsive with media queries.
  3. Ensure Mobile Responsiveness: Adjust the form’s layout for mobile screens to make it user-friendly on smaller devices.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Form</title>
    <style>
        /* Step 1: Style the form container */
        .form-container {
            width: 100%;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Step 2: Style form fields */
        .form-container label {
            display: block;
            margin-bottom: 8px;
            font-size: 1rem;
            color: #333;
        }

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

        /* Step 3: Style the submit button */
        .form-container button {
            width: 100%;
            padding: 12px;
            font-size: 1.2rem;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-container button:hover {
            background-color: #2980b9;
        }

        /* Step 4: Responsive design for small screens */
        @media (max-width: 600px) {
            .form-container {
                padding: 15px;
            }

            .form-container label {
                font-size: 0.9rem;
            }

            .form-container button {
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>

    <div class="form-container">
        <form action="/submit_form" method="POST">
            <!-- Name Field -->
            <label for="name">Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your name" required>

            <!-- Email Field -->
            <label for="email">Email</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>

            <!-- Message Field -->
            <label for="message">Message</label>
            <textarea id="message" name="message" rows="5" placeholder="Enter your message" required></textarea>

            <!-- Submit Button -->
            <button type="submit">Submit</button>
        </form>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Form Container

The .form-container class centers the form on the page, adds padding, and styles the background with a shadow effect.

.form-container {
    width: 100%;
    max-width: 600px; /* Limits the form width */
    margin: 50px auto; /* Centers the form */
    padding: 20px; /* Adds padding inside the container */
    background-color: #f4f4f4; /* Light background color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds shadow */
}

  • max-width: 600px: Ensures the form doesn’t exceed 600px in width on larger screens.

  • box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1): Adds depth to the form with a shadow effect.

Step 2: Style the Form Fields

The form fields (name, email, and message) are styled to be user-friendly with padding, borders, and a consistent font size.

.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea {
    width: 100%; /* Full width input */
    padding: 10px; /* Space inside the input field */
    margin-bottom: 15px; /* Space below each field */
    border: 1px solid #ccc; /* Light border color */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Font size for text */
    box-sizing: border-box; /* Ensures padding is included in width */
}
  • box-sizing: border-box: Ensures the padding and borders are included in the element's total width.

Step 3: Style the Submit Button

The submit button is styled with a modern look and includes a hover effect to change the background color when hovered over.

.form-container button {
    width: 100%; /* Full width button */
    padding: 12px; /* Adds padding to the button */
    font-size: 1.2rem; /* Larger font size */
    background-color: #3498db; /* Blue background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.form-container button:hover {
    background-color: #2980b9; /* Darker blue on hover */
}
  • transition: background-color 0.3s ease: Adds a smooth transition when hovering over the button.

Step 4: Responsive Design for Mobile Screens

The media query ensures the form looks good on smaller screens by adjusting the padding, font size, and overall layout.

@media (max-width: 600px) {
    .form-container {
        padding: 15px; /* Reduced padding on small screens */
    }

    .form-container label {
        font-size: 0.9rem; /* Smaller font size for labels */
    }

    .form-container button {
        font-size: 1rem; /* Smaller font size for button */
    }
}
  • @media (max-width: 600px): Applies the styles only when the screen width is 600px or less.

Customization

Add More Form Fields

To add more fields like phone number, address, or additional information, simply replicate the existing input structure:

<!-- Phone Number Field -->
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" placeholder="Enter your phone number">

Form Validation

You can add HTML5 validation using the required attribute and validation patterns to ensure correct input:

<input type="email" id="email" name="email" placeholder="Enter your email" required>

You can also use the pattern attribute to enforce specific input formats:

<input type="text" id="phone" name="phone" placeholder="Enter your phone number" pattern="[0-9]{10}" title="Enter a valid 10-digit phone number">

Success Message

To display a success message after the form is submitted, you can use JavaScript or server-side logic. For a simple example using JavaScript:

<form onsubmit="showSuccessMessage(); return false;">
    <!-- Form Fields -->
    <button type="submit">Submit</button>
</form>
<p id="success-message" style="display: none; color: green;">Thank you for your message!</p>

<script>
function showSuccessMessage() {
    document.getElementById('success-message').style.display = 'block';
}
</script>

Add Input Icons

To add icons inside the input fields, you can use Font Awesome or other icon libraries:

<label for="email"><i class="fas fa-envelope"></i> Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email">

Conclusion

Creating a responsive form with HTML and CSS is straightforward and ensures a user-friendly experience across devices. By using media queries and CSS styles, you can ensure that your form adapts to different screen sizes, making it

Comments

Post a Comment

Leave Comment