NeuroAgent

How to Implement Two-Stage Consent for Personal Data

Step-by-step guide to implementing two-stage consent for personal data processing according to 152-FZ requirements. Minimize development effort with technical implementation strategies.

#152-fz#modal-window#personal-data#two-stage-consent#web-development
Question

How to properly implement user consent for personal data processing in accordance with new legal requirements?

Previously, we used a standard consent form with the text: “By clicking the [button name], I give my consent to the processing of my personal data in accordance with Federal Law No. 152-FZ ‘On Personal Data’” with a corresponding button.

According to the new rules, when the form submission button is clicked, a message about personal data should appear, and only after the user confirms consent should the form be submitted. This requires significant changes to form processing logic across all websites.

Could you advise on how to properly implement this mechanism with minimal labor costs?

NeuroAgent

Proper Implementation of Personal Data Processing Consent Mechanism Requires Two-Stage Confirmation: Initial form submission button press triggers a modal window with data information, and after user confirmation, actual submission occurs. This change aims to increase user awareness about what specific data they are providing and how it will be used.

Table of Contents

Requirements of New Legislation

New requirements for implementing user consent to the processing of personal data have resulted from stricter control over compliance with Federal Law №152-FZ “On Personal Data”. The main change is the transition from a simple button click to a two-stage confirmation process.

According to the updated rules, a standard form with a single consent button no longer meets the requirements of the legislation. It is now necessary to ensure:

  1. Initial interaction: The user clicks the form submission button
  2. Information provision: The system displays detailed information about personal data
  3. Explicit confirmation: The user separately confirms their consent
  4. Actual submission: The form is submitted only after all stages

This change aims to increase the transparency of personal data processing and ensure informed user consent.

The two-stage consent mechanism is a key innovation that requires changing the logic of user interaction. Unlike previous practice, when simply clicking a button was sufficient, it is now necessary to create a sequential interaction that ensures maximum user awareness.

Process Structure:

  1. Preliminary form completion

    • The user fills in all required fields
    • The system checks the correctness of the entered data
    • The form undergoes basic validation

  2. Initial button press

    • The user clicks the “Submit” or “Continue” button
    • The system prevents immediate form submission
    • A modal window with information about personal data is displayed

  3. Data information provision

    • The modal window clearly indicates which specific data is being collected
    • The purpose of personal data processing is explained
    • The data storage period is specified
    • Information about user rights is provided

  4. Consent confirmation

    • The user must explicitly confirm their consent
    • This can be a separate “I agree” button or checkbox
    • Only after this is the form ready for submission

  5. Actual form submission

    • The system sends the data to the server
    • The fact of receiving consent is recorded
    • The user is shown confirmation of successful submission

Technical Implementation

To effectively implement a two-stage consent mechanism, it is necessary to think through the technical architecture. There are several approaches to implementation, each with its own advantages and disadvantages.

Basic Approach Using JavaScript

The simplest and fastest way to implement is to use JavaScript to manage form state:

javascript
// Basic implementation example
document.getElementById('submitBtn').addEventListener('click', function(e) {
    e.preventDefault(); // Prevent immediate submission
    
    // Show modal window with data information
    const modal = document.getElementById('consentModal');
    modal.style.display = 'block';
    
    // Wait for user confirmation
    document.getElementById('confirmConsent').addEventListener('click', function() {
        // Hide modal window
        modal.style.display = 'none';
        
        // Allow form submission
        document.getElementById('myForm').submit();
    });
});

Using Modern Frameworks

For more complex projects, you can use modern JavaScript frameworks:

React example:

jsx
const ConsentForm = () => {
    const [showConsentModal, setShowConsentModal] = useState(false);
    const [isConsentConfirmed, setIsConsentConfirmed] = useState(false);
    
    const handleSubmit = (e) => {
        e.preventDefault();
        setShowConsentModal(true);
    };
    
    const handleConsentConfirm = () => {
        setIsConsentConfirmed(true);
        setShowConsentModal(false);
        // Form submission
        document.getElementById('myForm').submit();
    };
    
    return (
        <form id="myForm" onSubmit={handleSubmit}>
            {/* Form fields */}
            <button type="submit">Submit</button>
            
            {showConsentModal && (
                <div className="consent-modal">
                    <h3>Consent to the processing of personal data</h3>
                    <p>Your data will be used for...</p>
                    <button onClick={handleConsentConfirm}>I agree</button>
                </div>
            )}
        </form>
    );
};

