avianex / Online Performance Marketing / Know-How / Gravity Forms Textarea in Materialize-CSS

Gravity Forms Textarea in Materialize-CSS

Materialize-CSS wird als Frontend-Framework immer beliebter. In Kombination mit Gravity-Forms entstehen nutzerfreundliche, leane Formulare. Wie man auch Textfelder im Material-Design darstellen kann, zeigt folgender Trick.

Um eine Textarea im Materialize-Design erscheinen zu lassen, dürfen wir kein Textarea-Feld in Gravity Forms wählen. Das Problem ist nämlich, dass es aktuell (noch) keine Möglichkeit gibt, per Filter die Architektur eines Gravity-Form Textarea-Feldes so zu ändern, dass die Materialize-Klassen an der richtigen Position erscheinen. Aber es gibt einen Trick.

Im Gravity-Formeditor wälen wir unter Erweiterte Felder das Listenfeld.

Diese bearbeiten wir nun und (Pfeil nach unten) und setzen unter Maximale Zeilenanzahl den Wert auf 1. So erscheint genau ein einziges Element im Frontend.

Nun müssen wir noch eine kleine Funktion ergänzen, z.B. in die functions.php des Templates.

add_filter( 'gform_column_input_content_2_11_1', 'change_4_textarea', 10, 6 );
	function change_4_textarea( $input, $input_info, $field, $text, $value, $form_id ) {
	    $input_field_name = 'input_' . $field->id . '[]';
	    $tabindex = GFCommon::get_tabindex();
	    $new_input = '<textarea id="textarea1" name="' . $input_field_name . '" ' . $tabindex . ' 
            class="materialize-textarea">' . $value . '</textarea>';
	    return $new_input;
	}

Hier ist es wichtig, hinter „gform_column_input_content_“ die korrekte Formular ID (hier 2) und die Feld-ID des Listenfelds (_11_), zusammen mit der Zeilen-ID (_1) zu setzen.
Nun wird das Listenfeld gefiltert und erscheint korrekt formatiert als Textarea im Formular. Einfach oder? 😉

Demo übrigens in unserem Kontaktformular.

kommentieren