(Info: Dies ist ein Repost von meinem damaligen WP-Buddy Blog. Ursprünglich veröffentlicht im Januar 2014).

NinjaForms ist ein tolles Plugin. Es existiert eigentlich noch gar nicht so lange. Es macht das Erstellen von Formularen super einfach. Da kann das Contact-Form-7 Plugin schon lange nicht mehr mithalten. Gerade wenn es um das Thema Usability geht. Was einen Kunden von mir jetzt allerdings störte ist, dass die (Ajax-)Fehlermeldungen nur ganz oben erschienen und nicht am Ende (also beim Senden-Button). Hier steht, wie’s geht (bezogen auf die ältere Version 2.x.x):

Das Problem

Wie schon besprochen: Werden Formulare recht lange, werden die Fehlermeldungen trotzdem nur am Anfang des Formulars eingeblendet. Das führt dazu, dass die Fehlermeldungen nicht sichtbar sind. Zwar tut sich in den meisten Fällen etwas (immerhin wird ein neues HTML-Element in den DOM eingefügt) aber das bekommen die meisten Menschen gar nicht mit. Das ist verwirrend und es muss demnach Abhilfe geschaffen werden. So geht’s:

Idee

Gott sei Dank hat Ninja Forms jede Menge eigene Action-Hooks eingebaut. Damit wird es schon fast unverschämt einfach, die Meldung weiter nach unten zu schieben. Konkret: Unter den Senden-Button am Ende des Formulars.

Zuerst einmal muss, ganz nach dieser Anleitung, die Zeile oben entfernt werden:

remove_action( 'ninja_forms_display_before_form', 'ninja_forms_display_response_message', 10 );

Danach ruft man die gleiche Funktion, die man eben entfernt hat, in einem anderen Hook wieder auf. In unserem Fall im Footer des Formulars:

add_action( 'ninja_forms_display_after_form', 'ninja_forms_display_response_message', 10 );

Plugin

Daraus könnte man sich jetzt noch ein schönes, einfaches Plugin basteln damit die Einstellung nicht verloren geht, wenn man das Plugin updatet:

<?php
/*
Plugin Name: Ninja Forms Message to Footer
Description: Moves the error messages to the footer
Version: 0.1
*/

add_action('wp_head', function(){
	remove_action( 'ninja_forms_display_before_form', 'ninja_forms_display_response_message', 10 );
	add_action( 'ninja_forms_display_after_form', 'ninja_forms_display_response_message', 10 );	
});

Das war’s schon 😉 Den Download gibt’s bei Github.

Hinweis: Im obigen Beispiel habe ich eine anonyme Funktion benutzt. Diese gibt es erst seit der PHP Version 5.3.0. Wer eineältere Funktion nutzt sollte eine separate Funktion erstellen und dementsprechend darauf verweisen.