Contao-Camp 2024
Ergebnis 1 bis 15 von 15

Thema: 4.4.x – Doppeltes Abschicken von Formularen unterbinden

  1. #1
    Contao-Nutzer Avatar von syntaxys
    Registriert seit
    05.05.2011.
    Ort
    Rheinzabern
    Beiträge
    82

    Standard 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.
    Geändert von syntaxys (05.02.2020 um 09:48 Uhr)

  2. #2
    Contao-Fan
    Registriert seit
    28.02.2011.
    Beiträge
    675

    Standard

    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

  3. #3
    Contao-Urgestein Avatar von do_while
    Registriert seit
    15.06.2009.
    Ort
    Berlin | Deutschland
    Beiträge
    3.612
    Partner-ID
    1081
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  4. #4
    Contao-Nutzer Avatar von syntaxys
    Registriert seit
    05.05.2011.
    Ort
    Rheinzabern
    Beiträge
    82

    Standard

    Zitat Zitat von do_while Beitrag anzeigen
    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 ????

  5. #5
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.684
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von syntaxys Beitrag anzeigen
    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

  6. #6
    Contao-Nutzer
    Registriert seit
    13.12.2013.
    Beiträge
    103

    Standard

    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?

  7. #7
    Contao-Nutzer
    Registriert seit
    13.12.2013.
    Beiträge
    103

    Standard

    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.
    Geändert von SpeGal (14.11.2023 um 16:02 Uhr)

  8. #8
    Contao-Nutzer
    Registriert seit
    29.01.2024.
    Beiträge
    2

    Standard

    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

  9. #9
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.899
    Partner-ID
    10107

    Standard

    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:
    <!-- indexer::stop -->
    <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>
    <!-- indexer::continue -->
    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.
    » sponsor me via GitHub or PayPal or Revolut

  10. #10
    Contao-Nutzer
    Registriert seit
    13.12.2013.
    Beiträge
    103

    Standard

    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

  11. #11
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.899
    Partner-ID
    10107

    Standard

    Zitat Zitat von SpeGal Beitrag anzeigen
    @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).
    » sponsor me via GitHub or PayPal or Revolut

  12. #12
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.684
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von SpeGal Beitrag anzeigen
    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

  13. #13
    Contao-Nutzer
    Registriert seit
    29.01.2024.
    Beiträge
    2

    Standard

    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.

  14. #14
    Contao-Nutzer
    Registriert seit
    13.12.2013.
    Beiträge
    103

    Standard

    Zitat Zitat von zonky Beitrag anzeigen
    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;
        });
    });

  15. #15
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.684
    User beschenken
    Wunschliste

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •