HTML Struktur des Registration Template ändern

Hallo,

ich nutze Contao erst wenige Wochen und möchte nun einen Loginbereich einrichten. Seiten und Module habe ich dafür schon angelegt und es funktioniert auch, jedoch bin ich mit dem Registration Template unzufrieden und würde dessen HTML Struktur gerne bearbeiten (z.B. einen DIV um Label und Input machen).

Leider finde ich die Datei nicht, wo der HTML Code hinterlegt ist. Ich habe schon in anderen Bereichen kleine Änderungen im Template vorgenommen und habe mir die Dateien angeschaut, die für den Aufbau des Registrationmoduls verantwortlich sind, jedoch wird dort meistens mit PHP Variablen gearbeitet wie z.B. "$this->fields" etc.

Ich habe diesen Thread gefunden: https://community.contao.org/de/showthread.php?62820-FE-Mitglieder-Profil-Edit-Formular-durch-Texte-erg%C3%A4nzen-(3-5-12)&highlight=$categories aber meines Erachtens war dort nicht das dabei, was ich brauche oder ich habe es übersehen.

Ich hoffe, dass jemand von euch mir einen Rat geben oder die richtige Richtung anzeigen kann, wo man suchen muss.

Hallo asfga,
willkommen im Forum!

Welche Contao-Version setzt du ein?

Du möchtest das HTML vermutlich aus gestalterischen Gründen verändern. Das widerspricht einem semantischen HTML. Und vielleicht könntest du die Gestaltung auch so per CSS erreichen. Kannst du genauer beschreiben, was dein Wunsch ist?

Gruß,
folkfreund

Danke schon einmal für die schnelle Antwort!

Ich benutze Contao 4.4.46 und genau, aus gestalterischen Gründen würde ich gerne an der HTML-Struktur etwas ändern. Ich habe bereits andere Formulare auf meiner Seite und würde gerne alle in ihrer Struktur vereinheitlichen und da ich Bootstrap verwende, würde ich auch gerne die Klassen verwenden.

CSS wäre dann die Alternative, aber ich wollte erstmal in Erfahrung bringen, ob auch eine Änderung des HTMLs möglich ist.

Leg dir im Backend unter "templates" eine Kopie von mod_login.html5 an. Darin solltest du die Anpassungen vornehmen können.

Du brauchst es nicht umzubenennen, da es ja wahrscheinlich nur ein Login im Frontend gibt. Die Kopie wird dann automatisch verwendet.

Das mit dem Template anlegen ist ein guter Hinweis, hab es bis jetzt immer nur im Originaldateiordner gemacht, so ist es natürlich angenehmer.

Wenn ich jetzt zum Beispiel mir das Modul "Passwort vergessen" anschaue und die Datei mod_password.html5 bearbeite, dann ist für die Anzeige des Formulars prinzipiell nur die Zeile

Code:

<div class="fields"><?= $this->fields ?></div>

verantwortlich. Es wird also ein String ausgegeben, den ich an sich nicht beeinflussen kann oder? Wenn ich mir nun anstelle der Codezeile eigene Inputs definiere, wie du vorgeschlagen hast, dann klappt zwar auch ein Submit, jedoch findet kein Mailversand sowie die Weiterleitung zur Zielseite statt.

Soweit ich das eingegrenzt habe, liegt das an dem Hashwert, der sonst immer bei den Formularen erzeugt wird, kann mich aber natürlich irren. Also ist der Vorschlag leider nicht für mich zielführend oder ich übersehe was.

Zitat:

Zitat von asfga

Das mit dem Template anlegen ist ein guter Hinweis, hab es bis jetzt immer nur im Originaldateiordner gemacht, so ist es natürlich angenehmer.

Niemals! Templates im Originalordner ändern. Immer in /templates. Beim nächsten Update sind nämlich alle deine Änderungen weg ;)

Zitat:

Zitat von asfga

Wenn ich mir nun anstelle der Codezeile eigene Inputs definiere, wie du vorgeschlagen hast, dann klappt zwar auch ein Submit, jedoch findet kein Mailversand sowie die Weiterleitung zur Zielseite statt.

Das habe ich nicht vorgeschlagen. Du wolltest ein zusätzliches <div> um Eingabefelder legen. Das kannst du hier tun.

"Passwort vergessen" ist ein anderes Thema. Ich weiß nicht ob dafür das template mod_password.html5 verantwortlich ist.

@asfga:
Wenn Du ein Template verändern möchtest, ist es oft von Vorteil zu wissen, welche Eingangsdaten denn zur Verfügung stehen. Dazu kannst Du folgende Zeile an geeigneter Stelle ins Template schreiben:

PHP-Code:

<?= $this->showTemplateVars() ?>

Wenn Du die Seite dann aufrufst, wird eine Liste aller Übergabedaten angezeigt, die Du dann mit <?= $this->dieVariable ?> im Template verwenden kannst.

Zitat:

Zitat von asfga

... und da ich Bootstrap verwende, würde ich auch gerne die Klassen verwenden.

Hast Du das Bootstrap Bundle installiert? Da sind entsprechende Templates dabei. Wahrscheinlich musst Du dann gar nichts mehr anpassen. Für den Login gibt es im Bundle das Template mod_login_bs, das man einfach im Loginmodul als individuelles Template wählt.

Gruß
Mathias

Zitat:

Zitat von Kahmoon

Niemals! Templates im Originalordner ändern. Immer in /templates. Beim nächsten Update sind nämlich alle deine Änderungen weg ;)

Da hast du natürlich recht, wusste mir zu dem Zeitpunkt nur nicht anders zu helfen, hab ich nun bereits alles korrigiert.

Zitat:

Das habe ich nicht vorgeschlagen.

Stimmt, hatte ich falsch in Erinnerung, sorry.

Zitat:

Hast Du das Bootstrap Bundle installiert? Da sind entsprechende Templates dabei. Wahrscheinlich musst Du dann gar nichts mehr anpassen. Für den Login gibt es im Bundle das Template mod_login_bs, das man einfach im Loginmodul als individuelles Template wählt.

Ja das habe ich installiert und nutze es zum Teil auch, aber dort werden die Inputs ja auch über eine Variable ausgegeben, deren Inhalt ich nicht so direkt anpassen kann.

Zitat:

<?= $this->showTemplateVars() ?>

Glaube, das ist doch der richtige Weg, der Hinweis mit der Variablenausgabe war es dann, bin ich nicht drauf gekommen...könnte ich theoretisch folgendes im jeweiligen Template machen:

PHP-Code:

<?php $this->Template->fields = "<div class='row'><div class='col-md-12'>Test</div></div>"; ?>

so dass dann die eigentliche HTML Struktur überschrieben wird und ich nun meine eigene implementieren kann oder is das eher unangebracht?

Danke für die bisherige Hilfe!

Ich habs mir gerade nochmal genau angeguckt.

das hier ist das Bootstrap-Template für den Login: bs_login_default.html5 Und das sieht so aus:

HTML-Code:

<form<?php if ($this->action): ?> action="<?= $this->action ?>"<?php endif; ?> id="<?= $this->formId ?>" method="post"> <div class="formbody"> <?php if ($this->message): ?> <p class="error"><?= $this->message ?></p> <?php endif; ?> <input type="hidden" name="FORM_SUBMIT" value="<?= $this->formId ?>"> <input type="hidden" name="REQUEST_TOKEN" value="{{request_token}}"> <input type="hidden" name="_target_path" value="<?= $this->targetPath ?>"> <?php if ($this->logout): ?> <p class="login_info"><?= $this->loggedInAs ?><br><?= $this->lastLogin ?></p> <?php else: ?> <input type="hidden" name="_failure_path" value="<?= $this->failurePath ?>"> <input type="hidden" name="_always_use_target_path" value="<?= $this->forceTargetPath ?>"> <div class="widget form-group widget-text"> <label for="username"><?= $this->username ?></label> <input type="text" name="username" id="username" class="text form-control" value="<?= $this->value ?>" required> </div> <div class="widget form-group widget-password"> <label for="password"><?= $this->password ?></label> <input type="password" name="password" id="password" class="text form-control password" value="" required> </div> <?php if ($this->autologin): ?> <div class="widget form-group widget-checkbox"> <fieldset class="checkbox_container"> <div class="custom-control custom-checkbox"> <input type="checkbox" name="autologin" class="custom-control-input" id="autologin"> <label class="custom-control-label" for="autologin"><?= $this->autoLabel ?></label> </div> </fieldset> </div> <?php endif; ?> <?php endif; ?> <div class="widget form-group widget-submit"> <button type="submit" class="submit <?= $this->buttonClass ?>"><?= $this->slabel ?></button> </div> </div> </form>

