Kontaktformular Mailer Typen

[Khan]

Hallo Leute,

ich arbeite mit responsive HTML/CSS Templates welche ein schickes Kontaktformular eingebettet haben. Mir ist bekannt, daß dieses nur das Formular ist und dahinter ein mailer.php eingebunden werden muß. Mit dieser Konfiguration bin ich etwas vertraut, habe schon einige Male sowas zum laufen gebracht.

Nun habe ich folgende Anliegen und hoffe auf Mithilfe:

1. Ich habe bislang diesen Mailer verwendet: Linkbeschreibung

Eingebunden habe ich diesen per <iframe> was keine schöne Lösung ist, da vor allem das schicke eingebettete responsive Design der Templates verloren geht! In diesem <iframe> befindet sich das Kontaktformular, nach dem Senden erscheint in diesem <iframe> eine Danke/Erfolgreich-gesendet-Seite.

2. Mein Server ist bei Alfahosting. Die haben deren Mail System umgestellt und meine o.g. Mailer ist nun mit deren Server nicht mehr kompatibel. Ich brauche also einen neues Mailer-Skript. Kennt ihr ein aktuelles welches gut funktioniert?

3. Könnt ihr mir Tips geben, wie ich das responsive Kontaktformular unverändert behalten kann, welches aber Mails versendet und eine Danke Message anzeigen kann? Mit Message meinte ich nicht sowas wie: onclick="alert('Danke für die Nachricht');"

Vielen Dank für eure Unterstützung MfG Khan

[pl]

Die Seite mit dem Formular braucht einen Platzhalter für die Erfolgsnachricht. Wenn dieser Fall eingetreten ist, wird die Message dort eingetragen und der Browser lädt die ganze Seite neu. Für den Absender wäre es schön wenn er nach dem Reload möglichst nicht scrollen muss.

MfG

[Julius]

Hallo Khan,

Eingebunden habe ich diesen per <iframe> was keine schöne Lösung ist, da vor allem das schicke eingebettete responsive Design der Templates verloren geht!

... vor allem, wenn man auf dem Server sowieso PHP einsetzt und den Mailer selber hostet, dann kan man das Formular auch gleich in die Seite selbst einbauen – ohne den Umweg über das iframe.

2. Mein Server ist bei Alfahosting. Die haben deren Mail System umgestellt und meine o.g. Mailer ist nun mit deren Server nicht mehr kompatibel.

Da wäre es interessant herauszufinden, was genau dein Hoster geändert hat, dann kann man das alte vielleicht anpassen oder das neue passend auswählen.

Kennt ihr ein aktuelles welches gut funktioniert?

Im SELFHTML-Wiki steht eine Anleitung, wie man die Bibliothek Swift Mailer benutzt. Damit bist du sehr flexibel und kannst dein Formular passend mit dem Server-seitigen Teil „verdrahten“.

3. Könnt ihr mir Tips geben, wie ich das responsive Kontaktformular unverändert behalten kann, welches aber Mails versendet und eine Danke Message anzeigen kann? Mit Message meinte ich nicht sowas wie: onclick="alert('Danke für die Nachricht');"

Wenn die E-Mail erfolgreich versendet wurde, kannst du mit PHP einfach eine passende Seite ausgeben. Im Beispiel im Wiki wird der Nutzer auf eine passende Seite weitergeleitet, wenn das Formular abgesendet wurde.

Gruß
Julius

[TS]

Hello,

Wenn die E-Mail erfolgreich versendet wurde, kannst du mit PHP einfach eine passende Seite ausgeben. Im Beispiel im Wiki wird der Nutzer auf eine passende Seite weitergeleitet, wenn das Formular abgesendet wurde.

Nach dem Senden der Mail sollte der Server besser mit dem gesendeten Text (und Bildern/Anhängen) antworten als Quittung.

Liebe Grüße
Tom S.

[Khan]

Den Swiftmailer habe ich mir angeschaut und getestet, er funkitoniert auf meinem Server. Die Einbindung nun ist etwas verzwickt, ich möchte das im Template vorhandene Formular verwenden, mit der Hintergrundtechnik des Swiftmailers, dabei ist zu beachten wie 'PL' schon meinte, daß ein Platzhalter in das Template eingepflanzt werden sollte, damit nach dem Senden der Nachricht die Seite nicht komplett neu geladen werden muß, sondern auf der Höhe des Formulares stehen bleibt und anstelle des Formulares eine Danke Nachricht angezeigt wird. Zuvor habe ich das immer per iframe gelöst. Kennt ihr eine neuere aktuellere Methode?

[Julius]

Hallo Khan,

[…] sondern auf der Höhe des Formulares stehen bleibt und anstelle des Formulares eine Danke Nachricht angezeigt wird.

