Brevo Newsletter-Formular barrierefrei in WordPress einbinden

Inhaltsverzeichnis

Stell dir vor, du möchtest dich für einen Newsletter anmelden, kannst aber das Formular nicht bedienen. Genau das kann passieren, wenn Barrieren im Formular sind.

Barrierefreiheit ist nicht nur ethisch richtig, sondern für viele Unternehmen auch gesetzlich verpflichtend. Das Barrierefreiheitsstärkungsgesetz (BFSG) fordert, dass digitale Produkte für Menschen mit Behinderungen zugänglich sind.

Probleme Standard Brevo-Formular

Warum kann ich nicht einfach das vorgefertigte Formular nehmen? Ich möchte ja nur ein E-Mail-Eingabefeld und das war’s. Nur ein paar Klicks in Brevo und schon ist es fertig. So leicht ist es leider nicht.

Im Standard-Formular gibt es einige Barrieren:

Zu geringer Farbkontrast von Verlinkungen und kleinem Text
Rahmen vom Eingabefeld hat zu geringen Farbkontrast
Der Fokusrahmen ist kaum sichtbar
Autocomplete ist ausgeschaltet
E-Mail hat den Eingabetyp “Text” statt “E-Mail”
Die Fehlermeldungen sind nicht mit dem Feld verknüpft und für Screenreader gibt es keine Rückmeldung.
Bei erfolgreicher Anmeldung wird man nicht zu einer neuen Seite weitergeleitet. (Best Practice)

Wie du es besser machst, erfährst du Schritt für Schritt.

Schritt 1: Brevo-Formular

Ich dachte, wir wollten ein eigenes Formular erstellen? Ja schon, aber wir brauchen den Teil, der die Daten aus unserem Formular an Brevo weiterleitet.

Dafür erstellst du dein Brevo-Formular mit E-Mail-Eingabefeld und gehst die Schritte von Brevo durch bis zum Punkt “Teilen”. Dort bekommst du mehrere Möglichkeiten dein Formular zu teilen. Wir interessieren uns für das Einbetten mit HTML, um genau zu sein um die action-URL. Bevor du den ganzen Code durchsuchst, kannst du mit “STRG” + “F” das Wort “action” suchen. Das, was danach angezeigt wird, kopierst du dir raus. Es wird eine recht lange URL sein.

Screenshot einer Website mit viel Code, dabei ist im Code das Wort "action" markiert und oben ist eine Suchmarke mit "action". — Screenshot

Als nächstes brauchst du noch das name-Attribut der Eingabefelder. Wenn du, so wie in diesem Beispiel, nur die E-Mail verwendest, dann ist das: name= “EMAIL”

Schritt 2: HTML

Wir erstellen unser Formular von Grund auf neu. Diesen Code kannst du in Gutenberg (WordPress) einfügen, indem du das Element “Individuelles HTML” suchst und auswählst.

Ich erkläre dir hier Zeile für Zeile. Den ganzen HTML-Code findest du weiter unten.

Formular

<form id="sib-form" onsubmit="submitForm()">

Normalerweise würden wir ein Formular mit einer action= “…” nutzen, aber da wir zum einen die Daten an Brevo weitergeben müssen und zum anderen auf eine “Das hat geklappt”-Seite weiterleiten wollen, müssen wir das selbst bauen. Die Funktion schreiben wir später in JavaScript.

Felder

<label for="EMAIL">Deine E-Mail (Pflichtfeld)</label>
<input type="email" id="EMAIL" name="EMAIL" autocomplete="email" required aria-required="true" aria-describedby="email-error">
<span id="email-error" class="error" aria-live="assertive"></span>

Das Label verknüpfen wir mit dem Eingabefeld. Dabei markieren wir das Pflichtfeld direkt. Hier ist wichtig, dass wir das name-Attribut richtig angeben. Autocomplete hilft bei der automatischen Vervollständigung. Das Required- und aria-required-Attribut wird ergänzt, um das Feld programmatisch als Pflichtfeld zu markieren.

Unsere Fehlermeldung verbinden wir mit aria-describedby. Die Fehlermeldung wird später im span-Element angezeigt. aria-live=“assertive“ stellt sicher, dass Fehler sofort vom Screenreader vorgelesen werden.

<p>Indem du das Formular absendest, erklärst du dich einverstanden, dass die von dir angegebenen persönlichen Informationen an Brevo zur Bearbeitung übertragen werden gemäß den <a href="https://www.brevo.com/de/legal/privacypolicy/" target="_blank" rel="nofollow noopener">Datenschutzrichtlinien von Brevo.</a></p>
<p class="form-block">Du kannst den Newsletter jederzeit über den Link im Newsletter abbestellen.</p>

Das ist der rechtliche Teil für den Datenschutz.

Senden-Button

<button type="submit" class="bricks-button">           
    Anmelden
</button>

Der Absenden-Button mit type= “submit”. Hier gibt es nicht viel zu sagen, außer, dass du, genau wie bei allen anderen Elementen, beliebige Klassen für das Styling hinzufügen kannst.

Gesamter HTML-Code

<form id="sib-form" onsubmit="submitForm()">
    <label for="EMAIL">Deine E-Mail (Pflichtfeld)</label>
    <input type="email" id="EMAIL" name="EMAIL" autocomplete="email" required aria-required="true" aria-describedby="email-error">
    <span id="email-error" class="error" aria-live="assertive"></span>
    
    <p>Indem du das Formular absendest, erklärst du dich einverstanden, dass die von dir angegebenen persönlichen Informationen an Brevo zur Bearbeitung übertragen werden gemäß den <a href="https://www.brevo.com/de/legal/privacypolicy/" target="_blank" rel="nofollow noopener">Datenschutzrichtlinien von Brevo.</a></p>
    <p class="form-block">Du kannst den Newsletter jederzeit über den Link im Newsletter abbestellen.</p>

    <button type="submit" class="bricks-button">
        Anmelden
    </button>
</form>

Schritt 3: CSS

Du kannst dein Formular beliebig stylen. Achte nur darauf, dass dein Farbkontrast groß genug ist. Falls das Fallback-Styling für Fokusrahmen etc. noch nicht passend ist, dann musst du es hier extra hinzufügen.

Solltest du deine Farben als Variablen hinterlegt haben, dann passe das hier an.

input {
    border: 2px solid black;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    background-color: white;
}

.form-mail {
    display: flex;
    justify-content: center;
    max-width: 500px;
    @media(max-width:800px){
        margin: 3em 0 3em 0;
    }
}

/* invalid fields */
input.invalid {
    border: 2px solid #5C0000;
    background-color: #ffdddd;
    color: #5C0000;
}

/* error messages */
.error {
    width: auto;
    color: white;
    background-color: #990000;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    display: block;
}

.error.active {
    padding: 0.3em; 
}

.form-block{
    margin-bottom: 15px;
}

Schritt 4: JavaScript

Jetzt kommen wir zum spannenden Teil. Unten findest du den gesamten JavaScript-Code.

Der Teil des Codes sollte unterhalb vom HTML- und CSS-Code sein, deshalb wähle in Gutenberg ein neues “Code”-Element aus und füge es unter das Code-Element von HTML und CSS hinzu.

Dynamische Validierung nach Verlassen des Eingabefeldes

Da wir den Code eh selbst schreiben, können wir Best Practice ansetzen und die Eingabe nach Verlassen (“blur”) direkt validieren.

const form = document.querySelector("form");
const email = document.getElementById("EMAIL");
const emailError = document.querySelector("#EMAIL + span.error");

email.addEventListener("blur", (event) => {
    if (email.validity.valid) {
    emailError.textContent = ""; // Remove the message content
    emailError.className = "error"; // Removes the `active` class
    } else {

    // If there is still an error, show the correct error
    showError();
    }
});

Fehlermeldung anzeigen

form.addEventListener("submit", (event) => {

    // if the email field is invalid
    if (!email.validity.valid) {
    // display an appropriate error message
    showError();
    // prevent form submission
    event.preventDefault();
    }
});

