Konstantin Filtschew

Sende Newsletter Registration for Twenty Twenty-Four Wordpress Theme

Sendy Newsletter Formular in WordPress ohne Plugin einbinden

—

von

Konstantin Filtschew
in ,

In WordPress gibt es für alles ein Plugin – wie für Sendy auch. Aber einfache Aufgaben kannst du auch ohne ein Plugin lösen. Dafür musst du auch nicht den Entwickler bitten, sein Plugin anzupassen. Die vollständige Lösung zum „Kopieren und Einfügen“ für das Twenty Twenty-Four Theme findest du weiter unten. Wir erarbeiten uns aber hier zusammen die Lösung, damit du es für dein gerade verwendetes Theme anpassen kannst und vor allem verstehst, dass es nicht so schwer/aufwendig ist.

Basis Sendy HTML Formular

Sendy erlaubt es durch ein einfaches HTML Formular, neue Registrierungsanfragen für deinen Newsletter zu erstellen. Diese Formular sieht in der Regel wie folgt aus:

<div id="sendy-newsletter" class="">
  <form action="https://<LIST-URL>/subscribe" method="POST" accept-charset="utf-8" class="">
    <label for="name">Name</label><br />
    <input type="text" name="name" id="name" class="" placeholder="Dein Name"/>
    <br />
    <label for="email">Email</label><br />
    <input type="email" name="email" id="email" class="" placeholder="Deine E-Mail Adresse"/>
    <br /><br />
    <input type="checkbox" name="gdpr" id="gdpr"/>
    <label for="gdpr">
      <strong>Newsletter Zustimmung:</strong>
      Ich stimme zu, Neuigkeiten in Form von E-Mails zu erhalten.
    </label>
    <br /><br />
    <div style="display:none;">
      <label for="hp">HP</label><br />
      <input type="text" name="hp" id="hp"/>
    </div>
    <input type="hidden" name="list" value="<LIST-ID>"/>
    <input type="hidden" name="subform" value="yes"/>
    <input type="submit" name="submit" id="submit" class="" value="Anmelden"/>
  </form>
</div>

Fügt du nun dieses HTML auf eine Seite oder im Footer deiner WordPress Seite als Widget ein, dann erscheint ein einfaches Anmeldeformular für den Newsletter.

Je nachdem ob du CSS für Eingabefelder (<input />) schon hast, sieht das Formular mehr oder weniger gut formatiert aus. So sieht es bei mir ohne passende CSS Regeln aus:

Sendy Subscribe Form without formatting

Wie im Bild zu sehen ist, ist die Schrift ist im Verhältnis zum Formular zu groß, die Eingabefelder so wie der „Anmelden“ Knopf zu klein und sehen je nach verwendetem Webbrowser verschieden aus.

Eingaben und Labels durch DIVs zusammenfassen

Damit du das Newsletter Formular indviduell gestalten und deinem verwendetem WordPress Theme anpassen kannst, solltest du es am besten anpassen und die Zeilenumbrüche (über <br />) durch div-Elemente ersetzen, welche du dann ansteuern und individuell gestalten kannst. Das ermöglicht dir Abstände zwischen dem Eingabefeldern feiner zu definieren. Der HTML-Code sieht dann wie folgt aus:

<div id="sendy-newsletter" class="">
  <form action="https://<LIST-URL>/subscribe" method="POST" accept-charset="utf-8" class="">
    <div class="">
      <label for="name">Name</label><br />
      <input type="text" name="name" id="name" class="" placeholder="Dein Name"/>
    </div>
    <div class="">
      <label for="email">Email</label><br />
      <input type="email" name="email" id="email" class="" placeholder="Deine E-Mail Adresse"/>
    </div>
    <div class="">
      <input type="checkbox" name="gdpr" id="gdpr"/>
      <label for="gdpr">
        <strong>Newsletter Zustimmung:</strong>
        Ich stimme zu, Neuigkeiten in Form von E-Mails zu erhalten.

      </label>
    
    </div>
    <div style="display:none;">
      <label for="hp">HP</label><br />
      <input type="text" name="hp" id="hp"/>
    </div>
    <input type="hidden" name="list" value="<LIST-ID>"/>
    <input type="hidden" name="subform" value="yes"/>
    <input type="submit" name="submit" id="submit" class="" value="Anmelden"/>
  </form>
