Home » Webdesign » CMS MODX » Kontaktformular mit CMS MODX und eForm
- Anzeige -
Software Asset Management beim Fachmann

So erstellt man ein Kontaktformular mit dem CMS MODX und dem Snippet eForm

Ein Kontaktformular gehört zu einer professionellen Homepage. Auch das CMS MODx Evolution bleibt hier nicht aussen vor. Hier hilft das Snippet eForm. Am Besten schauen wir uns hier ein Beispiel an:

Dort, wo das Kontaktformular erscheinen soll, rufen wir eForm auf mit:

[!eForm? &formid=`ContactForm` &subject=`Feedback auf www.schlageter.ch` 
&to=`email@semail.com`  &tpl=`ContactForm` &report=`ContactFormReport` 
&thankyou=`eFeedbackThanks` &vericode=`1` !]

Alle Parameter erkläre ich weiter unten. Wichtig sind die drei Chunks, die eingebunden werden. "ContactForm", "ContactFormReport" und "eFeedbackThanks". Sie können natürlich auch anders benannt werden, allerdings muss dann sowohl der eForm-Aufruf, als auch der Chunkname entsprechend angepasst sein.

ContactForm

Dieses Chunk definiert das Formular

[+validationmessage+]

<form method="post" action="[~[*id*]~]">
 
<fieldset>
    
    <legend>Gute Ideen werden gerne veröffentlicht...</legend>
 
 
        <input name="formid" type="hidden" value="ContactForm" />
 
        <label>Ihr Vor- und Zuname:</label><br />
        <input name="kf_name" class="text" type="text" eform="Ihr Vor- und Zuname::1" /><br />
 
        <label>Ihre E-Mail Adresse <em>(optional)</em>:</label><br />
        <input name="kf_mail" class="text" type="text" eform="Ihre E-Mail Adresse:email:0" /><br />
 
        <label>Ihre Homepage <em>(optional)</em>:</label><br />
        <input name="kf_homepage" class="text" type="text" eform="Ihre Homepage::0" /><br />
 
        <label>Ihre Nachricht:</label><br />
        <textarea name="kf_nachricht"  rows="10" cols="50" eform="Ihre Nachricht:textarea:1"></textarea><br />      
	
	Bitte geben Sie den Anti Spam Code (Captcha) in das Feld darunter ein<br />
    <img src="[+verimageurl+]" alt="verification code" border="1"/>
    
    <br />
    <label accesskey="c" for="vericode">Anti Spam Code bitte hier wiederholen: </label>
    <input type="text" name="vericode" size="20" />
    <input type="submit" name="kf_submit" class="button" value="Nachricht abschicken" />
 
    </fieldset>
 
</form><br />

Eine Select-Box könnte z.B. so aussehen

<input type="checkbox" name="kf_anmeldung[]" value="10.09.2014 Veranstaltung 
1" eform="Anmeldung::0" />30.10.2014 Veranstaltung 2<br />
<input type="checkbox" name="kf_anmeldung[]" value="30.10.2014 Veranstaltung 2" />30.10.2014 Veranstaltung 2<br />

Wichtig

ContactFormReport

Dieses Formular definiert das Mail, das der Formualarempfänger per Mail erhält

Es wurde eine Nachricht über www.schlageter.ch gesendet.<br />
Folgende Informationen hat der Kunde hinterlassen:
 
<br /><br />
 
<table border="1" cellpadding="5">
<tr>
<td>Vor- und Zuname:</td>
<td>[+kf_name+]</td>
</tr>
<tr>
<td>E-Mail:</td>
<td>[+kf_mail+]</td>
</tr>
<tr>
<td>Homepage:</td>
<td>[+kf_homepage+]</td>
</tr>
<tr>
<td>Nachricht:</td>
<td>[+kf_nachricht+]</td>
</tr>
</table>
 
<br /><br />
 
Um den Kunden per E-Mail zu antworten klicken Sie hier: <a href="mailto:[+kf_mail+]?subject=Ihre Nachricht an uns">[+kf_mail+]</a>

eFeedbackThanks

Dieses Formular definiert die Meldung, die statt des Kontaktformulars bei erfolgreichem Versand angezeigt wird.

<h2>Vielen Dank für Ihre Nachricht</h2>
<p>Vielen Dank für Ihr Feedback auf www.schlageter.ch.</p>
<h3>Folgende Daten wurden übermittelt</h3>
<table  cellpadding="5">
<tr>
<td>Vor- und Zuname:</td>
<td><i>[+kf_name+]</i></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><i>[+kf_mail+]</i></td>
</tr>
<tr>
<td>Homepage:</td>
<td><i>[+kf_homepage+]</i></td>
</tr>
<tr>
<td>Nachricht:</td>
<td><i>[+kf_nachricht+]</i></td>
</tr>
</table>

Die eForm-Parameter

&formid=`ContactForm`

Die hier definierte ID muss im Formular als hidden Field entsprechend wieder auftauchen.

&subject=`Feedback auf www.schlageter.ch`

Definiert das Betreff des E-Mails, das der Empfänger des Formulars enthält.

&to=`lars@schlageter.ch`

Definiert den Empfänger des Formulars.

&tpl=`ContactForm`

Definiert den Namen des Junks, das das Formular enthält.

&thankyou=`ThankYou`

Definiert den Namen des Junks, das eine benutzerdefinierte Erfolgsmeldung auf dem Bildschirm ausgibt.

&ccsender=`1`

Bei 1 werden die Formuardaten auch an den Absender gesendet. Bei 0 nicht.

&automessage=`AutoMessage`

