Create a Responsive Form with CSS

To create a responsive form with CSS, we will be using HTML form elements such as HTML input tag with type attribute and label. We will design the created form using CSS properties and make it responsive using media queries. We will be undersatanding stepwise process of creating responsive form with css.

In this article, we are having form elements and our task is to create a responsive form with CSS.

Steps To Create a Responsive Form

We will be following below mentioned steps to create a responsive form.

• Creating Structure of Form Using HTML
• Responsive Designing using CSS

Creating Structure of Form Using HTML

• We have used input tag to create six input fields for collecting user information, added labels for corresponding input fields.
• Then, we have wrapped them inside two div, each div containing three labels and input fields, making two column. We have wrapped all these elements inside a div with class name container.
• At the end, we have created a submit button using input tag and type attribute.

<h2>
    Creating Responsive Form with CSS
</h2>
<div class="container">
    <div class="formContainer">
        <div class="container">
            <div>
                <label for="fname">Full Name</label>
                <input type="text" id="fname" name="firstname" 
                       placeholder="Enter Name" />
                <label for="email"> Email</label>
                <input type="text" id="email" name="email" 
                       placeholder="[email protected]" />
                <label for="uname">Username</label>
                <input type="text" id="uname" name="username" 
                       placeholder="Enter User Name" />
            </div>
            <div>
                <label for="pass">Password</label>
                <input type="text" id="pass" name="pwd" 
                       placeholder="Enter Password" />
                <label for="cnfpass">Confirm Password</label>
                <input type="text" id="cnfpass" name="cnfpwd" 
                       placeholder="Confirm Password" />
                <label for="pass">D.O.B</label>
                <input type="text" id="dob" name="dob" 
                       placeholder="dd-mm-yyyy" />
            </div>
        </div>
        <input type="submit" value="Submit" />
    </div>
</div>

Responsive Designing using CSS

• We have used container to make it a flexbox using display property, justify-content for spacing form elements evenly. CSS gap property add the gap between div elements separating input fields.
• Then we have set the top and bottom margin of labels using margin property and used display property to use labels as a block element.
• We have used formContainer class to design the container having all the input fields and labels by setting it's background-color and text color, making round edged container using border-radius property and setting the padding.
• Then we have designed all the input fields using attribute selector "input[type="text"]". We have set the width of the input field to be 100% taking up complete space avaiable, set the bottom margin, border and border radius for curved edges and padding of the input field.
• Similarly, we have used attribute selector to design the submit button by setting it's background-color, font-size and cursor to pointer, padding, width and border-radius for curved edged button. Upon hovering it chnages it' background and text color using hover psuedo class.
• In the end, we have used @media queries for responsiveness. We have set the max-width of the screen to 600px i.e for screen width less than 600px form layout will be changed. Instead of displaying the input fields side by side, it will display in a single column using flex-direction property.

body {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    padding: 8px;
}
* {
    box-sizing: border-box;
}
.container {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: space-around;
}
.container div {
    gap: 10px;
}
label {
    margin: 15px 0px 15px 0px;
    display: block;
}
.formContainer {
    background-color: #031926;
    color: white;
    padding: 5px 20px 15px 20px;
    border-radius: 3px;
}
input[type="text"] {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
input[type="submit"] {
    width: 100%;
    border-radius: 3px;
    background-color: #031926;
    color: white;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    font-size: 18px;
}
input[type="submit"]:hover {
    background-color: white;
    color: #031926;
}
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Complete Example Code

Here is the complete example code implementing above two steps to create responsive form with CSS.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Verdana, sans-serif;
            font-size: 15px;
            padding: 8px;
        }
        * {
            box-sizing: border-box;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
            justify-content: space-around;
        }
        .container div {
            gap: 10px;
        }
        label {
            margin: 15px 0px 15px 0px;
            display: block;
        }
        .formContainer {
            background-color: #031926;
            color: white;
            padding: 5px 20px 15px 20px;
            border-radius: 3px;
        }
        input[type="text"] {
            display: inline-block;
            width: 100%;
            margin-bottom: 20px;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        input[type="submit"] {
            width: 100%;
            border-radius: 3px;
            background-color: #031926;
            color: white;
            padding: 12px 20px;
            border: none;
            cursor: pointer;
            font-size: 18px;
        }
        input[type="submit"]:hover {
            background-color: white;
            color: #031926;
        }
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <h1>
        Creating Responsive Form with CSS
    </h1>
    <div class="container">
        <div class="formContainer">
            <div class="container">
                <div>
                    <label for="fname">Full Name</label>
                    <input type="text" id="fname" name="firstname" 
                              placeholder="Enter Name" />
                    <label for="email"> Email</label>
                    <input type="text" id="email" name="email" 
                              placeholder="[email protected]" />
                    <label for="uname">Username</label>
                    <input type="text" id="uname" name="username" 
                              placeholder="Enter User Name" />
                </div>
                <div>
                    <label for="pass">Password</label>
                    <input type="text" id="pass" name="pwd" 
                              placeholder="Enter Password" />
                    <label for="cnfpass">Confirm Password</label>
                    <input type="text" id="cnfpass" name="cnfpwd" 
                              placeholder="Confirm Password" />
                    <label for="pass">D.O.B</label>
                    <input type="text" id="dob" name="dob" 
                              placeholder="dd-mm-yyyy" />
                </div>
            </div>
            <input type="submit" value="Submit" />
        </div>
    </div>
</body>
</html>

Conclusion

In this article, we learned how to create a responsive form with CSS. First we have created a basic structure of form with HTML using form elements and then used CSS for designing and making the form responsive.