Survey/Poll Form Neo Brutalism Design Using HTML and CSS

on
Survey/Poll Form Neo Brutalism Design Using HTML and CSS
black laptop computer turned on on table

Photo by James Harrison on Unsplash

Survey/Poll Form Neo Brutalism Design Using HTML and CSS

Create a modern, responsive survey/poll form design in the neo-brutalist style using HTML and CSS, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible design, and maintainable code, ideal for collecting user feedback or opinions in web interfaces.

Quick Survey

Feedback Poll

Prerequisites

  • Basic HTML and CSS knowledge
  • A code editor (e.g., VS Code)

Part 1: Survey/Poll Form Neo Brutalism Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the neo-brutalist survey/poll form with a container, header, form with radio buttons and a textarea, and a submit button.

<div class="neo-survey-container" role="region" aria-label="Neo-brutalist survey forms">
    <div class="neo-survey-wrapper" id="survey-form-primary">
        <div class="neo-survey-header">
            <h2>Quick Survey</h2>
        </div>
        <form class="neo-survey-form">
            <div class="neo-survey-form-group">
                <label class="neo-survey-form-label">How satisfied are you with our service?</label>
                <div class="neo-survey-form-radio-group">
                    <div class="neo-survey-form-radio">
                        <input type="radio" id="satisfied-very" name="satisfaction" value="very" required aria-label="Very satisfied" />
                        <label for="satisfied-very">Very Satisfied</label>
                    </div>
                    <div class="neo-survey-form-radio">
                        <input type="radio" id="satisfied-moderately" name="satisfaction" value="moderately" aria-label="Moderately satisfied" />
                        <label for="satisfied-moderately">Moderately Satisfied</label>
                    </div>
                    <div class="neo-survey-form-radio">
                        <input type="radio" id="satisfied-not" name="satisfaction" value="not" aria-label="Not satisfied" />
                        <label for="satisfied-not">Not Satisfied</label>
                    </div>
                </div>
            </div>
            <div class="neo-survey-form-group">
                <label for="survey-comments-primary" class="neo-survey-form-label">Additional Comments</label>
                <textarea id="survey-comments-primary" class="neo-survey-form-textarea" placeholder="Share your thoughts..." aria-label="Additional comments"></textarea>
            </div>
            <button type="submit" class="neo-survey-form-button">Submit</button>
        </form>
    </div>
    <div class="neo-survey-wrapper secondary" id="survey-form-secondary">
        <div class="neo-survey-header">
            <h2>Feedback Poll</h2>
        </div>
        <form class="neo-survey-form">
            <div class="neo-survey-form-group">
                <label class="neo-survey-form-label">What feature do you value most?</label>
                <div class="neo-survey-form-radio-group">
                    <div class="neo-survey-form-radio">
                        <input type="radio" id="feature-speed" name="feature" value="speed" required aria-label="Speed" />
                        <label for="feature-speed">Speed</label>
                    </div>
                    <div class="neo-survey-form-radio">
                        <input type="radio" id="feature-usability" name="feature" value="usability" aria-label="Usability" />
                        <label for="feature-usability">Usability</label>
                    </div>
                    <div class="neo-survey-form-radio">
                        <input type="radio" id="feature-design" name="feature" value="design" aria-label="Design" />
                        <label for="feature-design">Design</label>
                    </div>
                </div>
            </div>
            <div class="neo-survey-form-group">
                <label for="survey-comments-secondary" class="neo-survey-form-label">Suggestions</label>
                <textarea id="survey-comments-secondary" class="neo-survey-form-textarea" placeholder="Any suggestions?" aria-label="Suggestions"></textarea>
            </div>
            <button type="submit" class="neo-survey-form-button feedback-poll-form">Submit</button>
        </form>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the survey/poll form and its elements with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet" />

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-300: #d1d5db;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --accent-500: #f59e0b;
    --success-500: #10b981;
    --error-500: #ef4444;
    --pink-500: #ec4899;
    --cyan-500: #06b6d4;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-neo: 4px 4px 0 var(--gray-900);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

.neo-survey-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: 400px;
}

.neo-survey-wrapper {
    width: 360px;
    padding: var(--spacing-lg);
    background: var(--white);
    border: 4px solid var(--gray-900);
    box-shadow: var(--shadow-neo);
    border-radius: var(--radius-lg);
}

.neo-survey-wrapper.secondary {
    border-color: var(--accent-500);
}

.neo-survey-header {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.neo-survey-header h2 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    margin: 0;
    color: var(--gray-900);
}

.neo-survey-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.neo-survey-form-group {
    display: flex;
    flex-direction: column;
}

.neo-survey-form-label {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--spacing-xs);
}

.neo-survey-form-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.neo-survey-form-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.neo-survey-form-radio input[type="radio"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 3px solid var(--gray-900);
    background: var(--gray-100);
    border-radius: 50%;
    cursor: pointer;
}

.neo-survey-wrapper.secondary .neo-survey-form-radio input[type="radio"] {
    border-color: var(--accent-500);
}

.neo-survey-form-radio input[type="radio"]:checked {
    background: var(--success-500);
    border-color: var(--success-500);
    box-shadow: inset 0 0 0 3px var(--white);
}

.neo-survey-wrapper.secondary .neo-survey-form-radio input[type="radio"]:checked {
    background: var(--pink-500);
    border-color: var(--pink-500);
}

.neo-survey-form-radio input[type="radio"]:focus {
    outline: none;
    box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}