</div>

An dem Aussehen des Formulars sollte sich nichts entscheidend ändern. Was sich aber jetzt geändert hat, dass du Klassen für die jeweiligen Elemente und deren Gruppierungen definieren kannst, um es über CSS gestalten zu können.

CSS Klassen im HTML Code definieren

Jetzt haben wir die HTML-Elemente entsprechend separiert, um sie über CSS gut gestalten zu können. Es fehlen noch die Namen, über die wir im Anschluss die Gestaltung vornehmen können. Diese können z.B. wie folgt aussehen:

<div id="sendy-newsletter" class="newsletter-form-container">
  <form action="https://<SENDY-URL>/subscribe" method="POST" accept-charset="utf-8" class="newsletter-form">

    <div class="newsletter-form-field">
      <label for="name" class="newsletter-form-label">Name</label>
      <input type="text" name="name" id="name" class="newsletter-form-input" placeholder="Dein Name"/>
    </div>

    <div class="newsletter-form-field">
      <label for="email" class="newsletter-form-label">Email</label>
      <input type="email" name="email" id="email" class="newsletter-form-input" placeholder="Deine E-Mail Adresse"/>
    </div>

    <div class="newsletter-form-checkbox">
      <input type="checkbox" name="gdpr" id="gdpr" class="newsletter-form-checkbox-input"/>
      <label for="gdpr" class="newsletter-form-checkbox-label">
        <strong>Newsletter Zustimmung:</strong>
        Ich stimme zu, Neuigkeiten in Form von E-Mails zu erhalten.
      </label>
    </div>

    <div style="display:none;">
      <label for="hp">HP</label>
      <input type="text" name="hp" id="hp"/>
    </div>

    <input type="hidden" name="list" value="<LIST-ID>"/>
    <input type="hidden" name="subform" value="yes"/>

        <input type="submit" name="submit" id="submit" class="newsletter-submit-button" value="Anmelden"/>
      </div>
    </div>
  </form>
</div>

Damit können die einzelnen Elemente über CSS gestaltet werden wie etwa:

/* Newsletter Form Container */
.newsletter-form-container {
  max-width: 500px;
  margin: 2rem auto;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Form Fields */
.newsletter-form-field {
  margin-bottom: 1.5rem;
}

.newsletter-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.newsletter-form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.newsletter-form-input:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

/* Checkbox Section */
.newsletter-form-checkbox {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.newsletter-form-checkbox-input {
  margin-top: 0.25rem;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.newsletter-form-checkbox-label {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
  cursor: pointer;
}

/* Submit Button */
.newsletter-submit-button {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: #0073aa;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.newsletter-submit-button:hover {
  background: #005a87;
}

.newsletter-submit-button:active {
  transform: translateY(1px);
}

Den HTML Code bzw. das CSS kannst du anschließend nutzen, um das Newsletter Anmeldeformular deinem Wünschen anzupassen. Es sollte auch relativ gut klappen, wenn du das HTML und/oder das CSS einer KI gibst und deine Wünsche für Anpassungen äußerst.

In meinem Fall verwende ich aber das Twenty Twenty-Four Theme von WordPress. Das verwendet den WordPress Block Builder und bietet über WordPress globale Presets für Spacing, die ich hier einsetzen möchte.

Sendy Formular für das Tewnty Twenty-Four Theme

Ich möchte möglichst viel der bestehenden CSS-Klassen von dem Theme verwenden und ggf. neue Klassen hinzufügen, wie z.B. für Eingabefelder, um das Formular dem Twenty Twenty-Four Theme anzupassen.

Als ersten Schritt verwende ich bestehenden Buttons für den „Anmelden“-Knopf:

<div id="sendy-newsletter" class="wp-block-group newsletter-form-container">
  <form action="https://<SENDY-URL>/subscribe" method="POST" accept-charset="utf-8" class="newsletter-form">

    <div class="newsletter-form-field">
      <label for="name" class="newsletter-form-label">Name</label>
      <input type="text" name="name" id="name" class="newsletter-form-input" placeholder="Dein Name"/>
    </div>

    <div class="newsletter-form-field">
      <label for="email" class="newsletter-form-label">Email</label>
      <input type="email" name="email" id="email" class="newsletter-form-input" placeholder="Deine E-Mail Adresse"/>
    </div>

    <div class="newsletter-form-checkbox">
      <input type="checkbox" name="gdpr" id="gdpr" class="newsletter-form-checkbox-input"/>
      <label for="gdpr" class="newsletter-form-checkbox-label">
        <strong>Newsletter Zustimmung:</strong>
        Ich stimme zu, Neuigkeiten in Form von E-Mails zu erhalten.
      </label>
    </div>

    <div style="display:none;">
      <label for="hp">HP</label>
      <input type="text" name="hp" id="hp"/>
    </div>

    <input type="hidden" name="list" value="<LIST-ID>"/>
    <input type="hidden" name="subform" value="yes"/>

    <div class="wp-block-buttons">
      <div class="wp-block-button">
        <input type="submit" name="submit" id="submit" class="wp-block-button__link wp-element-button" value="Anmelden"/>
      </div>
    </div>

  </form>
</div>

Das sieht schon mal nicht schlecht aus. Anschließend verwende ich die bestehenden CSS Presets für Spacing im CSS. Dieses CSS erfüllt meine minimalistischen Wünsche für die Gestaltung:

/* Newsletter Form Container */
.newsletter-form-container {
  padding-top: var(--wp--preset--spacing--10);
  padding-bottom: var(--wp--preset--spacing--10);
  background-color: var(--wp--preset--color--base);
  border-radius: 8px;
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
}

/* Form Fields */
.newsletter-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--0);
}

.newsletter-form-label {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--body);
}

.newsletter-form-input {
  /* width: 100%; */
  padding: var(--wp--preset--spacing--10);
  font-size: var(--wp--preset--font-size--medium);
  font-family: var(--wp--preset--font-family--body);
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

.newsletter-form-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--contrast);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.newsletter-form-input::placeholder {
  color: var(--wp--preset--color--contrast);
  opacity: 0.6;
}

/* Checkbox */
.newsletter-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--10);
}

.newsletter-form-checkbox-input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.newsletter-form-checkbox-label {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--body);
  line-height: 1.6;
  cursor: pointer;
}

/* Submit Button Alignment */
.newsletter-form .wp-block-buttons {
  margin-top: var(--wp--preset--spacing--10);
}

.newsletter-form .wp-block-button {
  width: 100%;
}

.newsletter-form .wp-block-button__link {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

Das Ergebnis sieht nach meiner Ansicht schon recht ordentlich:

Sende Newsletter Registration for Twenty Twenty-Four WordPress Theme

Fazit

Das Ergebnis sieht schon sehr ordentlich aus – wenn es auch kleine Verbesserungen noch gäbe. Diese recht einfache Lösung reduziert Abhängigkeiten zu Plugins (Drittanbieter), erspart Aktualisierungen von Plugins und spart damit auf lange Sicht eine Menge Zeit.

Zudem ist die Lösung beliebig als Widget im Footer, direkt auf einer Seite und in Blog-Beiträgen einsetzbar. Es erlaubt das Formular beliebig einzufügen und das zentrale CSS erlaubt es, das Aussehen zentral zu ändern.

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Die folgenden im Rahmen der DSGVO notwendigen Bedingungen müssen gelesen und akzeptiert werden:

Informationspflicht

Durch Abschicken des Formulares wird dein Name, E-Mail-Adresse und eingegebene Text in der Datenbank gespeichert. Für weitere Informationen wirf bitte einen Blick in die Datenschutzerklärung.