Server-Side Processing

It is important to ensure correct server-side processing:

python
# Example in Python (Flask)
@app.route('/submit_form', methods=['POST'])
def submit_form():
    # Check for consent in session or hidden field
    if not session.get('consent_confirmed'):
        return redirect('/form?error=no_consent')
    
    # Process form data
    # ...
    
    return 'Form successfully submitted'

Adapting Existing Forms

To minimize the effort required to adapt existing forms, you can use the following approaches:

1. Modular Approach

Create a reusable component for the two-stage consent:

html
<!-- Universal consent component -->
<div class="consent-component">
    <div class="form-container">
        <!-- Original form -->
        <form id="originalForm">
            <!-- Form fields -->
            <button type="submit" class="submit-btn">Submit</button>
        </form>
    </div>
    
    <!-- Consent modal window -->
    <div class="consent-modal" style="display: none;">
        <div class="modal-content">
            <h3>Consent to the processing of personal data</h3>
            <div class="data-info">
                <p><strong>Data being collected:</strong></p>
                <ul>
                    <li>Full name</li>
                    <li>Contact phone</li>
                    <li>Email</li>
                    <li>Additional information</li>
                </ul>
            </div>
            <div class="purpose-info">
                <p><strong>Processing purpose:</strong> Providing services and maintaining contact</p>
            </div>
            <div class="consent-actions">
                <button class="confirm-btn">I agree</button>
                <button class="cancel-btn">Cancel</button>
            </div>
        </div>
    </div>
</div>

2. Adaptation via CSS and JavaScript

If you want to preserve the existing markup, you can add the necessary functionality with minimal changes:

javascript
// Global handler for all forms
document.addEventListener('DOMContentLoaded', function() {
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        const submitBtn = form.querySelector('button[type="submit"]');
        
        if (submitBtn) {
            submitBtn.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Check if consent already exists
                if (form.dataset.consentConfirmed) {
                    form.submit();
                    return;
                }
                
                // Show modal window
                showConsentModal(form);
            });
        }
    });
});

function showConsentModal(targetForm) {
    // Create and show modal window
    const modal = createConsentModal();
    document.body.appendChild(modal);
    
    // Confirmation handler
    modal.querySelector('.confirm-btn').addEventListener('click', function() {
        targetForm.dataset.consentConfirmed = 'true';
        modal.remove();
        targetForm.submit();
    });
    
    // Cancel handler
    modal.querySelector('.cancel-btn').addEventListener('click', function() {
        modal.remove();
    });
}

3. Using Ready-Made Solutions

Consider using ready-made libraries and services:

  • Cookie Consent Manager: Specialized solutions for managing consent
  • GDPR/CCPA Compliance Tools: Platforms offering ready-made solutions
  • CMS plugins: If you use a CMS, check for ready-made extensions

Minimizing Effort

For quick implementation of new requirements with minimal effort, the following approach is recommended:

1. Prioritizing Forms

First, adapt the most critical forms:

  • Registration forms
  • Product/service order forms
  • Feedback forms
  • Subscription forms

2. Using Templates

Create a template for the consent modal window that can be easily implemented on different pages:

html
<!-- Modal window template -->
<template id="consentModalTemplate">
    <div class="consent-overlay">
        <div class="consent-modal">
            <div class="modal-header">
                <h2>Consent to the processing of personal data</h2>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <p class="consent-text">
                    By clicking the "I agree" button, you give your consent to the processing 
                    of your personal data in accordance with Federal Law №152-FZ 
                    "On Personal Data" and confirm that you have familiarized yourself with 
                    the <a href="/privacy">Privacy Policy</a>.
                </p>
                <div class="data-details">
                    <h3>Personal data we collect:</h3>
                    <ul>
                        <li>Last name, first name, patronymic</li>
                        <li>Contact phone</li>
                        <li>Email address</li>
                        <li>Additional information specified in the form</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button class="confirm-consent">I agree</button>
                <button class="decline-consent">Cancel</button>
            </div>
        </div>
    </div>
