Autocomplete für Formularfelder

[BFS]

Hallo,

ich suche nach einer Möglichkeit die Contao Formularfelder z.B. mit dem autocomplete="given-name"-Attribut zu versehen und weiteren für andere Felder. Ich nutze Contao 4.13.30 und sehe aktuell keinen Weg wie ich die Felder hinzufügen kann ... Gibt es da eine Möglichkeit?

Habe das hier installiert:
https://packagist.org/packages/heimr...omplete-bundle
Sehe aber im Formular keinerlei Änderungen ...

[zoglo]

Hallo,

ich suche nach einer Möglichkeit die Contao Formularfelder z.B. mit dem autocomplete="given-name"-Attribut zu versehen und weiteren für andere Felder. Ich nutze Contao 4.13.30 und sehe aktuell keinen Weg wie ich die Felder hinzufügen kann ... Gibt es da eine Möglichkeit?

Habe das hier installiert:
https://packagist.org/packages/heimr...omplete-bundle
Sehe aber im Formular keinerlei Änderungen ...

Siehe Readme auf GitHub:
https://github.com/heimrichhannot/co...w-does-it-work

Du musst dir das eval-Feld selber ergänzen. Ich denke aber, dass dieses Bundle eher als Framework für andere Heimrich Hannot Plugins benutzt wird.

Infos zu DCA-Anpassungen sind aber in der Dokumentation drin:
https://docs.contao.org/manual/de/anleitungen/dca/

Ohne Plugin
In den meisten Fällen reicht eine Templateanpassung von

• Contao 5.1 und höher: form_inline.html5
• Contao 4.x: form_wrapper.html5

wo du dem <form> einfach ein autocomplete="on" als Attribut gibst (Siehe hier).
Wenn du also "name", "tel", "email" oder was auch immer genutzt hast, reicht es.


Edit -> Die Anpassung unten funktioniert nur, wenn das Attribut auch richtig geparsed wird. Obere Anpassung sollte jedoch reichen, wenn du dich an die Standardnamen hälst: https://developer.mozilla.org/en-US/...s/autocomplete


DCA-Anpassungen:

Sofern du aber andere values nutzt, welche nicht den Standards entsprechen, mit Dropdown usw... würde ich DCA-Anpassungen vorschlagen für "text-fields":

1. Im Root deiner Contao-Installation folgende Ordner-Struktur erstellen contao/dca/
2. Hier eine neue Datei erstellen **tl_form_field.php**
3. Folgenden Inhalt in diese Datei ergänzt, wobei in den Optionen der Select gerade nur die gängigen Autocomplete-Attribute drin sind gerade (ergänze dir die Optionen einfach anhand dessen: https://developer.mozilla.org/en-US/...s/autocomplete)

<?php

use Contao\CoreBundle\DataContainer\PaletteManipulator;

$GLOBALS['TL_DCA']['tl_form_field']['fields']['autocomplete'] = [
    'inputType'  => 'select',
    'options'    => [
        'name'              => 'Name',
        'given-name'        => 'Vorname',
        'family-name'       => 'Nachname',
        'street-address'    => 'E-Mail-Adresse',
        'address-level1'    => 'Bundesstaat',
        'address-level2'    => 'Stadt',
        'postal-code'       => 'Postleitzahl',
        'tel'               => 'Telefonnummer',
        'email'             => 'E-Mail-Adresse',
        'username'          => 'Benutzername'
    ],
    'eval'       => ['includeBlankOption'=>true, 'tl_class'=>'w50'],
    'sql'        => "varchar(32) NOT NULL default ''"
];

PaletteManipulator::create()
    ->addField('autocomplete', 'label')
    ->applyToPalette('text', 'tl_form_field')
;

4. Du nun noch dein Template anpassen musst: form_inline.html5 oder form_wrapper.html5 (Wie oben bereits beschrieben)
5. Du nun im Contao-Manager unter Maintenance auf Composer Class Loader -> Dump Autoloader klickst
6. Nach klicken des Dump Autoloaders nochmal die Database-Migrations durchlaufen lässt, damit das neue Feld nun in der Datenbank verfügbar ist.
7. Du nun dein form_text.html5 Template anpasst und bei <input> nun noch folgendes ergänzt:

<input<?= $this->autocomplete ? ' autocomplete="' . $this->autocomplete . '"' : '' ?> type="

Die Übersetzungen für das Feld musst du dir aus den DCA-Anpassungen anschauen, hierfür einfach eine tl_form_field.xlf erstellen für das autocomplete-Feld (Soviel wollte ich nun doch nicht erklären )

Danach hast du ein neues "Select-Feld", welches im Formularfeld Text zur Verfügung steht.

[BFS]

Vielen Dank für die ausführlichen Infos dazu. Ich denke die sind wahrscheinlich auch für andere nützlich. Ich habe mich zunächst für den Weg der Templateanpassung entschieen: form_wrapper.html5