4.4.x – Doppeltes Abschicken von Formularen unterbinden

Hallo Forum,
wir haben seit einiger Zeit eine Website für die Registrierung zu Veranstaltungen mit Contao umgesetzt. Es sind recht einfache Formulare, deren Daten in der DB gespeichert und per E-Mail versendet werden.
Das klappt grundsätzlich problemlos, allerdings kommt es recht oft vor, daß die Datensätze doppelt oder gar mehrfach in der DB abgelegt werden. Vermutlich durch Ungeduld, weil nicht sofort was passiert oder durch mehrfaches Zurück- und Vor-Navigieren, bzw. Reloads.

Wie kann man das unterbinden? Eine Möglichkeit wäre, nach dem Absenden den "Request Token" zu löschen, der für das Absenden erforderlich ist. Ein anderer Weg wäre, eine Spalte in der DB-Tabelle auf "unique" zu setzen, so daß dieser Wert nur 1x vorkommen darf. Aber beides würde zu der Ausgabe einer System-Fehlermeldung führen, die die Leute dann reklamieren. Ein Captcha sollte unbedingt vermieden werden.

Habt Ihr eine Idee? Vielen Dank für Eure Tipps!

Grüße
Achim

EDIT:
Man könnte natürlich auf das submit event hin den Absende-Button für ein paar Sekunden ausblenden, damit liese sich zumindest Ungeduld abfangen.

Hallo Achim,

eine Weiterleitungsseite/Feedbackseite nach dem Motto "Vielen Dank für Ihre Anmeldung, Ihr xy Team" kommt nicht in Frage?

Viele Grüße,
conter

Trotz Weiterleitungsseite kann das passieren, weil es offenbar Menschen gibt, die Formulare mit einem Doppelklick absenden (Habe ich auch schon beobachtet). Dafür ist dann eine Weiterleitungsseite auch zu träge.

Abhilfe war ein kleines Stückchen JavaScript, was bei dem ersten Klick den Absenden-Button deaktiviert (ausgraut). Dieser Event kommt sofort durch und kann den Doppelklick verhindern.

Zitat:

Zitat von do_while

Abhilfe war ein kleines Stückchen JavaScript, was bei dem ersten Klick den Absenden-Button deaktiviert (ausgraut). Dieser Event kommt sofort durch und kann den Doppelklick verhindern.

So habe ich das nun auch gelöst:

Das Template "form_submit.html5" als "form_submit_progress.html5" im Templates-Ordner des Projekts anlegen.
Mit folgendem Code ergänzen:

HTML-Code:

… </button><div id="meter"><span style="width:100%;"><span class="progress"></span></span></div>

CSS ergänzen:

HTML-Code:

#meter {display: none; height: 5px; position: relative; background: #f3efe6; overflow: hidden; float:none; clear:both; width: 250px;} #meter span { display: block; height: 100%;} .progress { background-color: #FF9E21; animation: progressBar 8s ease-in-out; animation-fill-mode:both;} @keyframes progressBar { 0% { width: 0; } 100% { width: 100%; } }

JS ergänzen:

HTML-Code:

$(document).ready(function() {$('#formularID').submit(function(){$('#buttonID').fadeOut();$('#meter').fadeIn();});});

Der Absende-Button wird ausgeblendet und eine Progress Bar für 8 Sek. eingeblendet. Das sollte reichen, um Ungeduld zu unterbinden ????

Zitat:

Zitat von syntaxys

Der Absende-Button wird ausgeblendet und eine Progress Bar für 8 Sek. eingeblendet. Das sollte reichen, um Ungeduld zu unterbinden ????

Du kannst die Zeit auf "unendlich" machen.. es kommt doch dann eh ein Reload

Gute Lösung. Allerdings funktioniert es bei mehrseitigen Formularen leider nicht, weil der "weiter"-Button wohl auch schon die submit-Function benutzt.
Wie würde die Lösung denn für mehrseitige Formulare aussehen?

Gibt es hierfür nicht mittlerweile ein Contao-seitig implementiertes "mehfachversende Verbot" für die Formulare? Das sollte eigentlich generell und grundsätzlich ausgeschlossen werden und nicht jeder manuell Tippen müssen.

Hallo zusammen,

