Using collapsible sections in long forms

In web design, collapsible sections are used to condense a long form into manageable chunks, allowing users to focus on a specific part of the form at a time. When dealing with long forms, collapsing sections can significantly improve the user experience by reducing visual clutter, making the form more approachable, and increasing form completion rates. Collapsible sections can help users navigate through complex forms by allowing them to expand and collapse different parts of the form as needed.

Here’s a step-by-step guide to implementing collapsible sections in long forms:

---

Step 1: Identify Sections to Collapse

The first step is to identify which parts of your form should be collapsible. Typically, forms that have multiple categories or sections—such as personal details, shipping information, payment details, and confirmation—can benefit from collapsibility.

For example:

• Personal Information: Name, age, gender, etc.
• Contact Information: Phone number, email address.
• Shipping Address: Street, city, state, zip code.
• Payment Details: Credit card, billing address.
• Additional Information: Preferences, survey questions, etc.

Each of these categories could be turned into a collapsible section.

---

Step 2: Basic HTML Structure

Create the basic structure of your form, where each section is wrapped in a container (such as a div) with a header that can be clicked to toggle the visibility of the section.

Example HTML Structure:

<form id="long-form">
    <div class="form-section">
        <button type="button" class="toggle-btn" onclick="toggleSection('personal-info')">Personal Information</button>
        <div id="personal-info" class="section-content" style="display:none;">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name">
            <label for="age">Age:</label>
            <input type="number" id="age" name="age">
        </div>
    </div>

    <div class="form-section">
        <button type="button" class="toggle-btn" onclick="toggleSection('contact-info')">Contact Information</button>
        <div id="contact-info" class="section-content" style="display:none;">
            <label for="phone">Phone:</label>
            <input type="text" id="phone" name="phone">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email">
        </div>
    </div>

    <div class="form-section">
        <button type="button" class="toggle-btn" onclick="toggleSection('shipping-info')">Shipping Information</button>
        <div id="shipping-info" class="section-content" style="display:none;">
            <label for="address">Address:</label>
            <input type="text" id="address" name="address">
            <label for="city">City:</label>
            <input type="text" id="city" name="city">
        </div>
    </div>

    <!-- More sections here -->

    <input type="submit" value="Submit">
</form>

Explanation:

• Each section of the form is wrapped inside a div with a class form-section.
• Each section contains a button (toggle-btn) that when clicked, calls a JavaScript function to toggle the visibility of the respective form section.
• The content of each section is initially hidden using the style="display:none;" inline CSS.

---

Step 3: JavaScript for Collapsibility

To make the sections collapsible, you need to use JavaScript to toggle the visibility of each section when the button is clicked. You can achieve this by adding a simple script that toggles the display property of the section.

JavaScript to Toggle Sections:

function toggleSection(sectionId) {
    var section = document.getElementById(sectionId);
    if (section.style.display === "none" || section.style.display === "") {
        section.style.display = "block";
    } else {
        section.style.display = "none";
    }
}

Explanation:

• The toggleSection function takes the sectionId as a parameter and toggles the display property of the corresponding section.
• If the section is currently hidden (i.e., its display is none), it will be shown (display set to block).
• If the section is already visible, it will be hidden again.

---

Step 4: Add Styles for Collapsible Sections

To make the collapsible sections visually distinct and to improve user experience, you can add CSS for styling. This includes styling the toggle buttons, adding smooth transitions for the collapse effect, and making the form more visually appealing.

Example CSS:

.form-section {
    margin-bottom: 20px;
}

.toggle-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.toggle-btn:hover {
    background-color: #45a049;
}

.section-content {
    padding: 15px;
    margin-top: 10px;
    background-color: #f4f4f4;
    border-radius: 5px;
    transition: max-height 0.3s ease-out;
}

.section-content input {
    margin: 5px 0;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

.section-content label {
    display: block;
    margin: 5px 0;
}

Explanation:

• .form-section: Adds space between form sections.
• .toggle-btn: Styles the buttons to make them look like clickable elements, with green as the background color and white text. The button also changes color when hovered over.
• .section-content: Adds padding and a background color to each section that is collapsed or expanded, with a smooth transition effect (transition: max-height 0.3s ease-out) to enhance the user experience when toggling sections.
• .section-content input and .section-content label: Ensures that form inputs are styled and labels are properly spaced.

---

Step 5: Optional – Remember Collapsed State

If you want to maintain the user’s last interaction with collapsible sections (i.e., remember if a section was expanded or collapsed), you can use localStorage or sessionStorage in JavaScript to store the state of each section.

Example of Storing Collapsed State:

function toggleSection(sectionId) {
    var section = document.getElementById(sectionId);
    var isCollapsed = section.style.display === "none" || section.style.display === "";
    
    if (isCollapsed) {
        section.style.display = "block";
        localStorage.setItem(sectionId, "expanded");
    } else {
        section.style.display = "none";
        localStorage.setItem(sectionId, "collapsed");
    }
}

window.onload = function() {
    var sections = ['personal-info', 'contact-info', 'shipping-info']; // Add all section IDs here
    sections.forEach(function(sectionId) {
        var state = localStorage.getItem(sectionId);
        if (state === "collapsed") {
            document.getElementById(sectionId).style.display = "none";
        }
    });
};

Explanation:

• On page load, the script checks the localStorage to determine if a section was previously collapsed or expanded.
• If the section was collapsed, it remains hidden when the page is reloaded.

---

Step 6: Enhance Mobile Usability

When implementing collapsible sections in forms, it’s important to ensure that the form is mobile-friendly. Mobile screens have limited space, so collapsibility is even more critical to avoid overwhelming the user.

• Responsive Design: Ensure that the toggle buttons and form sections are properly aligned and fit within mobile screen sizes.
• Use Accordion-style UI: On mobile devices, consider using an accordion-style layout where only one section is expanded at a time.