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/.

Das Script ist recht klein. Z.B. Oberhalb der alter-Ausgabe fügen wir zum einen einen Anchor-Tag ein und ein kleines jQuery-JavaScript. Das Script sieht dann so aus:

 

{% extends "partials/page.html.twig" %}

{% block content %}
    {{ content|raw }}

    <a name="formsuccess" id="formsuccess"></a>
    <script>
        console.log();
        var duration= 2000;
        var target = jQuery('#formsuccess');
        var targetY = target.offset().top - 200;
        // console.log('Vers. 20:07, ist eine Anchor-Ref.; anchor-y-target: '+anchor+' Offset: '+ targetY );
        jQuery("html, body").animate({
                    "scrollTop" : targetY
                },
                duration,
                'swing'
        );
    </script>

    <div class="alert">{{ form.message }}</div>

    <p>{{ 'PLUGIN_FORM.DATA_SUMMARY'|t }}</p>

    {% include "forms/data.html.twig" %}
{% endblock %}