ich hoffe es ist in Ordnung wenn ich das Thema noch einmal aufmache. Wir haben nämlich auch das Problem, dass Mails mehrfach gesendet werden.
Bei unserer Recherche dazu sind wir auf mehrere Beiträge hier im Forum gestoßen. Unter anderem wurde es auch hier beschrieben: https://community.contao.org/de/show...aildoppelungen
Es sind meistens zwischen 1 und 25 Mails innerhalb von mehreren Minuten, die alle genau den gleichen Inhalt haben. Sie sind demnach auf jeden Fall mehrfach vom Formular versendet worden.

Beim Testen ist uns aufgefallen, dass der Submit-Button nur ein Teil des Problems ist, deshalb waren wir uns unsicher ob der hier vorgeschlagene Code bei uns auch helfen könnte. Als größeres Problem empfinden wir die Enter-Taste, weil man diese sehr schnell mehrfach zum Absenden drücken kann und jede dieser Eingaben im System-Log zu sehen ist. Dadurch werden dann über das Notification Center jeweils 2 Mails pro Eingabe generiert: Eine davon geht an uns und die andere an den anfragenden Kunden. Das möchten wir natürlich gerne verhindern.

Alternativ hatten wir überlegt den Versand mit Enter generell zu unterbinden, aber damit würde man natürlich die Nutzung des Formulars verändern. Das könnte wieder zu neuen Probleme für unsere Nutzer führen, weil sie dann denken könnten das Formular funktioniert nicht richtig.

Über andere Vorschläge zu unserem Problem wären wir auch sehr dankbar. Wir nutzen aktuell Contao 4.13.12. Leider kennen wir uns auch nur begrenzt mit dem System aus, weil es unsere einzige Contao-Seite ist und vorher von einem anderen Kollegen verwaltet wurde. Diesen können wir dazu leider auch nicht mehr ansprechen.

Danke und liebe Grüße

Es gibt dazu seitens des Contao Cores noch nichts neues. Ohne Programmier-Aufwand gibt es nur Quick & Dirty Workarounds. Ihr könntet euch bspw. ein form_wrapper Template mit folgendem Inhalt anlegen:

Code:

 <div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>> <?php if ($this->headline): ?> <<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>> <?php endif; ?> <form<?php if ($this->action): ?> action="<?= $this->action ?>"<?php endif; ?> method="<?= $this->method ?>" enctype="<?= $this->enctype ?>"<?= $this->attributes ?><?= $this->novalidate ?> onsubmit="this.inert=true"> <div class="formbody"> <?php if ('get' != $this->method): ?> <input type="hidden" name="FORM_SUBMIT" value="<?= $this->formSubmit ?>"> <input type="hidden" name="REQUEST_TOKEN" value="<?= $this->requestToken ?>"> <?php if ($this->maxFileSize): ?> <input type="hidden" name="MAX_FILE_SIZE" value="<?= $this->maxFileSize ?>"> <?php endif; ?> <?php endif; ?> <?= $this->hidden ?> <?= $this->fields ?> </div> </form> </div> 

Ist aber aus Accessibility Sicht keine Gute Lösung. Falls ihr eine Programmierte Lösung haben wollt, könntet ihr euch an einen der Contao Partner wenden: https://contao.org/de/partner

Übrigens müsst ihr dringend auf 4.13.36 aktualisieren.

Ich hoffe, dass das eines Tages Contao-intern verhindert wird. Aber solange habe ich mit meinem Freund Bing (Copilot) einen gut funktionierenden anderen Weg gefunden, der auch das Problem mit der Enter-Taste löst:

Du legst im Backend ein neues Template für form_submit.html an.
Du ersetzt den gesamten Code durch diesen:

PHP-Code:

