Formularmeldungen

  • BreezingForms Meldungen in den sichtbaren Bereich bringen

    Problembeschreibung

    Die Formularkomponente BreezingForms für Joomla meldet an den Seitenbenutzer diverse Informationen, so z.B. wenn Pflichtfelder nicht ausgefüllt wurden, oder das Formular erfolgreich gesendet wurde. Da Webseiten heutzutage wg. der mobilen Geräte häufig sehr lang sind, oder Formulare sehr viele Felder haben können, kann es passieren, dass diese Meldungen, die bei BreezingForms oberhalb des Formulars eingeblendet werden, oder auf einer Feedbackseite ausgegeben werden, nicht im sichtbaren Bereich liegen. Der Seitenbesucher sieht diese Meldungen nicht, und ist verwundert, oder gar genervt darüber, nicht zu erfahren, was jetzt nach dem Klick auf dem Absendebutton genau passiert ist.

    Beide oben genannten Grundprobleme - also die Feedbackmeldung nach dem erfolgreichen Senden und die Fehlermeldungen bei Fehleingaben oder nicht gefüllten Feldern, sind jedoch vom Verhalten etwas unterschiedlich.

  • In GRAV Kontaktformular-Erfolgsseite einen Sprunganker mit smoothScroll nutzen

    Problembeschreibung

    Wer im CMS GRAV (Gravity) Formulare nutzt, wird feststellen, dass diese die Feedbackmeldung i.d.R. an gleicher Stelle ausgeben, wo vorher das auszufüllende Formular war. Hierbei passiert aber ein Seiten-Reload. Infolge dessen beginnt die Seitenanzeige ganz oben. Wenn aber das Formular, bzw. dessen Success-Meldung sehr weit unten ist, dann sieht der Seitennutzer diese Meldung erst wenn er auf Verdacht mal nach unten scrollt. Natürlich machen das viele Nutzer nicht, sondern fragen sich etwas hilflos, ob das Formular korrekt gesendet hat. Es wäre also notwendig, dass nach dem Absenden und dem Seitenreload gleich automatisch zur Erfolgsmeldung gesprungen wird.

     

    Umsetzung im Datail

    Für oben beschriebene Aktion ist das Script user/plugins/gantry5/engines/nucleus/templates/formdata.html.twig verantwortlich. Damit wir dieses GRAV-Core-Script nicht modifizieren müssen, erstellen wir davon eine Override-Kopie im Pfad: user/themes/g5_helium/templates/.