Responsive Survey form using HTML and CSS

Hey, developer today is Day 71 of our 90Projects in 90Days. And today, we are going to Create a Responsive Survey form using HTML and CSS

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

survey form using html and css, Survey form using HTML only, survey form using html, raju webdev, geeks help, survey form, Survey HTML template free download, responsive survey form


Image Resources: Download Now

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Survey Form </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <h2> Geeks Help Survey Form </h2>
        <div class="form-wrapper">
            <form action="">
                <div class="form-group">
                    <label for="name"> Name: </label>
                    <input type="text" name="name" id="name" placeholder="Enter your name">
                </div>
                <div class="form-group">
                    <label for="email"> Email: </label>
                    <input type="text" name="email" id="email" placeholder="Enter your email">
                </div>
                <div class="form-group gender">
                    Gender:
                    <div class="genderDiv">
                        <input type="radio" name="gender" id="male"><label for="gender"> Male </label>
                        <input type="radio" name="gender" id="female"><label for="gender"> Female </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="hear" id="hear"> Where from you know about Geeks Help? </label>
                    <select>
                        <option class="transparent" value="Instagram"> Instagram </option>
                        <option class="transparent" value="Facebook"> Facebook </option>
                        <option class="transparent" value="friends"> Friends </option>
                        <option class="transparent" value="googleSearch"> Google Search </option>
                        <option class="transparent" value="Randomly"> Randomly </option>
                        <option class="transparent" value="other"> other </option>
                    </select>
                </div>
                <div class="form-group flex">
                    <label for=""> Will you recommend Geeks Help to your friends ? </label>
                    <div class="recommendation">
                        <input type="radio" name="recommend" id="yes"><label for="yes"> Yes </label>
                        <input type="radio" name="recommend" id="no"><label for="no"> No </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="lang"> Favorite Language </label>
                    <div class="box">
                        <input type="checkbox" name="js" id="html"> <label for="html"> HTML </label>
                        <input type="checkbox" name="js" id="css"> <label for="css"> CSS </label>
                        <input type="checkbox" name="js" id="javascript"> <label for="javascript"> JavaScript </label>
                        <input type="checkbox" name="js" id="python"> <label for="python"> Python </label>
                        <input type="checkbox" name="js" id="java"> <label for="java"> Java </label>
                        <input type="checkbox" name="js" id="c/c++"> <label for="c/c++"> C/C++ </label>
                        <input type="checkbox" name="js" id="nodejs"> <label for="nodejs">NodeJS</label>
                    </div>
                </div>
                <div class="form-group flex">
                    <label for="suggestions"> How we can improve ourself? </label>
                    <textarea name="suggestions" id="suggestions" cols="30" rows="10"></textarea>
                </div>
                <button type="submit"> Submit </button>
            </form>
        </div>
    </div>

</body>
</html>


CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container {
    text-align: center;
    color: #fff;
    width: 100%;
    padding: 5rem 0;
    background-image: url(backgroud.jpg);
    background-color: #e65b00;
    background-size: cover;
    display: grid;
    align-content: center;
}

.container h2 {
    margin-bottom: 20px;
}

.form-wrapper {
    margin: 0 auto;
    width: 60%;
    overflow: hidden;
    background: transparent;
    border: 1px solid #ffffff35;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(243, 237, 237, 0.182);
    padding: 10px;
}

.form-group {
    display: flex;
    padding: 5px;
    text-align: left;
    margin: 4px 0;
}

.form-group label {
    font-weight: 400;
}

.form-group input,
option {
    font-weight: 200;
}

.form-group input {
    background-color: transparent;
    border-radius: 5px;
    margin-left: 10px;
    color: #fff;
    width: 400px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.803);
    outline: navajowhite;
}

.form-group input[type="radio"] {
    width: 15px;
    margin-right: 10px;
}

.form-group label[for="name"],
.form-group label[for="email"] {
    width: 50px;
    margin-right: 10px;
}

.box input {
    width: auto;
}

#hear {
    margin-right: 10px;
}

.form-group select {
    outline: none;
    border: 1px solid #fff;
    cursor: pointer;
    border-radius: 20px;
    border-radius: 5px;
    cursor: pointer;

    padding: 5px;
    background-color: transparent;
    color: #fff;
}

.form-group select option {
    background-color: #e65b00;
    color: #000;
}

.flex {
    display: flex;
    flex-direction: column;
}

textarea {
    width: 90%;
    resize: none;
    background: transparent;
    border-radius: 6px;
    color: #fff;
    padding: 10px;
}

button {
    width: 60%;
    padding: 6px;
    border-radius: 7px;
    border: none;
    outline: none;
    background-color: transparent;
    border: 1px solid #fff;
    transition: all 0.2s;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #e65b00;
    border-color: #e65b00;
}

@media screen and (max-width: 839px) {
    .container {
        padding: 1rem;
    }

    .form-wrapper {
        width: 100%;
    }

    .form-group input[type="text"],
    .form-group input[type="email"] {
        width: 80%;
    }

    .form-group {
        flex-direction: column;
    }

    .form-group select {
        width: 40%;
        border-radius: 5px;
        cursor: pointer;

        padding: 5px;
        background-color: transparent;
        color: #fff;
    }

    .form-group select option {
        width: 40%;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
        border: none;
        padding: 5px;
        background-color: #e65b00;
        color: #fff;
        border-radius: 5px;
    }

    .gender {
        display: flex;
    }
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad