Ab August wird hier es einen monatlichen Newsletter mit den neuesten Artikeln und Freebies geben. Da entgegen meiner Annahme nicht alle Welt RSS nutzt, soll es dieses zusätzliche Angebot geben. Ich selbst kann mir ein Leben ohne meine RSS-Feed-Sammling nicht mehr vorstellen, aber eine ganze Menge Leute arbeiten einfach nicht damit, Punkt. Für alle diejenigen – und für die, die es einfach nur bequem haben möchten – gibt’s den Newsletter.

Um das Ganze zu organisieren habe ich mich für einen externen Dienst entschieden, meine Wahl fiel auf CleverReach. Die CleverReach-Seite macht einen ganz guten Eindruck, ich habe mich einigermaßen gut zurechtgefunden. Es fehlte mir nur noch ein kleines Anmeldeformular für den Sidebar.

Formular Newsletter-Anmeldung einrichten

An dieser Stelle wurde es zäh. Zwar gibt es ein Word-Press-PlugIn, das man auf der CleverReach-Website downloaden kann. Über dieses PlugIn kann man die API (Schnittstelle) zur CleverReach-Website einrichten. Das PlugIn bietet auch ein Sidebar-Widget an. Nur leider: Der HTML-Code, den das PHP erzeugt, ist ein Albtraum.

Eine zweite Möglichkeit ist, sich einen Codeschnipsel vom Formular zu holen, das man bei CleverReach eingerichtet hat. CleverReach stellt den Code, den es erzeugt hat, zur Verfügung: Im Menü Empfänger/Formulare unter dem Reiter „Quelltext“.
Dieser Code ist nicht ganz so gruselig, aber immer noch ein ziemliches Monstrum. Das Formular ist in mehrere DIVs gewickelt und vollgestopft mit allerlei CSS-Klassen und Inline-Styles. Am Anfang des Schnipsels steht noch ein ausführliches Javascript, was die Sache nicht gerade handlicher macht.

Der Code für das Sidebar-Widget

Also habe ich mich ans Werk gemacht und eine praktikablere Lösung gebastelt. Mein Ziel war es, ein Stück Code zu haben, das ich in ein Sidebar-Widget einbauen kann. Damit kann ich das Formular bei Bedarf ein- oder ausblenden und ich kann seine Position in der Seitenleiste jederzeit verändern.

  • Javascript auslagern
    Als erstes habe ich das Javascript in eine eigene Datei ausgelagert. Die wohnt jetzt zusammen mit den anderen Javascripts in dem entsprechenden Ordner in meinem Theme. Dazu einfach den Code zwischen den beiden SCRIPT-Tags ausschneiden und in eine leere Textdatei kopieren. Die Datei nennt Ihr dann cleverreach.js. Wichtig ist die Dateiendung .js am Ende. Das Script bindet Ihr dann zum Beispiel in die header.php (oben im HEAD-Bereich) ein. Die header.php findet Ihr in Eurem Theme-Ordner.
  • Überflüssiges HTML und inline-Styles entfernen
    Ich brauche nur das Formular, also habe ich alle überflüssigen DIVs gelöscht. Auch die Inline-Styles fliegen raus. Die Formatierungen für das Formular werde ich in meinem Stylesheet vornehmen.
  • CSS-Styling vorbereiten
    Damit mein Stylesheet auch etwas hat, das es ansprechen kann, baue ich ein DIV mit der Klasse „newsletter“ drumherum. Dieses DIV wird dann auch mein Hintergrund-Bild aufnehmen.

Den HTML-Code habe ich in ein leeres (Text-)Widget kopiert, das Stylesheet in meinem Theme habe ich um drei Angaben ergänzt. Und fertig ist ein hübsches, übersichtliches Formular.

Der HTML-Code

<!---Javascript ausgelagert -->
<div class="newsletter">
<form action="http://12345.cleverreach.de/f/1234/wcs/" method="post">
<label class="itemname" for="text12345">E-Mail</label>
<input id="text12345" name="email" type="text" />
<button></button>
</form>
</div>

Achtung: Die IDs im Formular und der Link bei „action“ sind im Quellcode, den CleverReach erzeugt hat, vorgegeben. Die Angaben oben im Beispiel hier sind nur Platzhalter, Ihr müsst also darauf achten, dass hier auch die richtigen Angaben stehen. Den HTML-Code müsste Ihr also noch anpassen.

Das CSS dazu

div.newsletter{
background: url('images/bg_newsletter.png') no-repeat right top;
border:1px solid #eaeaea;
padding: 20px 12px 12px 12px;
}

div.newsletter input{
width: 220px;
height: 22px;
margin-bottom: 5px;
}
div.newsletter button{
text-align: left;
margin:5px 0 10px 0px;
width: 90px;height: 22px;
background: url('images/anmelden.png') no-repeat left center;
border:0;
cursor:pointer;
}

CleverReach oder MailChimp?

Ursprünglich wollte ich MailChimp ausprobieren, ich finde das Angebot sehr spannend. Aber für MailChimp gibt es keine deutsche Sprachversion. Meine Abonnenten sollen aber keine fremdsprachigen Mails bekommen. Gerade beim Anmeldeprozess finde ich es wichtig, dass man alle Texte gut lesen und verstehen kann.
Angeblich hat MailChimp eine deutsche Version in Arbeit. Aber das dauert wohl noch ein Weilchen.

Hinter CleverReach steht eine GmbH mit Sitz hier in Deutschland. Das heißt, alle datenschutzrechtlichen Anforderungen sind vorbildlich umgesetzt. Stichwort Double-Opt-In-Verfahren: Hier muss die Anmeldung noch einmal vom Empfänger bestätigt werden. Es reicht nicht, einfach nur seine Mailadresse im Formular zu hinterlassen. Man muss noch einmal ausdrücklich bestätigen, dass man einverstanden ist, den Newsletter zu bekommen. Selbstverständlich ist das Abmelden auch schnell und ohne Umstände möglich.