Am Einfachsten wird es wohl sein, dem Formular im action-Attribut einen Fragment-Identifizierer mitzugeben: <form action="nachricht-senden.php#danke"> und dann in der empfangenden Seite (nur #danke für die selbe Seite geht auch) eine passende Nachricht ausgeben mit der ID danke und die wird dann vom Browser angesprungen. Optional kannst du dann ja noch mittels JavaScript und Ajax dafür sorgen, dass nicht die komplette Seite geladen wird, sondern nur das Formular ausgetauscht wird. Aber für das Absenden eines Kontaktformulares zusätzlich (das PHP-Skript zum E-Mail-Versand und anschließendem Ausgeben der Nachricht brauchst du ja so oder so) mit Ajax zu hantieren, finde ich etwas unnötig.

Zuvor habe ich das immer per iframe gelöst. Kennt ihr eine neuere aktuellere Methode?

Ein iframe dafür zu benutzen, war imho eigentlich noch nie aktuell.

Gruß
Julius

[TS]

Hello,

Ein iframe dafür zu benutzen, war imho eigentlich noch nie aktuell.

Das war immer dann aktuell, wenn der Web-Account nicht selber über PHP oder ähnliches verfügte und das Modul für den Mailversand dann vom Anwender aus dem Fundus des Providers einfach dazugeladen wurde.

Liebe Grüße
Tom S.

[Julius]

Hallo Tom,

Ein iframe dafür zu benutzen, war imho eigentlich noch nie aktuell.

Das war immer dann aktuell, wenn der Web-Account nicht selber über PHP oder ähnliches verfügte und das Modul für den Mailversand dann vom Anwender aus dem Fundus des Providers einfach dazugeladen wurde.

Dass das im konkreten Fall nicht der Fall ist, hatte ich bereits (korrekterweise) angenommen und erklärt.

Gruß
Julius

[Khan]

Die Lösung ist an und für sich nicht schlecht, jedoch wie schaut es aus wenn der Mailer PHP eine Prüfung vor der Sendung macht, man aber vorher schon den Sendenbutton geklickt hat. Lädt dann die Seite trotzdem nochmal neu? Wäre fatal da alle im Formular angegebenen Daten verloren gehen :(

[Julius]

Hallo Khan,

Die Lösung ist an und für sich nicht schlecht, jedoch wie schaut es aus wenn der Mailer PHP eine Prüfung vor der Sendung macht, man aber vorher schon den Sendenbutton geklickt hat. Lädt dann die Seite trotzdem nochmal neu?

Natürlich. Durch das Klicken auf den Absende-Button sendet der Browser eine Anfrage an den Server und bekommt eine Antwort, die er dem Nutzer darstellt. Das kann eine Seite mit einer Danke-Botschaft oder das selbe Formular noch einmal sein.

Wäre fatal da alle im Formular angegebenen Daten verloren gehen :(

Nicht, wenn du in dem Fall eine Seite mit dem Formular auslieferst, in dem die Felder mit den vorherigen Eingaben des Nutzers vorbelegst. Das nennt man „Affenformular“. Beispielsweise so:

<label for="strasse">Straße</label>
<input
  id="strasse"
  name="strasse"
  value="<?=htmlspecialchars($_POST['strasse']??'')?>"

>

Natürlich solltest du dazu eine aussagekräftige Fehlermeldung ausgeben.

Du machst also Server-seitig immer die Unterscheidung, ob richtige, falsche oder eben gar keine Eingabe gesendet wurden. Im ersten Fall sendest du dann die E-Mail und gibst die Danke-Botschaft aus, in beiden anderen zeigst du das Formular an.

---

Anmerkung: Der PHP-Code oben benutzt mehrere Kurzschreibweisen, die teilweise erst mit PHP7 eingeführt wurden, so würde er ausgeschrieben aussehen:

if(isset($_POST['strasse'])) {
  echo htmlspecialchars($_POST['strasse']);
}
else {
  echo '';
}

Gruß
Julius

[KC]

Danke erstmal, habe es verstanden. Mein Template reagiert allerdings nicht auf #ID Marken, zumindest nicht beim direkten laden wie beispielsweise www.adresse.de/index.html#contact. Es wird immer die oberste Stelle der Seite angezeigt.

Ich habe das Formular nach Tüftelei per <iframe> eingebunden, funktioniert soweit. Muß noch Feinjustierung machen.

[Julius]

Hallo KC,

Mein Template reagiert allerdings nicht auf #ID Marken, zumindest nicht beim direkten laden wie beispielsweise www.adresse.de/index.html#contact. Es wird immer die oberste Stelle der Seite angezeigt.

Folgende mögliche Probleme:

1. Die ID passt nicht zum Anker: http://example.org/test.html#{anker} vs. <element id="{anker}">
2. Ein JavaScript grätscht dir dazwischen (probeweise im Browser deaktivieren)

Ich habe das Formular nach Tüftelei per <iframe> eingebunden, funktioniert soweit.

Das ist keine gute Lösung, suche besser den Fehler bei der Sache mit dem Anker.

Vielleicht kannst du einen Link auf dein nicht funktionierendes Beispiel mit dem Anker posten.

Gruß
Julius

[KC]

Danke dir für den Support! Ich belasse das jetzt auf dem iframe da es momentan wunderbar mit dem Swiftmailer funktioniert. Ich habe mir auch selbst eine Anleitung für den Swiftmailer geschrieben, da ich das was im Netz gefunden habe etwas irreführend ist.

Bei meinem Template habe ich das Kontaktformular herauskopiert, anstelle dessen den Verweis iframe zur mailer.php gemacht. In der mailer.php habe ich das Kontaktformular hineinkopiert und die zugehörige CSS eingebettet. Das Template sieht aus wie original. Innerhalb des iframes findet nun alles statt, also das Formular und auch die Weiterleitung zur danke.php zusätzlich automatische Weiterleitung zurück auf mailer.php nach 5 Sekunden.

Ich hatte bei jedem Template was ich gemacht hatte, Probleme mit der Umsetzung des Kontaktformulares, ich hoffe nächstes mal auch mit Hilfe meiner Anleitung, es ohne Kopfweh fertig zustellen.

[KC]

Mir ist heute morgen unter der Dusche noch etwas eingefallen.

Ohne iframe einfach das im Template vorhandene Kontaktformular unverändert verwenden mit <form action="mailer.php" method="post">

Dann in der mailer.php eine Weiterleitung auf danke.html, eine standart leere Seite ohne Firlefanz, nur in den Farben des Templates und den Danke Hinweis und von dieser danke.html eine automatische Weiterleitung (5 Sekunden) zurück auf die index.html mit diesem Befehl im head Bereich:

<meta http-equiv="refresh" content="5; URL=index.html">

Obwohl mir fällt gerade auf, auf dem Smarthphone sieht das ja ganz ok aus, aber auf dem Desktop eine komplett leere Seite sieht richtig panne aus !!! 😂

[KC]

Ich habe mich mit deinem Vorschlag intensiver beschäftigt. Mein Template hat ein script was verhindert, daß direkt per # ein Anker angesprungen werden kann. Dieses script benötige ich in der danke Seite aber nicht und nach dem löschen ist es nun möglich vom mailer.php auf die Dankeseite dessen Anker zu springen. Dazu habe ich in der Dankeseite eine loading Animation eingebaut, die zeigt das eine automatische Weiterleitung auf die Hauptseite erfolgt.

Die Lösung ist wirklich feiner als die mit dem iframe und vor allem, wenn man die Vorarbeiten geleistet hat, einfacher uns sauberer.

Danke nochmal, habe bei diesem Thread viel über Kontaktformulare gelern.

[Julius]

Hallo KC,

Dazu habe ich in der Dankeseite eine loading Animation eingebaut, die zeigt das eine automatische Weiterleitung auf die Hauptseite erfolgt.

Also sieht der Nutzer nach einer gewissen Zeit nicht mehr die Danke-Meldung? Ich würde an deiner Stelle die Danke-Meldung so lange stehen lassen, bis der Nutzer die Seite eben verlässt.

Ich könnte mir vorstellen, dass ein Nutzer die Dankemeldung nicht mitbekommt (z. B. weil er sich direkt nach dem Absenden des Formulars einen Kaffee holt 😉) und dann verwundert ist, warum er plötzlich auf der Startseite deines Angebots gelandet ist, wenn er doch gerade ein Kontaktformular abgesendet hat.

Gruß
Julius

[KC]

Nach 5 Sekunden wird die Danke Seite verlassen und die index wieder geladen, das habe ich extra gemacht weil es ja sein kann, das der User nochmal eine Nachricht senden möchte. Die Danke Nachricht kommt umgehend nach dem drücken den Send buttons, also das nicht zu sehen wäre echt panne.

Momentan läuft das System wunderbar, besser als alle anderen Kontaktformulare die ich hatte.

Danke dir nochmals für die Idee mit dem #

[TS]

Hello,

Dazu habe ich in der Dankeseite eine loading Animation eingebaut, die zeigt das eine automatische Weiterleitung auf die Hauptseite erfolgt.

Also sieht der Nutzer nach einer gewissen Zeit nicht mehr die Danke-Meldung? Ich würde an deiner Stelle die Danke-Meldung so lange stehen lassen, bis der Nutzer die Seite eben verlässt.

Ich könnte mir vorstellen, dass ein Nutzer die Dankemeldung nicht mitbekommt (z. B. weil er sich direkt nach dem Absenden des Formulars einen Kaffee holt 😉) und dann verwundert ist, warum er plötzlich auf der Startseite deines Angebots gelandet ist, wenn er doch gerade ein Kontaktformular abgesendet hat.

Und ich könnte mir vorstellen, dass auf der "Dankeseite" der gesendete Text nochmal als Beleg abgebildet wird, so wie es seriöse Seiten machen. Und wenn der User sich den dann speichern oder drucken will, aber sein Drucker noch nicht warm ist, dann geht das auch nicht.

Also besser einen Link zum Weitermachen oder das Menu einbauen.

Liebe Grüße
Tom S.