<?php $this->extend('form_row'); ?> <?php $this->block('field'); ?> <?php if ($this->src): ?> <input type="image" src="<?= $this->src ?>" id="ctrl_<?= $this->id ?>" class="submit<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>" title="<?= Contao\StringUtil::specialchars($this->slabel) ?>" alt="<?= Contao\StringUtil::specialchars($this->slabel) ?>"<?= $this->getAttributes() ?>> <?php else: ?> <button type="submit" id="ctrl_<?= $this->id ?>" class="submit<?php if ($this->class): ?> <?= $this->class ?><?php endif; ?>"<?= $this->getAttributes() ?>> <span id="submit-label"><?= $this->slabel ?></span> <div id="loading-image" class="loadingio-spinner-rolling-dzm2p5wi9ut" style="display: none;"><div class="ldio-rt03pj2teaj"> <div></div> </div></div> <style type="text/css"> @keyframes ldio-rt03pj2teaj { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } .ldio-rt03pj2teaj div { position: absolute; width: 51px; height: 51px; border: 15px solid #f9f9f9; border-top-color: transparent; border-radius: 50%; } .ldio-rt03pj2teaj div { animation: ldio-rt03pj2teaj 1s linear infinite; top: 50px; left: 50px } .loadingio-spinner-rolling-dzm2p5wi9ut { width: 20px; height: 20px; display: inline-block; overflow: hidden; background: none; } .ldio-rt03pj2teaj { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(0.2); backface-visibility: hidden; transform-origin: 0 0; /* see note above */ } .ldio-rt03pj2teaj div { box-sizing: content-box; } /* generated by https://loading.io/ */ </style> </button> <?php endif; ?> <script> jQuery(document).ready(function() { jQuery("form").on("submit", function() { jQuery("#submit-label").hide(); jQuery("#loading-image").css('display', 'inline-block'); // Setzt display auf inline-block jQuery(this).find(':submit').prop('disabled', true); }); }); </script> <?php $this->endblock(); ?>

Der Code macht folgendes:
- Sobald das Formular losgeschickt wurde (egal ob per Klick oder Taste), wird das Absendefeld blockiert. Mehrfach klicken oder drücken hat somit keine Auswirkung mehr.
- Gleichzeitig wird der Text auf dem Button (bspw. "Absenden") ausgeblendet und gegen ein sich drehendes Warte-Icon ersetzt. Da es in CSS aufgebaut ist, muss kein GIF o.ä. geladen werden. Das signalisiert dem Nutzer, dass er nichts machen muss außer zu warten. Das ist wichtig, weil er sonst ungeduldig wird und die Zurück-Taste drückt, das Fenster schließt ...

Wie gesagt, bei uns funktioniert es sehr gut und wir haben endlich keine doppelten Einträge mehr.

@Contao: Bitte grundsätzlich implementieren :)

Zitat:

Zitat von SpeGal

@Contao: Bitte grundsätzlich implementieren :)

Contao ist ein Open Source Content Management System. Du könntest diese Features entweder selbst als PR bereitstellen - oder andernfalls jemanden damit beauftragen, das in den Core oder in einer Extension zu integrieren (oder beides, so würde ich es machen, wenn beauftragt).

Zitat:

Zitat von SpeGal

Wie gesagt, bei uns funktioniert es sehr gut

wenn JS an ist... und hier auch noch jQuery - wenn, wäre eine Lösung als Vanilla vorzuziehen

Vielen Dank für eure schnellen Antworten.
Es funktioniert bei uns auch sehr gut. Für uns ist es auch in Ordnung, dass eventuell einzelne Nutzer ohne Javascript trotzdem zu doppelten Antworten führen. Das müsste trotzdem schon einen ordentlichen Unterschied bei uns machen.

Zitat:

Zitat von zonky

wenn JS an ist... und hier auch noch jQuery - wenn wäre eine Lösung als Vanilla vorzuziehen

Interessante Ausdrucksweise, die nicht jeder versteht, wenn er kein Vollprogrammierer ist ;)

Aber ja, jQuery sollte für den Code natürlich eingebunden sein.

Wenn es rein JavaScript ("Vanilla") sein soll, dann sollte es auch so funktionieren (hab's noch nicht getestet):

HTML-Code:

document.addEventListener("DOMContentLoaded", function() { const form = document.querySelector("form"); form.addEventListener("submit", function(event) { event.preventDefault(); // Verhindert das tatsächliche Absenden des Formulars document.getElementById("submit-label").style.display = "none"; document.getElementById("loading-image").style.display = "inline-block"; document.querySelector(":submit").disabled = true; }); });

wenn man das in das Template des Form-Wrappers einbindet, hätte man auch die Form-Id zur Verfügung und könnte den JS-Selector spezifischer gestalten