[Solved] Return to modular contact form after submit (agency theme)

first-time
#1

Thanks to Ricardo on Discord I could solve my problem. I had to change two files. In the contact form I added some javascript, which monitors the div element that is added, to show the messages of the failed validation. In its twig file I added an id for this element, to get access to it.

In user/pages/01.home/contact/form.md I added the following javascript code at the end of the file:

<script type="text/javascript">
// This script scrolls the page down to the contact form,
// when the validation fails
// Source: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// Oberserves changes of DOM and executes an action, if a change occurs

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
var callback = function(observer) {
  if (document.getElementById('alert-notices')) {
    document.getElementById('alert-notices').scrollIntoView();
  }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for mutations
// The contact id is a parent of alert-notices
observer.observe(document.getElementById('contact'), config);
</script>

In /user/themes/agency/templates/modular/form.html.twig I added in line 12 an id='alert-notices'for the div

{% if form.message %}<div id="alert-notices" class="alert notices {{ form.message_color ?: 'green' }}"><p>{{ form.message }}</p></div>{% endif %}

Hi,
this is my first post here. I like Grav very much, thank you guys, and put already quiet some time in tweaking themes and setting up homepages I don’t get the contact form in agency theme working properly. I looked through the forum topics, but couldn’t find my issue addressed.

I can send emails and display a thank you page, but if the validation of fields throw errors after submit, the contact form returns to the top of the page. So unless someone scrolls down again to the contact form, he/she will not notice, that the mail hasn’t been sent.

Putting an anchor in the form like form: action: /home#contact returns to the contact form after submit, but if there are validation errors they are not displayed. So this doesn’t help. From reading the documentation it seems that form: action: has to refer to the main page otherwise there are no actions. The form is defined in the main modular page as in the agency theme. (I tried to put it in a modular sub-page, but then no email was sent and no validation seems to take place. Is this a path problem?).

My question: Is there a possibility to get back to the form of a modular sub-page and show validation errors after a submit?

I’m also willing to do some debugging, but the debugger, did not help, because there seems to be no code error, just something is not executed.

Help appreciated.
regards
rob