Definiert den Namen des Junks, das ein Feedback an den Absender mit der E-Mail email sendet. &ccsender sollte auf 0 stehen, sonst bekommt der Absender 2 Mails.

&report=`ContactFormReport`

Definiert den Namen des Junks, das das E-Mail beschreibt, dass die Formulardaten sendet.

&vericode=`1`

Schaltet die Verwendung von Captchas ein. Hakelt gerne. Falls was nicht funktioniert, den Abschnitt von oben 1:1 ans Formularende übernehmen:

Bitte geben Sie den Anti Spam Code (Captcha) in das Feld darunter ein<br />
    <img src="[+verimageurl+]" alt="verification code" border="1"/>
    
    <p>
		<label accesskey="c" for="vericode">Anti Spam Code bitte hier wiederholen: </label>
    <input type="text" name="vericode" size="20" />
        <input type="submit" name="kf_submit" id="kf_submit" class="button" value="Nachricht abschicken" />
 
    </fieldset>
 
</form><br />

Troubleshooting eForm für MODx

Ich habe Stunden nach der Fehlersuche verbracht, warum der Captcha-Code immer ungültig war, trotz dass ich ihn garantiert korrekt eingegeben habe. Ursache war, dass ich am Seitenende ein Kommentarformular eingebunden habe. Dies nutzt die gleiche Captcha-Funktion. Auf einer Seite darf diese ohne weitere Massnahmen nur einmal eingebaut werden.

Wie bei allen Snippets kann es Sinn machen das Snippet nochmal neu zu installieren, wenn ominöse Fehlermeldungen auftreten.

eForm extended

Bestätigungsmail an Formularausfüller

Wir möchten ein Bestätigungsmail an den Ausfüller des Formulars senden.

Hinzu kommen hier die Parameter automessage, autosender und autosendername. Automessage gibt ein Chunk an, dass die Mail definiert. Dies kann weitgehend analog zum ContactFormReport aufgebaut werden. Zu beachten gilt natürlich, dass ein böser Zeitgenosse fremde Leute anwählen kann, diese dann die Bestätigungsmail erhalten und sich dadurch belästigt fühlen.

Das Feld für E-Mail sollte hier auch email heissen.

[!eForm? &formid=`ContactForm` &subject=`Feedback auf www.schlageter.ch` 
&to=`lars@schlageter.ch`  &tpl=`ContactForm` &report=`ContactFormReport` &thankyou=`eFeedbackThanks` 
&vericode=`1` 
&automessage=`email` &autosender=`absender@kopa.ch` &AutosenderName =`formular@schlageter.ch`   
!]

Abfüllen der Formulardaten in eine Datenbank

Hierzu haben sich schon andere Gedanken gemacht. Interessant sind die zwei folgenden Links:

Konkret für das Beispiel sieht das so aus:

Snippet eForm2db

<?php function eForm2db( &$fields ) { /*--------------------------------------------------------------- eForm2db Version: 0.1 [Beta 1] Author: pixelchutes // Bring needed resources into scope global $modx, $table_prefix; // Init our array $dbTable = array(); // key = DB Column; Value = Insert/Update value // Insert field/value pairs to insert/update in our table $dbTable[kf_name] = $fields[kf_name]; $dbTable[kf_mail] = $fields[kf_mail]; $dbTable[kf_homepage] = $fields[kf_homepage]; $dbTable[kf_nachricht] = $fields[kf_nachricht]; $dbTable[datetime] = date( 'YmdHis', strtotime( $fields[postdate] ) ); // Run the db insert query $dbQuery = $modx->db->insert( $dbTable, $table_prefix . 'formulardata' ); return true; }

Vor den Aufruf des Kontaktform-Chunks muss das Snippet mit...

[!eform2db!]

...aufgerufen werden.

Im eform-Aufruf ergänzt man...

 &eFormOnBeforeMailSent=`eForm2db`

Die Formularfelder werden in ein Array dbtable gepackt. Hat man select-Felder, dann sind diese bereits in einem Array abgespeichert, und man sollte diese z.B. mit implode in einen String umwandeln.

Beispiel

 $String = implode(";", $fields[kf_anmeldung]);

Mehr Info hierzu unter PHP Array in ein String umwandeln.

Zusätzlich wird noch das aktuelle Datum in ein Feld gespeichert.

Es wird die MODX-DB verwendet. Die Tabelle, die die Formulardaten aufnimmt, legt man z.B. mittels PHPMyAdmin an. Im obigen Beispiel beginnt ihr Name mit dem allgemeinen Table Prefix, der bei der Installation von MODX definiert wurde und endet auf formulardata.

Die Tabelle muss neben den Spalten, die die Formularfelder aufnehmen, auch noch einen Index haben, der mit dem Attribut Autoinkrment versehen ist und somit automatisch eine fortlaufende Nummer erhält. Kritisch wird es, wenn ein Nutzer in ein Feld ein Hochkomma eingibt, da dann der SQL-Ausdruck ungültig wird. Dies kann man aber z.B. mittels str_replace abfangen:

$dbTable[kf_name] = $fields[kf_name];
$dbTable[kf_name] = str_replace('\'', ' ', $dbTable[kf_name]);

Das Hochkomma (im PHP Code maskiert mit dem Backslash) wir hiermit einfach in ein Leerzeichen umgewandelt.

Weitere Infos zu MODx und eForm



War der Artikel hilfreich? Bitte liken und sharen. Danke!

it-zeugs.de ist auch auf Facebook...

Schreibe einen Kommentar - aber kein SPAM - der wird zuverlässig gefiltert!

  • Erforderliche Felder sind markiert mit *.

If you have trouble reading the code, click on the code itself to generate a new random code.