function showError() {
    if (email.validity.valueMissing) {
        // If empty
        emailError.textContent = "Bitte gib eine E-Mail-Adresse ein.";
    } else if (email.validity.typeMismatch) {
        // If it's not an email address,
        emailError.textContent = "Bitte gib eine gültige E-Mail-Adresse ein.";
    }
    // Add the `active` class
    emailError.className = "error active";
}

Daten an Brevo leiten und Weiterleitung

Du hattest ganz am Anfang dir die URL von action= “…” kopiert. Die brauchen wir hier. Zudem brauchst du die URL, auf die weitergeleitet werden soll, nachdem das Formular abgesendet wird.

function submitForm(){
    const form = document.getElementById("sib-form"); 
    const formData = new FormData(form);
    const firstUrl = 'https://bf21db2c.sibforms.com/serve/…'; // Add your action URL from Brevo
    const secondUrl = '...'; // Add your redirect URL
    
    event.preventDefault(); // Stop the normal form submission
    
    // Convert FormData to URL-encoded string for the background request
    const urlEncodedData = new URLSearchParams(formData).toString();

    // Send data to newsletter provider in the background
    fetch(firstUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: urlEncodedData,
    })

    .then(response => {
        // After successful submission to newsletter provider
        // Redirect to your second URL
        window.location.href = secondUrl;
    })

    .catch(error => {
        console.error('Submission failed:', error);
        // Even if it fails, you might still want to redirect
        window.location.href = secondUrl;
    });
}

Gesamter JavaScript-Code

Achtung: Du musst noch deine action-URL und Weiterleitungs-URL einfügen, ansonsten funktioniert der Code nicht.

const form = document.querySelector("form");
const email = document.getElementById("EMAIL");
const emailError = document.querySelector("#EMAIL + span.error");

email.addEventListener("blur", (event) => {
    if (email.validity.valid) {
    emailError.textContent = ""; // Remove the message content
    emailError.className = "error"; // Removes the `active` class
    } else {

    // If there is still an error, show the correct error
    showError();
    }
});

form.addEventListener("submit", (event) => {

    // if the email field is invalid
    if (!email.validity.valid) {
    // display an appropriate error message
    showError();
    // prevent form submission
    event.preventDefault();
    }
});

function showError() {
    if (email.validity.valueMissing) {
        // If empty
        emailError.textContent = "Bitte gib eine E-Mail-Adresse ein.";
    } else if (email.validity.typeMismatch) {
        // If it's not an email address,
        emailError.textContent = "Bitte gib eine gültige E-Mail-Adresse ein.";
    }
    // Add the `active` class
    emailError.className = "error active";
}

function submitForm(){
    const form = document.getElementById("sib-form"); 
    const formData = new FormData(form);
    const firstUrl = 'https://bf21db2c.sibforms.com/serve/…'; // Add your action URL from Brevo
    const secondUrl = '...'; // Add your redirect URL
    
    event.preventDefault(); // Stop the normal form submission
    
    // Convert FormData to URL-encoded string for the background request
    const urlEncodedData = new URLSearchParams(formData).toString();

    // Send data to newsletter provider in the background
    fetch(firstUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: urlEncodedData,
    })

    .then(response => {
        // After successful submission to newsletter provider
        // Redirect to your second URL
        window.location.href = secondUrl;
    })

    .catch(error => {
        console.error('Submission failed:', error);
        // Even if it fails, you might still want to redirect
        window.location.href = secondUrl;
    });
}

Fertig

Ganz wichtig: Vergiss nicht das Formular zu testen und schaue, ob alles so klappt, wie es soll.

Dann hast du es auch schon geschafft: Du hast ein barrierefreies Newsletter-Formular erstellt. Das Gute ist, dass du diese Vorlage für beliebig viele Brevo- Formulare nutzen kannst.

Wenn du dich zu meinem Newsletter anmelden möchtest, dann kannst du gleich das Formular ausprobieren. Über den Newsletter bekommst du Infos zu aktuellen Angeboten und Veranstaltungen.