.neo-survey-form-radio label {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--gray-900);
}

.neo-survey-form-textarea {
    padding: var(--spacing-sm);
    border: 3px solid var(--gray-900);
    background: var(--gray-100);
    font-size: 0.875rem;
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
    resize: vertical;
    min-height: 80px;
}

.neo-survey-wrapper.secondary .neo-survey-form-textarea {
    border-color: var(--accent-500);
}

.neo-survey-form-textarea:focus {
    outline: none;
    background: var(--gray-300);
    border-color: var(--primary-600);
    box-shadow: 2px 2px 0 var(--accent-500);
}

.neo-survey-form-button {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--success-500);
    color: var(--white);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.875rem;
    border: 3px solid var(--gray-900);
    cursor: pointer;
    box-shadow: var(--shadow-neo);
    transition: all var(--transition);
    border-radius: var(--radius-sm);
}

.neo-survey-wrapper.secondary .neo-survey-form-button {
    background: var(--pink-500);
    border-color: var(--accent-500);
}

.neo-survey-form-button:hover,
.neo-survey-form-button:focus {
    background: var(--white);
    color: var(--success-500);
    border-color: var(--success-500);
    box-shadow: none;
    transform: translate(2px, 2px);
}

.neo-survey-wrapper.secondary .neo-survey-form-button:hover,
.neo-survey-wrapper.secondary .neo-survey-form-button:focus {
    color: var(--pink-500);
    border-color: var(--pink-500);
}

.neo-survey-form-button:focus {
    outline: none;
    box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}

.feedback-poll-form:hover{
    color: var(--pink-500) !important;
    background: var(--white) !important;
	border-color: var(--pink-500) !important;
}

@media (max-width: 640px) {
    .neo-survey-container {
        gap: var(--spacing-sm);
    }

    .neo-survey-wrapper {
        width: 100%;
        max-width: 320px;
        padding: var(--spacing-md);
    }

    .neo-survey-header h2 {
        font-size: 1.25rem;
    }

    .neo-survey-form-label,
    .neo-survey-form-radio label,
    .neo-survey-form-textarea,
    .neo-survey-form-button {
        font-size: 0.75rem;
    }

    .neo-survey-form-radio input[type="radio"] {
        width: 14px;
        height: 14px;
    }

    .neo-survey-form-textarea {
        min-height: 60px;
    }
}

Explanation

  • Layout: The survey/poll form uses a flexbox container (neo-survey-container) to stack survey wrappers (neo-survey-wrapper) vertically. Each wrapper includes a header (neo-survey-header), form (neo-survey-form) with a radio button group (neo-survey-form-radio-group) and textarea (neo-survey-form-textarea), and a submit button (neo-survey-form-button), styled with a white background, thick borders, and heavy shadows.
  • Styling: The wrapper uses a white background with thick black (4px) or orange (--accent-500 for secondary) borders and a 4px shadow (--shadow-neo). Radio buttons and textareas have 3px borders, with radio buttons using a gray background (--gray-100) and green (--success-500) or pink (--pink-500) when checked. The submit button uses green or pink. Text uses a monospace font (IBM Plex Mono). Hover/focus states invert button colors and remove shadows, while inputs gain a blue border on focus.
  • Interactivity: The submit button (neo-survey-form-button) and radio buttons (neo-survey-form-radio input) have hover and focus states that adjust colors and shadows. The textarea changes background on focus. No JavaScript is needed for this static design.
  • Visual Feedback: Hovering or focusing the button inverts colors (e.g., green to white, white to green) with a transform (translate(2px, 2px)) and no shadow. Radio buttons fill with green or pink when checked, with a white inset for contrast. The textarea grays out (--gray-300) and gains a blue border (--primary-600) on focus. Focus states add a dual shadow (orange and blue) for accessibility.
  • Responsiveness: A media query (@media (max-width: 640px)) adjusts wrapper width to 100% (max 320px), reduces padding, font sizes, radio button sizes, and textarea height, maintaining the neo-brutalist aesthetic for mobile usability.
  • Accessibility: role="region" and aria-label on the container provide context for screen readers. Radio buttons and textareas have aria-label (e.g., Very satisfied, Additional comments). The form uses required for the radio group. High contrast ratios (4.5:1 minimum, verified for #10b981, #ec4899, #111827, #ffffff) and bold typography ensure readability. Buttons and inputs are keyboard-focusable with clear focus styles (dual shadow with --accent-500 and --primary-600).
UX Tip: Neo-brutalist survey/poll forms should feel bold and tactile with heavy shadows, stark contrasts, and clear input options. Ensure accessibility with ARIA attributes, descriptive labels, and keyboard support. In production, integrate with a backend for data collection, add form validation, or include dynamic questions and test across devices.

Accessibility Features

  • Use role="region" and aria-label for semantic structure
  • Include aria-label on inputs for screen readers
  • Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
  • Support keyboard navigation with clear focus styles
  • Use bold, readable typography (monospace for neo-brutalism)

Golden Rules

  • Use CSS variables for consistent theming
  • Implement bold borders and heavy shadows for neo-brutalist style
  • Ensure accessibility with ARIA and descriptive attributes
  • Optimize for mobile with responsive design

Conclusion

A professional neo-brutalist survey/poll form should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for striking survey forms with primary and secondary variants, featuring heavy shadows, thick borders, a monospace font, and vibrant colors. Experiment with colors, shadow offsets, or add features like dynamic questions or progress indicators. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment