02.05.2025

Kontaktformular

Vision Kontaktformular Vorlage

Stand: 02.05.2025

Diese Vorlage ist standardmäßig in jedem Vision automatisch unter Kontakt enthalten.

<h1>Kontaktseite</h1>

<p> </p>

<div class="row">
    <div class="col-12 col-sm-6">
        <form method="POST">
            <div class="row">
                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <label for="form_vorname">Vorname *</label>
                        <input class="form-control" id="form_vorname" name="vorname" required="" type="text" />
                    </div>
                </div>

                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <label for="form_nachname">Nachname *</label>
                        <input class="form-control" id="form_nachname" name="nachname" required="" type="text" />
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <label for="form_email">E-Mail Adresse *</label>
                        <input class="form-control" id="form_email" name="email" required="" type="email" />
                    </div>
                </div>

                <div class="col-12 col-sm-6">
                    <div class="form-group">
                        <label for="form_telefon">Telefon Nr.</label>
                        <input class="form-control" id="form_telefon" name="telefon" type="text" />
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="form_betreff">Betreff *</label>
                <input class="form-control" id="form_betreff" name="betreff" required="" type="text" />
            </div>

            <div class="form-group">
                <label for="form_nachricht">Nachricht *</label>
                <textarea class="form-control" id="form_nachricht" name="nachricht" required="" rows="5"></textarea>
            </div>

            <hr />
            <div class="form-check">
                <input class="form-check-input" id="form_datenschutz" required="" type="checkbox" />
                <label class="form-check-label" for="form_datenschutz"> Hiermit erkläre ich mich mit der Verarbeitung der Daten gemäß der <a href="https://wiki.agentur-77.de//datenschutz/" target="_blank">Datenschutzerklärung</a> einverstanden.</label>
            </div>

            <hr /> 
           		<!-- Hier Captcha einfügen -->
            <p><small>Mit Sternchen (*) markierte Felder sind Pflichtfelder.</small></p>
            <button class="btn btn-primary" type="submit">Nachricht absenden</button>
        </form>
    </div>
</div>

Erklärungen

Method

Mit method="..." gibst du an, ob du Daten von einem Server abrufen möchtest "get" oder ob du Daten übermitteln "post" möchtest.

Label

Mit dem <label>Name:</label> kannnst du deinen Eingabefeldern jeweils noch eine Überschrift geben, damit der Benutzer weiß in welches Feld welche Information gehört.

Input

Mit dem <input type="..."> kannst du durch das Attribut "type" festlegen, welche Funktion dein Eingabefeld hat.
Das name="..."-Attribut ist im <Input>-Tag ein Pflicht und wird immer klein geschrieben.
Wenn man ein Pflichtfeld definieren möchte benutzt man das required-Attribut im <Input>-Tag.

Textarea

Für das große Textfeld deines Kontaktformulars verwendest du <textarea rows="7"></textarea>.
Innerhalb des öffnenden Tags kannst du durch das Attribut „rows“ festlegen, wie viele Zeilen dein Texteingabefeld besitzt.

Sende-Button

Der <button type="submit">Jetzt abschicken!</button> wird am Ende hinzugefügt. Innerhalb des öffnenden Tag musst du das Attribut "type=”submit" angeben um klar zu machen, dass es sich hierbei um den Senden-Button handelt.

Value

