In den ersten drei Tutorials haben wir einen Blog mit Menü und Über uns Seite erstellt. Unser Blog verfügt nun auch über eine Gallery, welche wir mit swiper als Fieldset implementiert haben. Wir wollen den Blog weiter ausbauen und ein Formular für die Kommunkation mit den Nutzenden hinzufügen. Zudem wollen wir den Titel und den Footer des Blogs konfigurierbar machen. Dazu werden wir globale Einstellungen hinzufügen.

Formulare konfigurieren

Formulare sind fester Bestandteil des Statamic CMS. wir wollen für unseren Blog ein einfaches Kontaktformular erstellen und die Einsendungen als Email versenden. Dazu logen wir uns im Statamic Control Panel an und navigieren auf Forms -> Create form. Wir erstellen ein neues Formular und nennen es Kontakt (handler: contact). Wir werden weitergeleitet um das Formular zu konfigurieren.

Wir möchten die Information gerne als Email erhalten und klicken auf "Add Email". Aktuell konfigurieren wir nur die Empfänger-Addresse (Recipient) und belassen die anderen Einstellungen. Um das Formular zu erstellen, klicken wir auf Blueprint -> edit. Ähnlich wir für unsere Collection können wir auch für unsere Formulare eine Blueprint generieren. Wir fügen drei Felder in die Blueprint ein: Name (text), Email (text) und Nachricht mit dem Handler message (textarea).

Wir speichern das ganze und haben soeben unser erstes Formular erstellt. Formulare können viel komplexer sein, als unser Kontaktformular. Es können Mitgliedsanträge sein, Bestellformulare oder Anmedlungen für eine Veranstaltung.

Mail konfigurieren

Damit wir unser Formular als Email versenden können, müsse wir einen mailer für Statamic konfigurieren. Dabei können wir die mail() Funktion von php verwenden, konfigurieren aber besser ein SMTP-Server. Wenn wir die Mails über einen SMTP-Server versenden, ist die Chance grösser, dass sie nicht als Spam markiert werden. Zudem funktioniert dies auch auf einer lokalen Maschine.

Wir brauchen dafür einen funktionierenden SMTP Account. Die Details für den Account können wir im .env File hinterlegen. Ab Linie 39 finden wir die Optionen, die wir anpassen müssen.

MAIL_MAILER=smtp
MAIL_HOST=localhost
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

Formular darstellen

Fehlt nur noch, dass wir unser Formular auf der Webseite einbinden können. Dazu erstellen wir ein Template, welches das Formular rendert und an eine Page angehängt wird. Erstellen wir zuerst ein Template /resources/views/forms/contact.antlers.html.

{{ form:contact }}
    {{ if success }}
    <div class="bg-green-300 text-white p-2">
        Besten Dank für deine Nachricht
    </div>
    {{ /if }}

    {{ fields }}
    <div class="p-2">
        <label>
            {{ display }}
            {{ if validate | contains:required }}
                <sup class="text-red">*</sup>
            {{ /if }}
        </label>
        <div>{{ field }}</div>
        {{ if error }}
            <p class="text-red-500">{{ error }}</p>
        {{ /if }}
    </div>
    {{ /fields }}
    <div class="p-2"><input type="submit" value="Abschicken" class="bg-blue-800 hover:bg-blue-700 text-white font-bold p-1.5 rounded"> </div>
{{ /form:contact }}

Das {{ form:contact }} Tag lädt unser Formular und iteriert anschliessend durch all die in der Blueprint konfigurierten {{ fields }}. Wir geben in Label den konfigurierten Name des Feldes aus und rendern das Feld mittels dem {{ field }} Tag. Falls Statamic ein Fehlerhafte Eingabe durch die User:in feststellt wird mittels {{ error }} der entsprechende Fehler ausgegeben. Die Regeln pro Feld können wir in der Blueprint -> Feld unter Validierung festlegen.

Nun erstellen wir im Statamic Control Panel eine neue Page "Contact" und wählen als Template forms/contact. Die Contact Page verknüpfen wir in der Navigation und unser Formular ist verfügbar.

