Elementor Pro Formular: Deutsches Datumsformat in E-Mails korrigieren

Das Problem

Viele WordPress-Nutzer, die Elementor Pro Formulare verwenden, kennen dieses Problem: Das Datumsfeld wird im Formular korrekt im deutschen Format angezeigt (z.B. 27.06.2025), aber in den empfangenen E-Mails erscheint das Datum plötzlich im amerikanischen Format (06/27/2025) oder als technisches Format (2025-06-27).

Dies kann besonders ärgerlich sein, wenn Sie professionelle Anfragen bearbeiten und das Datum für deutsche Kunden verwirrend dargestellt wird.

Die Ursache

Elementor Pro verwendet standardmäßig das HTML5 Date-Input-Element, welches intern immer das Format Y-m-d (Jahr-Monat-Tag) verwendet, unabhängig von der Anzeige im Browser. Beim Versenden der E-Mail wird dann dieses interne Format übernommen, anstatt des vom Nutzer gewünschten deutschen Formats.

Die Lösung: Vollständiger Code-Fix

Hier ist eine umfassende Lösung, die sowohl die Anzeige im Formular als auch das Format in den E-Mails korrigiert:

Schritt 1: Code-Installation

Option A: Mit dem Code Snippets Plugin (empfohlen)

1. Installieren Sie das kostenlose Plugin “Code Snippets”
2. Gehen Sie zu Snippets > Neu hinzufügen
3. Fügen Sie den unten stehenden Code ein
4. Titel: “Elementor Deutsches Datumsformat”
5. Speichern & Aktivieren

Option B: In der functions.php

1. Gehen Sie zu Design > Theme-Editor > functions.php
2. Fügen Sie den Code am Ende der Datei hinzu
3. Datei aktualisieren

Schritt 2: Der vollständige Code

// Elementor Pro: Deutsches Datumsformat für Formulare und E-Mails
add_action('wp_footer', function () {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Flatpickr Konfiguration (falls Elementor es verwendet)
    if (typeof flatpickr !== 'undefined') {
        flatpickr.setDefaults({
            dateFormat: "d.m.Y",
            locale: {
                firstDayOfWeek: 1, // Woche beginnt mit Montag
                weekdays: {
                    shorthand: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
                    longhand: [
                        'Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
                        'Donnerstag', 'Freitag', 'Samstag'
                    ]
                },
                months: {
                    shorthand: [
                        'Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
                    ],
                    longhand: [
                        'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
                        'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
                    ]
                }
            }
        });
    }
});
</script>
<?php
});

// Hook für E-Mail-Verarbeitung: Konvertiert Datum zu deutschem Format
add_action('elementor_pro/forms/new_record', function($record, $handler) {
    $fields = $record->get('fields');
    
    foreach ($fields as $field_id => $field) {
        // Prüft alle Felder, die "datum" oder "date" im Namen haben
        if ((stripos($field_id, 'datum') !== false || stripos($field_id, 'date') !== false) 
            && !empty($field['value'])) {
            
            $date_value = $field['value'];
            $date = false;
            
            // Versucht verschiedene Datumsformate zu parsen
            $formats = ['Y-m-d', 'm/d/Y', 'd/m/Y', 'd.m.Y'];
            
            foreach ($formats as $format) {
                $parsed = DateTime::createFromFormat($format, $date_value);
                if ($parsed && $parsed->format($format) === $date_value) {
                    $date = $parsed;
                    break;
                }
            }
            
            // Konvertiert zu deutschem Format
            if ($date) {
                $german_date = $date->format('d.m.Y');
                $record->update_field($field_id, 'value', $german_date);
            }
        }
    }
}, 10, 2);

// Backup-Filter für E-Mail-Inhalt
add_filter('elementor_pro/forms/email_content', function($email_content, $record) {
    $fields = $record->get('fields');
    
    foreach ($fields as $field_id => $field) {
        if ((stripos($field_id, 'datum') !== false || stripos($field_id, 'date') !== false) 
            && !empty($field['value'])) {
            
            $original_value = $field['value'];
            
            // Parse das Datum
            $date = DateTime::createFromFormat('Y-m-d', $original_value);
            if (!$date) {
                $date = DateTime::createFromFormat('m/d/Y', $original_value);
            }
            
            if ($date) {
                $german_date = $date->format('d.m.Y');
                // Ersetzt im E-Mail-Inhalt
                $email_content = str_replace('[field id="' . $field_id . '"]', $german_date, $email_content);
                $email_content = str_replace($original_value, $german_date, $email_content);
            }
        }
    }
    
    return $email_content;
}, 10, 2);

Anpassbare Datumsformate

Sie können das Datumsformat nach Ihren Wünschen anpassen. Hier sind die wichtigsten Optionen:

Format-Variablen:

• d: Tag mit führender Null (01-31)
• j: Tag ohne führende Null (1-31)
• m: Monat mit führender Null (01-12)
• n: Monat ohne führende Null (1-12)
• Y: Jahr, 4-stellig (z.B. 2025)
• F: Monatsname ausgeschrieben (Januar-Dezember)
• l: Wochentag ausgeschrieben (Montag-Sonntag)

Zusätzliche Verbesserungen

1. Woche beginnt mit Montag

Der Code stellt automatisch ein, dass die Woche mit Montag beginnt (deutsche Konvention), anstatt mit Sonntag (amerikanische Konvention).

2. Deutsche Monatsnamen

Alle Monats- und Wochentagsnamen werden auf Deutsch angezeigt.

3. 24-Stunden-Format für Uhrzeiten

Falls Sie auch Uhrzeitfelder verwenden, können Sie zusätzlich das 24-Stunden-Format aktivieren:

add_action('wp_footer', function () {
?>
<script>
// 24-Stunden-Format für Zeitfelder
if (typeof flatpickr !== 'undefined') {
    flatpickr('.elementor-time-field', {
        enableTime: true,
        noCalendar: true,
        dateFormat: "H:i",
        time_24hr: true
    });
}
</script>
<?php
});

Fehlerbehebung

Problem: Code funktioniert nicht

Lösung: Prüfen Sie, ob:

• Das Code Snippets Plugin aktiv ist
• Keine Caching-Plugins den Code modifizieren
• Die Field-ID in Ihrem Formular korrekt ist (z.B. “Geburtsdatum”, “datum”, etc.)

Problem: Nur teilweise Funktionalität

Lösung: Löschen Sie den Browser-Cache und testen Sie in einem Inkognito-Fenster.

Problem: Format wird nicht übernommen

Lösung: Prüfen Sie die Field-ID in Ihrem Elementor-Formular. Der Code funktioniert automatisch für alle Felder, die “datum” oder “date” im Namen haben.