Einfaches Kontaktformular für Kirby

Nicht ohne Stolz wird verlautbart: Ab sofort steht eine sehr simple, aber funktionierende Kontaktseite zur Verfügung.

Der Einbau des Formulars

Als Basis dient das Plain contactform example for Kirby 2 von Bastian Allgeier.

Benötigte Dateien

Folgende Dateien werden unbedingt benötigt:

  • Einen Ordner 3-contact 1 in /content
  • Eine Datei contact.txt in /content
  • Eine Datei contact.php in /site/controllers
  • Eine Template-Datei contact.php in /site/templates
  • Ein Snippet contactmail.php in /site/snippets
  • Einen Ordner thank-you im Ordner /contact2
  • Eine Datei thank-you.txt im Ordner /content/contact/thank-you2

1) Die Nummerierung ist an eure gewünschte Position im Hauptmenü anzupassen. Somit können alle Dateien mittels FTP auf den Server hochgeladen werden und das Formular ist sofort aktiv (ohne Änderungen im Panel).
2) Wenn man sich punktgenanu an diese Vorgaben bzw. Vorlagen hält, dann braucht man zusätzlich:

  • Einen Ordner thank-you im Ordner /contact
  • Eine Datei thank-you.txt im Ordner /content/thank-you

Diese beiden Dateien brauch man wegen den Zeilen 36–39 in der Datei controllers/contact.php

// try to send it and redirect to the
      // thank you page if it worked
      if($email->send()) {
        go('contact/thank-you');

Erforderliche Anpassungen

Minimale Anpassungen damit das Formular auch funktioniert: Die EMail-Adressen unter 'to' und 'from' in Zeile 30–31 der Datei controllers/contact.php – Fertig!

Empfohlene Anpassungen

Will man auf der Formularseite noch eine Intro oder etwas erklärenden Text einfügen, sollte das nicht direkt im PHP erfolgen. Die schönere und stabilere Methode ist es vor der Codezeile <main class= … die folgende Zeile reinzuflicken:

  • <?php snippet('article') ?>

Ohne diese Codezeile könnt ihr im Panel reinschreiben was ihr wollt. Es wird nicht ausgegeben werden.

CSS

Soll das Formular wenigstens halbwegs professionell aussehen, sind ein paar Zeilen CSS notwendig. Dazu habe ich mich für inline css entschieden. Das ist zwar nicht die eleganteste Lösung, hat aber trotzdem seine Vorteile:

  • Bei fehlehaften CSS wird nur das Formular zerstört und nicht das ganze Theme.
  • Das Formular ist fast überall einsetzbar und Aktualisierungen (updates) des Themes kann man gelassen entgegen sehen.

Diese Methode ist laut W3schools nur sparsam anzuwenden. Falls die Cascading Style Sheets doch umfangreicher werden, wäre es besser eine eigene Datei wie etwa contact.css anzulegen und diese im Header einzubinden.

Meine Datei templates/contact.php

Version 1.0
<?php snippet('header') ?>
  <div class="wrap">
  <?php snippet('article') ?>
    <main class="main" role="main">
      <form style="border:1px solid grey; padding:20px; margin-top:1em;" method="post">
      <?php if($alert): ?>
        <div class="alert">
          <ul>
           <?php foreach($alert as $message): ?>
          <li><?php echo html($message) ?></li>
          <?php endforeach ?>
          </ul>
        </div>
      <?php endif ?>
      <div class="field">
        <label for="name">Name</label><br>
        <input style="margin-bottom:1em;" type="text" id="name" name="name">
      </div>
      <div class="field">
        <label for="email">Email</label><br>
        <input style="margin-bottom:1em;" type="email" id="email" name="email" required>
      </div>
      <div class="field">
        <label for="text">Nachricht</label>
        <textarea id="text" style="width:100%; min-height:100px; display:block; float:left; margin-bottom:2em;" name="text" required></textarea>
      </div>
      <input style="border:1px solid grey;" type="submit" name="submit" value="senden">
      </form>
    </main>
  </div>
<?php snippet('footer') ?>
Update 29.01.2018

Zu den Eingabefeldern (<input…> wurden die Elemente (richtige Bezeichnung?) onfocus="this.value=''" value="Dein Name/EMail/Nachricht" hinzugefügt

Beispiel:
<input type="text" onfocus="this.value=''" value="IhrName" id="name" name="name">

Dadurch erhalten die Eingabefelder einen vorgefertigten Text wie Ihr Name, der jedoch verschwindet sobald man in das Feld klickt (den focus lenkt).

Falls Fragen zum Thema auftauchen oder ihr mir sonstwas mitteilen wollt, dann könnt ihr gerne mein ultracooles Kontaktformular verwenden ;-)


Next
Das Kirby Theme KompactPro

Follow me ô¿ô