Kontaktform versenden

Wenn wir nun unser Kontaktformular versenden, dann werden als erstes die ausgefüllten Felder geprüft. Werden alle definierten Validation Rules erfüllt, dann wird eine Email zusammengestellt und versendet.

Neben dem Email, werden die Daten auch in Statamic gespeichert. Dies insofern wir Store Submissions in der Konfiguration des Formulars nicht deaktiviert haben. Wir können alle Einsendungen anschauen und herunterladen. Dazu loggen wir uns im Control Panel ein und navigieren auf Forms -> Kontakt. Wir sehen nun eine Liste aller Einsendungen.

Globals

Unser Blog hat aktuell einen hard-coded Header "Fresh blog ✌️". Dieser Text steht direkt im Template und kann nur durch eine Modifizierung des Antlers Templates angepasst werden. Die meisten Webseiten haben solche Globalen Einstellungen, wie Titel der Seite, verwendete Hintergrundfarbe, Header Bilder oder Error Messages. Meist möchte man dies nicht fix in das Template schreiben, sondern konfigurierbar machen. Dazu kennt Statamic Globals. Globals sind Elemente, auf die unabhängig vom Kontext des Seitenaufrufen zugegriffen werden kann.

Für unseren Blog möchten wir gerne den Header Title, den Footer Text und Erfolgsmeldung nach dem versenden eines Formulars konfigurierbar machen. Dazu erstellen wir ein neues Globales Set über Globals -> Create Globals set und nennen es Config. Globals werden wiederum über Blueprints gesteuert. Wir erstellen in der Blueprint drei Felder mit dem Feldtype Text für den Header (handler: header_title), den Footer (handler: footer_text) und die Nachricht nach dem Versand des Formulars (handler: success_contact). Wir speichern unser globales Set. Wenn wir nun auf Globals -> config navigieren können wir den Titel, den Text für den Footer und die Nachricht angeben.

Globals nutzen

Globals stehen anders als andere Komponenten global in Statamic zur Verfügung. Wir können sie einfach über {{ config:header_title }} abrufen, egal in welchem Partial oder Layout wir gerade sind. Wir editieren unser partial /resources/views/partials/header.antlers.html

<header class="min-w-full  py-8 border-b">
    <div class="flex justify-center">
        <a href="/" role="banner" class="text-5xl font-light">{{ config:header_title }}</a>
    </div>
    <nav class="w-full flex justify-center">
        <ul class="flex">
            {{ nav handle="header_navigation" include_home="true" }}
            <li class="p-2">
                <a href="{{ url }}"{{ if is_current || is_parent }} class="active"{{ /if }}>
                    {{ title }}
                </a>
            </li>
            {{ /nav }}
        </ul>
    </nav>
</header>

Danach editieren wir noch unser /resources/views/partials/footer.antlers.html

<footer class="min-w-full flex justify-center py-8">
    <p class="text-sm">{{config:footer_text}}</p>
</footer>

Als letztes wollen wir die config in unserem Kontaktformular nutzen.

{{ form:contact }}
    {{ if success }}
    <div class="bg-green-300 text-white p-2">
        {{ config:success_message }}
    </div>
    {{ /if }}

    {{ fields }}
    <div class="p-2">
        <label>
            {{ display }}
            {{ if validate | contains:required }}
                <sup class="text-red">*</sup>
            {{ /if }}
        </label>
        <div>{{ field }}</div>
        {{ if error }}
            <p class="text-red-500">{{ error }}</p>
        {{ /if }}
    </div>
    {{ /fields }}
    <div class="p-2"><input type="submit" value="Abschicken" class="bg-blue-800 hover:bg-blue-700 text-white font-bold p-1.5 rounded"> </div>
{{ /form:contact }}

Thats it! Nutzer*innen von Statamic können nun über Globals vormals fix verbaute Textbausteine steuern. So können wir der Nutzer:in des CMS Kompetenzen übertragen und den Blog flexibel erweitern.