Da sollten sich die CSS-Klassen ergänzen lassen.

Gruß
Mathias

Ja dort ist es möglich, aber z.B. beim Registrierungsformular meines Erachtens eher nicht.

Das dafür zuständige Template ist member_grouped_bs.html5 und zieht sich die Inputfelder aus

HTML-Code:

<fieldset> <legend><?= $legend ?></legend> <?= implode('', $category) ?> </fieldset>

Da ist dann die Variante über die TemplateVars geeigneter.

Ich muss mich nochmal melden...Ich hab wie oben beschrieben das HTML Gerüst angepasst, jedoch ist mir dann eingefallen, dass ich den Hash für das Captcha brauche, den kann ich ja nicht statisch einbinden, sondern brauch direkt eine Funktion von Contao.

Würde ich die Sicherheitsabfrage für das Formular deaktivieren, würde alles soweit funktionieren, hätte aber keinen Spamschutz in Form des Captchas. Mit Alternativen habe ich mich noch nicht befasst. Soweit ich das erblicken konnte, wird für das Captcha das Template fd_control_captcha_bs_default.html5 genutzt. Gibt es jetzt eine Möglichkeit, dieses händisch per Code einzugeben oder durch die TemplateVars zu integrieren?

Muss den Thread leider nochmal hoch holen...Ich bin aktuell ein wenig am stagnieren. Ich habe jetzt zwar mein Formular für die Registrierung und es funktioniert auch, sofern alle Daten je nach Validationsvorgaben eingegeben werden.

Wird jedoch etwas falsches eingegeben, dann erscheint das gleiche Formular erneut mit leeren Inputs, weil an dieser Stelle eigentlich eine Ausgabe der Eingabefehler angezeigt wird. Da ich aber mein eigenes Template für die Registrierung verwende, was im Prinzip pro Inputfeld wie folgt aussieht:

PHP-Code:

<div class="row form-group mandatory"> <label class="col-sm-3 mandatory" for="ctrl_firstname"> <span class="invisible">Pflichtfeld </span>Vorname:<span class="mandatory">*</span> </label> <div class="col-sm-9 widget widget-text"> <input type="text" name="firstname" id="ctrl_firstname" class="form-control form-control-sm mandatory" value="" required> </div> </div>

wird natürlich keine Ausgabe der Fehlermeldungen erzeugt.

1. Frage: Gibt es eine Möglichkeit, die Fehlermeldungen in das Template zu integrieren, unter showTemplateVars habe ich leider nichts gefunden?

2. Frage: Ich kann die einzelnen Felder mit z.B.

PHP-Code:

<?= $this->login["username"]; ?>

ausgeben, dann würde ich auch die Fehlermeldungen bekommen, aber nicht mehr meine angepasste HTML-Struktur. Ich habe kein Template gefunden, wo man die HTML-Struktur der Felder ändern kann, ich denke die sind in tiefergehenden Dateien hinterlegt, weshalb eine Änderung in diesen nicht sinnvoll wäre oder?

3. Frage: Habt ihr eine mögliche Lösung parat, um mein HTML-Gerüst und die Fehlermeldungen gleichzeitig verwenden zu können?

Schau mal oben im Post #11.
Da gibt es ganz am Anfang einen Abschnitt, der eine eventuelle Fehlermeldung anzeigt.

Funktioniert leider nicht bzw. wird mir lediglich ein NULL ausgegeben. Ich nehme an, die Fehlerausgaben zwischen Registrierungsformular und das in Post #11 gezeigte Loginformular unterscheiden sich in diesem Punkt auch.