</template>

3. Automated Implementation

For sites with a large number of forms, you can create an automated script:

javascript
// Automatically adding consent to existing forms
function autoAddConsentToForms() {
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        if (form.dataset.consentAdded) return;
        
        // Prevent direct submission
        form.addEventListener('submit', function(e) {
            if (!form.dataset.consentConfirmed) {
                e.preventDefault();
                showConsentModal(form);
            }
        });
        
        form.dataset.consentAdded = 'true';
    });
}

// Run on page load
document.addEventListener('DOMContentLoaded', autoAddConsentToForms);

4. Step-by-Step Implementation Plan

  1. Analysis of current forms: Determine which forms need adaptation
  2. Template creation: Develop a unified modal window template
  3. Pilot implementation: Test on one page
  4. Mass implementation: Apply to all necessary forms
  5. Testing: Verify correctness of operation on different devices

Testing and Validation

After implementing the new consent system, thorough testing must be conducted to ensure compliance with legal requirements.

Functionality Testing

  1. User path testing:

    • Form completion
    • Clicking the submit button
    • Appearance of the modal window
    • Consent confirmation
    • Successful form submission

  2. Rejection testing:

    • Clicking the “Cancel” button
    • Closing the modal window
    • Verifying that the form was not submitted

  3. Validation testing:

    • Verifying that the form passes normal validation
    • Ensuring consent is not required for field validation

Compliance Verification

  1. Information completeness:

    • All collected data is specified
    • Processing purpose is clear
    • Storage period is indicated
    • User rights are described

  2. Accessibility:

    • Modal window is accessible to screen readers
    • Keyboard navigation works correctly
    • Text contrast is sufficient

  3. Legal compliance:

    • Consent text complies with 152-FZ
    • Process meets new requirements
    • No coercion to consent

Automated Testing

For large projects, it is recommended to add automated tests:

javascript
// Example testing with Jest
describe('Consent Form', () => {
    test('should show consent modal on form submit', () => {
        // Arrange
        document.body.innerHTML = `
            <form id="testForm">
                <input type="text" name="name">
                <button type="submit">Submit</button>
            </form>
        `;
        
        // Act
        const form = document.getElementById('testForm');
        const submitBtn = form.querySelector('button[type="submit"]');
        submitBtn.click();
        
        // Assert
        expect(document.querySelector('.consent-modal')).toBeInTheDocument();
    });
    
    test('should submit form after consent confirmation', () => {
        // Arrange
        // ... similar setup
        
        // Act
        submitBtn.click();
        confirmBtn.click();
        
        // Assert
        expect(formSubmitSpy).toHaveBeenCalled();
    });
});

Conclusion

  1. Main changes: New requirements for user consent to the processing of personal data transition from a simple button click to a two-stage process with preliminary information.

  2. Technical implementation: For minimal effort, it is recommended to use JavaScript to manage form state and create modal windows that appear when the submit button is clicked.

  3. Step-by-step approach: First, adapt the most critical forms, create a consent modal window template, and then gradually implement the solution across the site.

  4. Testing: Thoroughly test the new mechanism, checking all usage scenarios and compliance with legal requirements.

  5. Next steps: After implementing the two-stage mechanism, consider adding additional features such as the ability to withdraw consent, manage data storage periods, and provide users with access to their personal data.

Proper implementation of user consent requirements will not only ensure legal compliance but also increase visitor trust in your website, demonstrating transparency and respect for their privacy rights.

Sources

  1. Federal Law №152-FZ “On Personal Data”
  2. Roskomnadzor - Processing of Personal Data
  3. Garant - Commentary to 152-FZ
  4. Pravo.ru - Requirements for Consent to the Processing of Personal Data
  5. Habr - Implementing GDPR on a Website
What are the requirements for the text of consent for processing personal data according to 152-FZ?Can ready-made solutions be used for managing consent to personal data?How to ensure accessibility of the consent modal window for users with disabilities?What are the risks of non-compliance with new requirements for personal data consent?How to integrate a mechanism for withdrawing user consent for processing personal data?How to check if the site complies with new requirements for processing personal data?
Ask NeuroAgent