DocsAllOver Responsive Poll UI Design with HTML, CSS & JavaScript Snippets

Responsive Poll UI Design with HTML, CSS & JavaScript

April 20, 2025

HTML, CSS, Js, Responsive, Card, Clean UI, Form

Full Screen

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Interactive Poll UI Design with HTML CSS & JavaScript</title>
</head>

<body>
    <div class="wrapper">
        <header>Poll UI Design</header>
        <div class="poll-area">
            <input type="checkbox" name="poll" id="opt-1">
            <input type="checkbox" name="poll" id="opt-2">
            <input type="checkbox" name="poll" id="opt-3">
            <input type="checkbox" name="poll" id="opt-4">
            <label for="opt-1" class="opt-1">
                <div class="row">
                    <div class="column">
                        <span class="circle"></span>
                        <span class="text">HTML</span>
                    </div>
                    <span class="percent">30%</span>
                </div>
                <div class="progress" style="--w:30;"></div>
            </label>
            <label for="opt-2" class="opt-2">
                <div class="row">
                    <div class="column">
                        <span class="circle"></span>
                        <span class="text">Java</span>
                    </div>
                    <span class="percent">20%</span>
                </div>
                <div class="progress" style="--w:20;"></div>
            </label>
            <label for="opt-3" class="opt-3">
                <div class="row">
                    <div class="column">
                        <span class="circle"></span>
                        <span class="text">Python</span>
                    </div>
                    <span class="percent">40%</span>
                </div>
                <div class="progress" style="--w:40;"></div>
            </label>
            <label for="opt-4" class="opt-4">
                <div class="row">
                    <div class="column">
                        <span class="circle"></span>
                        <span class="text">jQuery</span>
                    </div>
                    <span class="percent">10%</span>
                </div>
                <div class="progress" style="--w:10;"></div>
            </label>
        </div>
    </div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
</body>

</html>

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

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

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #6665ee;
}

::selection {
    color: #fff;
    background: #6665ee;
}

.wrapper {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}

.wrapper header {
    font-size: 22px;
    font-weight: 600;
}

.wrapper .poll-area {
    margin: 20px 0 15px 0;
}

.poll-area label {
    display: block;
    margin-bottom: 10px;
    border-radius: 5px;
    padding: 8px 15px;
    border: 2px solid #e6e6e6;
    transition: all 0.2s ease;
}

.poll-area label:hover {
    border-color: #ddd;
}

label.selected {
    border-color: #6665ee !important;
}

label .row {
    display: flex;
    pointer-events: none;
    justify-content: space-between;
}

label .row .column {
    display: flex;
    align-items: center;
}

label .row .circle {
    height: 19px;
    width: 19px;
    display: block;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
}

label.selected .row .circle {
    border-color: #6665ee;
}

label .row .circle::after {
    content: "";
    height: 11px;
    width: 11px;
    background: #6665ee;
    border-radius: inherit;
    position: absolute;
    left: 2px;
    top: 2px;
    display: none;
}

.poll-area label:hover .row .circle::after {
    display: block;
    background: #e6e6e6;
}

label.selected .row .circle::after {
    display: block;
    background: #6665ee !important;
}

label .row span {
    font-size: 16px;
    font-weight: 500;
}

label .row .percent {
    display: none;
}

label .progress {
    height: 7px;
    width: 100%;
    position: relative;
    background: #f0f0f0;
    margin: 8px 0 3px 0;
    border-radius: 30px;
    display: none;
    pointer-events: none;
}

label .progress:after {
    position: absolute;
    content: "";
    height: 100%;
    background: #ccc;
    width: calc(1% * var(--w));
    border-radius: inherit;
    transition: all 0.2s ease;
}

label.selected .progress::after {
    background: #6665ee;
}

label.selectall .progress,
label.selectall .row .percent {
    display: block;
}

input[type="radio"],
input[type="checkbox"] {
    display: none;
}

const options = document.querySelectorAll("label");
for (let i = 0; i < options.length; i++) {
    options[i].addEventListener("click", () => {
        for (let j = 0; j < options.length; j++) { if (options[j].classList.contains("selected")) { options[j].classList.remove("selected"); } } options[i].classList.add("selected"); for (let k = 0; k < options.length; k++) { options[k].classList.add("selectall"); } let forVal = options[i].getAttribute("for"); let selectInput = document.querySelector("#" + forVal); let getAtt = selectInput.getAttribute("type"); if (getAtt == "checkbox") { selectInput.setAttribute("type", "radio"); } else if (selectInput.checked == true) { options[i].classList.remove("selected"); selectInput.setAttribute("type", "checkbox"); } let array = []; for (let l = 0; l < options.length; l++) { if (options[l].classList.contains("selected")) { array.push(l); } } if (array.length == 0) { for (let m = 0; m < options.length; m++) { options[m].removeAttribute("class"); } }
    });
}

This snippet creates a dynamic and interactive poll UI design, engineered with HTML, CSS, and JavaScript to gather user feedback seamlessly across various screen sizes. The poll offers an engaging way for users to participate and for website owners to collect valuable opinions.

Key Features:

Responsive Design: The poll UI adapts fluidly to different screen sizes, ensuring a consistent and accessible experience on desktops, tablets, and mobile devices.
Customizable Styling: Easily modify the appearance of the poll using CSS to align with your website's design and branding.
Clear Visual Presentation: Utilizes HTML structure and CSS styling to present poll questions and options in an understandable format.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the poll, including containers for the question, answer options (radio buttons, checkboxes, etc.), and a submit button.
Apply CSS Styling: Use CSS to style the various elements of the poll, such as the question text, answer choices, buttons, and overall layout, ensuring visual appeal and clarity.
Implement JavaScript Logic: Write JavaScript code to handle user interactions, record votes upon submission, and potentially display results (basic client-side or with backend integration).
Ensure Responsiveness: Utilize CSS media queries and flexible layout techniques (like Flexbox or Grid) to make the poll adapt to different screen sizes.

By following these steps, you can create a responsive and interactive poll UI design using HTML, CSS, and JavaScript, effectively engaging your website visitors and gathering valuable feedback.

Latest Snippets

View All