Bestimmt einen internen Bezeichnerwert für jeden Radio-Button (value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen.

Select

Mit <select="..."></select> wird eine Auswahlliste eingeleitet. Auch hier sollte ein name="..." vergeben werden.
Mit dem Attribut size="..." bestimmen Sie die Anzeigegröße der Liste, also die Anzahl der Zeilen.
Mit dem option="..."-Attribut wird ein Eintrag der Auswahlliste definiert.

Beispiel:

<select name="optionen" size="3">
      <option></option>
      <option></option>
      <option></option>
</select>

Kontaktformular Anpassungen

Captcha Systeme

→ > v5.0.0

// im ckEditor
[[plugin:captcha]]
// In /plugins
<?php include "captcha.php"; ?>

← > v5.0.0

→ < v4.0.0

System Captcha:

<div class="row">
	<div class="col-sm-4">
   		<img src="template/plugins/random_captcha.php" /> 
   		<i class="fa fa-repeat" id="refreshCaptcha"></i>
   	</div>
	<div class="col-sm-8">
		<input name="captcha" type="text" required />
	</div>
</div>

Der i-Tag mit der ID refreshCaptcha wird für das JavaScript benötigt, um den Captcha zu aktualisieren.
Das Attribut name="captcha" wird benötigt für die Abfrage ob der Captcha ausgefüllt wurde.

Google reCAPTCHA:

<div class="g-recaptcha-box"></div>

← < v4.0.0

Neue Formularvorlage erstellen

Klassen werden geladen, je nachdem wie die Seite & die Klasse benannt sind.
Um der neuen Klasse die Möglichkeit zu geben ein Formular abzusenden, muss die Kontaktklasse vererbt werden, damit die bestehenden Systemfunktionen übernommen werden können.
Für die Vererbung ist der Code extends \SYSTEM\CORE\contact zuständig, dabei wird die Funktionen contact aus template/classes/system/core/contact.php geladen.

Erstelle eine Datei mit dem Namen der Seite auf dem sich das Kontaktformular befindet im Ordner template/classes/page/x.php
Füge folgenden Code in die Datei ein:

→ < v5.3.0

<?php
namespace PAGE;
class x extends \SYSTEM\CORE\contact
{
	protected $email_template = 'y';
}

// New Version
namespace PAGE;
class x extends \SYSTEM\CORE\contact
{
	public $email_template_class = 'y';
}

x = Klassenbezeichnung
y = Die E-Mail Template Bezeichnung

← < v5.3.0

→ > v5.3.1

// (min. 5.3.1) Version 
namespace PAGE;
class x extends \SYSTEM\CORE\contact
{
    public $emailTemplateClass = 'y';
}

x = Klassenbezeichnung
y = Die E-Mail Template Bezeichnung

← > v5.3.1

3. Wenn die Klasse und das E-Mail Template eingetragen wurden kannst du die E-Mail Vorlage anpassen.
Hier sollten standardmäßig geändert werden:

das Logo,
der Absender,
die E-Mail-Adresse zum empfangen der Daten,
der Betreff
das Captcha

Die verwendete Klasse ist die vorher eingetragene Bezeichnung im public $emailTemplateClass = 'y';

E-Mail Vorlagen bearbeiten

→ < v5.0.0

Formular auf der Startseite nutzen mit Captcha

Wenn die Klasse Kontakt nicht geladen wird auf der Startseite, muss in der Captcha.php nur dies angepasst werden

<?php
if ($pageoptions_infos['pageId'] == 1) {
    require_once('template/classes/page/kontakt.php');
    $Kontakt = new Kontakt();

    $contact_template = $Kontakt->email_template;
} else {
    $contact_template = $Kontakt->getData('email_template');
}
?>

← < v5.0.0

Dateien einer E-Mail anhängen

Um zum Beispiel ein Bewerbungsformular zu erstellen wird meist ein Fileupload benötigt, dieser ermöglicht es den Kunden Bewerbungsunterlagen gleich mitzusenden.
Bei der <form> muss nur das Attribut enctype='multipart/form-data' hinzugefügt werden.
Beim Fileupload wird dann als name-Attribut file[] eingetragen.

<form method="post" enctype='multipart/form-data'>
	<input class="form-control" multiple="multiple" name="file[]" placeholder="Ihre Unterlagen" type="file">
</form>

Ausführliche Details gibts unter ->

→ < v5.0.0

Formular auf mehreren Seiten mit einer Klasse verbinden

Wenn du auf mehreren Seiten dasselbe Formular benötigst und diese nicht für jede einzelne Seite im Backend aktivieren möchtest, kannst du mit diesem Snippet diese Klasse laden.
Du benötigst nur ein einzigartigen name=""-Attribut dafür.

Dieses Snippet kommt in die template/custom_php/init.php nach ganz unten, über $db->close_con();.

$inputID = filter_input(INPUT_POST, 'foo', FILTER_SANITIZE_SPECIAL_CHARS);
if (!empty($inputID)) {
	require_once dirname(dirname(__FILE__)) . '/classes/page/FormularKlasse.php';
 	$mail = new \PAGE\FormularKlasse();
	$mail->init();
}

← < v5.0.0

Kontaktformular gängige Probleme

Modal (Popup) Mitteilung wird nicht ausgegeben

Das Formular besitzt kein <form> Tag oder <form method="POST">
Die Kontakt-Klasse wird nicht geladen
Mail-Funktion ist beim Provider nicht aktiviert oder konfiguriert.

Inhaltsverzeichnis