Take a look at the original Dribbble shot on floatlabel.com

[ad_1]

Mit Hilfe des mobilen Formular-Interaktionsdesigns von Matt Smith erstellen wir eine beeindruckende Formular-Interaktion fÌr das Web, die sowohl schön als auch mit HTML, CSS und JavaScript zugÀnglich ist.

Überblick

Formulardesign und Interaktion im Web können ein sensibles Thema sein. Eine Vielzahl von Formularzugriffsbedenken und Best Practices kann das Entwerfen einer Ìberzeugenden Formularinteraktion sehr schwierig machen, im Gegensatz zum Formulardesign auf nativen Plattformen.

Matt Smith hat kÃŒrzlich eine ÃŒberzeugende Formularinteraktion erstellt, die er bei Dribbble gepostet hat:

Take a look at the original Dribbble shot on floatlabel.com
Werfen Sie einen Blick auf die Original-Dribbble-Aufnahme auf floatlabel.com

Diese Formularinteraktion wurde zwar fÃŒr eine native iOS-Anwendung entwickelt, kann jedoch mithilfe von HTML, CSS und Javascript fÃŒr das Web erneut erstellt werden, wobei auch die Bedenken hinsichtlich des Zugriffs auf das Formular beseitigt werden.

Das Float-Label-Konzept hat einige Aufmerksamkeit erregt, was zu Diskussionen und Experimenten im gesamten Web gefÃŒhrt hat.

Anstatt die gleichen Formularfelder in Matts Design zu verwenden, erstellen wir ein einfaches Kontaktformular, das Sie auf Ihrer eigenen Website verwenden können. Also lass uns eintauchen!

Form-Anatomie

Lassen Sie uns zunÀchst die von Matt erstellten Formular-Interaktionen beobachten und aufzeichnen. Auf diese Weise können wir vorgeben, wie unsere Form gestaltet werden soll.  Dadurch erhalten Sie auch ein gutes VerstÀndnis dafÌr, wie Sie das Formular gestalten und die Interaktionen mit JavaScript erstellen.

Formularstruktur

Das Formular enthÀlt die folgenden Elemente, die wir in HTML Ìbersetzen können: 

  • <label>-Elemente 
  • <input>-Elemente
  • <textarea>-Elemente
  • placeholder-Attribute
form-elements

Formularelement-Interaktionen

Durch die Beobachtung der Interaktionen, die Matt erstellt hat, können wir Regeln fÌr die Interaktion der Formularelemente formulieren, die wir erstellen werden. Diese Regeln werden beim Erstellen unserer Markup-, Stilregeln und JavaScript-Interaktionen hilfreich sein.

  • auf Seite laden:

    • <label>-Elemente

      • Versteckt, hervorgehoben mit einer Lichtfleck-Farbe.

    • <input> & <textarea>-Elemente

      • Zeigt den Platzhaltertext des Elements an.

  • im Fokus:

    • <label>-Elemente

      • Wenn das entsprechende Eingabefeld des Labels leer ist, blenden Sie das Label aus. Andernfalls heben Sie die Farbe der Beschriftung herab.

    • <input> & <textarea>-Elemente

      • Wenn das Feld leer ist, zeigen Sie den Platzhaltertext des Elements an. Anderenfalls zeigen Sie den vom Benutzer eingegebenen Text an.

  • beim keyup:

    • <label>-Elemente

      • Wenn das entsprechende Eingabefeld des Labels leer ist, blenden Sie das Label aus. Ansonsten zeigen Sie das Label.

    • <input> & <textarea>-Elemente

      • Wenn das Feld leer ist, zeigen Sie den Platzhaltertext an. Anderenfalls zeigen Sie den vom Benutzer eingegebenen Text an.

  • auf UnschÀrfe:

    • <label>-Elemente

      • Wenn das entsprechende Eingabefeld leer ist, blenden Sie die Beschriftung aus. Andernfalls heben Sie die Farbe ab.

    • <input> & <textarea>-Elemente

      • Wenn das Feld leer ist, zeigen Sie den Platzhaltertext an. Anderenfalls zeigen Sie den vom Benutzer eingegebenen Text an.

Nachdem wir nun die HTML-Elemente des Formulars zusammen mit den Interaktionsregeln festgelegt haben, können wir mit der Erstellung beginnen.

Grundlegendes HTML

Beginnen wir mit dem grundlegenden Startercode.


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Contact Me</title>

    <!-- Viewport tag to make things responsive -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Link to the stylesheet we will create -->
    <link rel="stylesheet" href="styles.css">

    <!-- HTML5 shiv for older browsers -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>

    <!-- Form Markup Will Go Here -->

    <!-- Google's hosted version of jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <!-- Link to the javascript file we will create -->
    <script src="scripts.js"></script>
</body>
</html>

Erstellen des Formular-Markups

Nun erstellen wir das Markup fÃŒr unser Formular:


<section class="container">
    <h1 class="title">Contact Me</h1>
    <form id="form" class="form" action="#" method="get">
        <ul>
            <li>
                <label for="name">Your Name:</label>
                <input type="text" placeholder="Your Name" id="name" name="name" tabindex="1"/>
            </li>
            <li>
                <label for="email">Your Email:</label>
                <input type="email" placeholder="Your Email" id="email" name="email" tabindex="2"/>
            </li>
            <li>
                <label for="message">Message:</label>
                <textarea placeholder="Message
" id="message" name="message" tabindex="3"></textarea>
            </li>
        </ul>
        <input type="submit" value="Send Message" id="submit"/>
    </form>
</section>

Hier richten wir einen Formularcontainer mit einer Überschrift “Contact Me” und den entsprechenden Formularelementen in Listenelementen ein. Beachten Sie, dass wir auch das Email-Feld type="email" zugewiesen haben.  Das bietet kontextabhÀngige virtuelle Tastaturen fÃŒr GerÀte, die diese unterstÃŒtzen, sowie eine einfache, vom Browser unterstÃŒtzte ÜberprÃŒfung fÃŒr Browser, die HTML5-Eingabetypen unterstÃŒtzen. 

FÃŒr diejenigen, die dies nicht tun, wird es zu einem einfachen Textfeld.Was wir jetzt haben, sind die Grundlagen eines Formulars, das ÃŒberall funktioniert und ordnungsgemÀß strukturiert ist, um einen einfachen Zugriff zu ermöglichen.

basic-form

Hinweis: In diesem Lernprogramm wird die serverseitige FormularÃŒbergabe nicht behandelt. Sie können also die Übermittlungsmethode des Formulars nach Bedarf Àndern.

Grundlegende Seitenvorlagen erstellen

Wir haben jetzt ein Arbeitsformular in HTML. Jetzt machen wir unseren ersten Schritt zur schrittweisen Verbesserung: die Anwendung von CSS-Styles.  Lassen Sie uns Stile erstellen, um unser Formular optisch ansprechender zu machen, und dabei auch daran zu denken, dass das Formular funktional und zugÀnglich bleibt.

Lassen Sie uns ein einfaches Design fÃŒr den Seiten- und Formularcontainer erstellen In <head> unseres Dokuments haben wir einen Link zu einer Datei namens styles.css erstellt, sodass wir diese Datei jetzt erstellen und im Stammverzeichnis unseres Projekts speichern.

Wir beginnen mit dem Importieren der Stile aus Eric Meyers CSS-Reset in unsere eigene Datei. Sie können diese Stile hier greifen und in Ihr eigenes Stylesheet kopieren.

Als NÀchstes erstellen wir einige allgemeine Seitenstile:


/* General
==================================== */
*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    background: #eaedf1;
}

body, input, textarea {
    font: 1em/1.5 Arial, Helvetica, sans-serif;
}

.container {
    max-width: 25em;
    margin: 2em auto;
    width: 95%;
    
}

.title {
    font-size: 1.5em; 
    padding: .5em 0;
    text-align: center; 
    background: #323a45;
    color: white;
    border-radius: 5px 5px 0 0;
}

Sie werden feststellen, dass wir beim Formeln von Formularen den von Paul Irish vorgeschlagenen Ansatz fÃŒr das Box-Modell verwenden: box-sizing: border-box;.

Jetzt haben wir etwas besseres, aber es wird noch mehr Arbeit brauchen.

basic-form-styles

Formularlistenformate erstellen

Wenden wir einige Stile auf unsere Formularelemente an. Dadurch wird unser Formular dem von Matt Àhnlicher.

Zuerst werden wir die Listenelemente formatieren, die unsere Formularelemente enthalten.


/* Form
==================================== */
.form ul {
    background: white;
    margin-bottom: 1em;
}

.form li {
    border: 1px solid #ccc; 
    border-bottom: 0;
    margin-bottom: 0px; 
    position: relative; 
}

.form li:first-child {
    border-top: 0;
}

.form li:last-child {
    border-bottom: 1px solid #ccc;
}

Jetzt haben wir alle unsere Formularelemente visuell enthalten. Sie sollten so etwas haben:

basic-form-list-styles

Formularelementstile erstellen

Gestalten Sie unsere Formularelemente weiterhin so, dass sie zum Design von Matt passen, und berÌcksichtigen Sie dabei auch die EinschrÀnkungen der Barrierefreiheit des Webs.

Formatieren Sie die Eingabefelder als große Elemente auf Blockebene im Formular:


label, input, textarea {
    display: block; 
    border: 0;
}

input, textarea { 
    width: 100%; 
    height: 100%; 
    padding: 2.25em 1em 1em; 
    outline: 0;
}

textarea {
    height: 16em;
    resize: none; 
}

Sie sollten so etwas haben:

form-input-styles

Gestalten Sie dann die <label>-Elemente des Formulars so, dass sie etwa ein Drittel des Weges von der Spitze jedes Eingabeblocks entfernt positioniert sind.


label {
    font-size: .8125em; /* 13/16 */ 
    position: absolute; 
    top: 1.23em;
    left: 1.23em;
    color: #f1773b;
    opacity: 1;
}

Hinweis: Haben Sie opacity bemerkt? Wir werden diese Eigenschaft (zusammen mit der top-Eigenschaft) verwenden, um das <label>-Element spÀter mit JavaScript zu animieren.

Sie sollten etwas haben, das dem Formdesign von Matt sehr Àhnlich sieht.

form-label-styles

Als nÀchstes mÌssen Sie die Formularsenden-Taste formatieren.


input[type="submit"] {
    background: #f1773b;
    margin-bottom: 1em;
    color: white;
    border-radius: 3px;
    padding: .75em;
    -webkit-appearance: none; /* remove default browser <button> styling */
    -webkit-transition: .333s ease -webkit-transform;
    transition: .333s ease transform;
}
input[type="submit"]:hover {
    -webkit-transform: scale(1.025);
    transform: scale(1.025);
    cursor: pointer;
}
input[type="submit"]:active {
    -webkit-transform: scale(.975);
    transform: scale(.975);
}

Beachten Sie, dass wir die Attributauswahl verwendet haben, um nur die SchaltflÀche Senden als Ziel festzulegen. Wir haben einige grundlegende Stile zusammen mit einer einfachen Interaktion in den ZustÀnden :hover und :active hinzugefÃŒgt (Àltere Browser, die keine CSS–transforms unterstÃŒtzen, haben einfach keine ausgefallene Interaktion, aber das Formular funktioniert immer noch).  Sie sollten jetzt so etwas haben:

form-submit-styles

Unser Formular wurde in einer Weise gestaltet, die dem Design von Matt Àhnelt, aber auch darauf zugeschnitten ist, die Bedenken hinsichtlich der Barrierefreiheit des Internets zu beseitigen. Beachten Sie, dass ohne JavaScript immer noch auf das Formular zugegriffen werden kann, wÀhrend die Formularfelder jederzeit angezeigt werden.  Benutzer mit Àlteren Browsern, die das placeholder-Attribut nicht unterstÌtzen, können weiterhin die Formularfelder sehen und feststellen, welche Informationen von ihnen benötigt werden.

DarÃŒber hinaus decken die <input> und <textarea></textarea>-Elemente den gesamten Formularfeldblock ab, sodass der Zielbereich fÃŒr jede Eingabe recht groß und zugÀnglich ist.

Zum Beispiel wÃŒrde das Formular an dieser Stelle in Internet Explorer 8 aussehen:

form-ie

Verwenden von JavaScript fÃŒr ein progressiv verbessertes Formular

Wir sollten jetzt darÃŒber nachdenken, wie die mit JavaScript erstellte Interaktion von Matt implementiert werden kann. Dies wird weitgehend durch das HinzufÃŒgen und Entfernen von CSS-Klassen erreicht.

Direkt vor dem schließenden <body>-Tag stellen wir fest, dass wir einen Link zu unserer benutzerdefinierten JavaScript-Datei namens scripts.js setzen. Wir können diese Datei jetzt erstellen und dem Browser mitteilen, dass er den Code ausfÃŒhren soll, wenn das DOM fertig ist:


$(document).ready(function(){
    // Our code here
});

ÜberprÃŒfen auf placeholder-UnterstÃŒtzung

Falls Sie das nicht bemerkt haben, hÀngt diese Interaktion stark von der UnterstÌtzung von Platzhaltern ab. Das Platzhalterattribut wird in modernen Browsern weitgehend unterstÌtzt.  Da unsere Formularinteraktion von der PlatzhalterunterstÌtzung abhÀngt, testen wir zunÀchst, ob der Browser Platzhaltertext unterstÌtzt. In diesem Fall implementieren wir die Formularinteraktion. In diesem Fall implementieren wir die Formularinteraktion. Wenn dies nicht der Fall ist (IE8 & IE9), stellen wir einfach das Basisformular ohne JavaScript-Interaktion bereit. Progressive Verbesserung fÌr den Sieg!

Zuerst wollen wir mit $.support() von jQuery feststellen, ob der Browser Platzhaltertext unterstÃŒtzt. Dadurch wird $.support.placeholder je nach UnterstÃŒtzung des Browsers fÃŒr Platzhaltertext auf true oder false festgelegt.


// Test for placeholder support
$.support.placeholder = (function(){
    var i = document.createElement('input');
    return 'placeholder' in i;
})();

Wenn Platzhaltertext unterstÌtzt wird, können wir die <label>-Elemente beim Laden der Seite ausblenden. Wie bereits erwÀhnt, wird durch das Ausblenden der Etiketten mit JavaScript nach dem Laden der Seite sichergestellt, dass Browser mit deaktiviertem JavaScript (und solche ohne PlatzhalterunterstÌtzung) das Formular weiterhin verwenden können.


// Hide labels by default if placeholders are supported
if($.support.placeholder) {
    $('.form li').each(function(){
        $(this).addClass('js-hide-label');
    });  

    // Code for adding/removing classes here
}

Beachten Sie, dass wir jedem Listenelement mit dem Namen js-hide-label eine Klasse hinzugefÃŒgt haben. Dies liegt daran, dass gemÀß den Interaktionsregeln zu Beginn des Lernprogramms das Standardaussehen des Formulars die Beschriftungen des Formularfelds ausgeblendet hat.  Die js-hide-label-Klasse wird auf ÃŒbergeordnete <li>-Elemente angewendet, wenn das untergeordnete <input>-Element keinen Benutzerinhalt enthÀlt.

Um das VerstÀndnis und die Wartbarkeit des Codes zu verbessern, setzen wir den Klassen, die wir hinzufÃŒgen oder entfernen, JavaScript mit ‘js’ voran.  FÃŒgen wir diese Klasse zu unserem Stylesheet hinzu und blenden Sie alle untergeordneten label-Elemente aus der Ansicht aus. Erinnern Sie sich, wie wir die opacity-Regel verwenden sollten? Hier verstecken wir die <label>-Elemente:


.js-hide-label label {
    opacity: 0; 
    top: 1.5em
}

Hinweis: Die opacity-Eigenschaft wird in allen modernen Browsern unterstÌtzt. IE8 wird es nicht erkennen, aber das ist in Ordnung, da IE8 auch keine Platzhalterattribute unterstÌtzt. Daher fÌhren wir kein JavaScript aus, um die Klasse in IE8 anzuwenden. Win-Win!

Ein Hinweis zu ÜbergÀngen

Wenn Sie genau hinschauen, zeigt das Interaktionsdesign von Matt, dass die Beschriftungen des Formularfelds nicht nur erscheinen und verschwinden, sondern auch mit ein wenig Auf und Ab.  Da unsere Beschriftungselemente absolut positioniert sind, kann der Browser diesen Effekt Àndern, wenn wir eine Klasse hinzufÃŒgen, die die obere Position (oder links, rechts oder unten) Àndert. Alles, was wir tun mÃŒssen, ist, dem Label selbst eine Übergangseigenschaft hinzuzufÃŒgen.

Gehen wir zurÃŒck zu unserem label-Element im CSS und fÃŒgen Sie eine Übergangseigenschaft fÃŒr die Eigenschaften top und opacity hinzu:


label {
    -webkit-transition: .333s ease top, .333s ease opacity;
    transition: .333s ease top, .333s ease opacity;
}

Auf diese Weise können die Etiketten nicht nur glatt erscheinen und verschwinden, sondern auch, wenn sie vollstÀndig undurchsichtig oder transparent werden.

form-hiding-label

Beim Laden der Seite sollten Sie jetzt etwa so etwas haben (natÃŒrlich in einem modernen Browser).

form-hidden-labels

Entfernen der Markierungsfarbe

Wie bereits erwÀhnt, fÌgen wir Klassen zu den <li>-Elementen hinzu und entfernen sie und richten uns an alle Kinder, die ein Styling benötigen. An diesem Punkt (beim Laden der Seite) haben wir eine Klasse von js-hide-label hinzugefÌgt, die alle Labels im Formular verbirgt. Jetzt brauchen wir eine weitere Klasse, um die Markierungsfarbe aus den <label>-Elementen zu entfernen:


.js-unhighlight-label label {
    color: #999 
}

Ereignis-Listener hinzufÃŒgen

Jetzt haben wir ein Formular, das schrittweise erweitert wird und fÃŒr einige JavaScript-Interaktionen (in modernen Browsern) bereit ist, wenn der Benutzer mit dem Formular zu interagieren beginnt.

In dem Platzhalter if-Anweisung, die wir oben geschrieben haben, beginnen wir, unsere js-Klassen im richtigen Moment hinzuzufÃŒgen und zu entfernen. Zuerst wÀhlen wir unsere Formularelemente aus und fÃŒgen einen Ereignis-Listener fÃŒr die blur-, fokus– und keyup-Ereignisse hinzu (wir verwenden keyup statt keydown oder keypress, da diese Ereignisse vorzeitig ausgelöst werden):


$('.form li').find('input, textarea').on('keyup blur focus', function(e){
    
    // Cache our selectors
    var $this = $(this),
        $parent = $this.parent();

    // Add or remove classes
    if (e.type == 'keyup') {
        // keyup code here                    
    } 
    else if (e.type == 'blur') {
        // blur code here
    } 
    else if (e.type == 'focus') {
        // focus code here
    }
});

Hier ist eine kurze ErklÀrung, was wir hier machen:

  • Wir wÀhlen alle Listenelemente aus, die Teil unseres Formulars $('.form li') sind. In dieser Auswahl finden wir dann alle <input> und <textarea> Felder .find('input, textarea'). Das stellt sicher, dass die letzte Eingabe in unserem Markup (die SchaltflÀche Senden) nicht in unserer Auswahl enthalten ist.
  • Wir haben die ausgewÀhlten Selektoren zwischengespeichert. Das ist eine gute AuffÃŒhrungspraxis. Wenn Sie dem Variablennamen ein vorangestelltes ‘$’ voranstellen, wissen wir, dass diese bestimmte Variable ein jQuery-Objekt ist.
  • Wir haben die blur-, focus– und keyup-Ereignisse kombiniert und den Ereignistyp einfach mit e.type ÃŒberprÃŒft, um zu bestimmen, welche Klassen zu bestimmten Zeitpunkten hinzugefÃŒgt oder entfernt werden.

Codierung beim keyup

Entsprechend den Interaktionsregeln, die wir zu Beginn aufgestellt haben und die dem Design von Matt entsprechen, möchten wir, wenn ein Benutzer mit der Texteingabe beginnt (nicht wenn er sich auf das Feld konzentriert), das Label anzeigen.

Bei Verwendung des keyup-Ereignisses kann jedes Mal, wenn der Benutzer ein Zeichen eingibt, ÃŒberprÃŒft werden, ob das Eingabefeld leer ist (dieser Code wird eingefÃŒgt, if (e.type == 'keyup'):


if( $this.val() == '' ) {
    $parent.addClass('js-hide-label'); 
} else {
    $parent.removeClass('js-hide-label');   
}

Beachten Sie, dass unsere Logik so funktioniert:

  • Wenn der Eingabewert leer ist, blenden Sie die Beschriftung aus, indem Sie die Klasse ‘js-hide-label’ hinzufÃŒgen.
  • Andernfalls (der Wert der Eingabe ist nicht leer), zeigen Sie die Beschriftung an, indem Sie die Klasse ‘js-hide-label’ entfernen.

Sie sollten jetzt etwas haben, das folgendermaßen funktioniert, wenn Sie Text in ein Eingabefeld eingeben oder löschen:

form-hiding-label

Kodierung bei blur

GemÀß unseren Interaktionsregeln wissen wir (wieder), dass, wenn ein Benutzer den Fokus von einem Eingabefeld zum nÀchsten verschiebt (blur-Ereignis), die Farbe des <label>-Elements abhÀngig von dem Benutzer herabgesetzt werden sollte hat tatsÀchlich etwas in das Feld eingegeben.

Innerhalb des else if (e.type == 'blur') fÃŒgen wir den folgenden Code hinzu:


if( $this.val() == '' ) {
    $parent.addClass('js-hide-label');
} 
else {
    $parent.removeClass('js-hide-label').addClass('js-unhighlight-label');
}

Beachten Sie, dass unsere Logik so funktioniert:

  • Wenn der Eingabewert leer war, als der Benutzer den Fokus entfernte, blenden Sie das Label aus, indem Sie die Klasse js-hide-label anwenden.
  • Andernfalls (der Wert der Eingabe war nicht leer, wenn der Benutzer den Fokus entfernte) wird das Label angezeigt, indem die Klasse js-hide-label entfernt wird, und die Farbe des Labels wird durch HinzufÃŒgen der Klasse ‘js-unhighlight-label’ zurÃŒckgesetzt.

Sie sollten jetzt etwas haben, das die Farbe der Beschriftung herabsetzt, wenn Sie den Fokus entfernen, wie folgt:

form-blur

Kodierung im fokus

Als letztes mÃŒssen wir eine kleine Logik hinzufÃŒgen, wenn ein Benutzer sich auf eine Eingabe konzentriert. Befolgen Sie nach unseren Interaktionsregeln das folgende JavaScript im Abschnitt else if (e.type == 'focus'):


if( $this.val() !== '' ) {
    $parent.removeClass('js-unhighlight-label');
}

Unsere Logik funktioniert so:

  • Wenn der Wert der Eingabe nicht leer ist, entfernen Sie die Klasse ‘js-unhighlight-label’ der ÃŒbergeordneten Klasse.

Wenn ein Benutzer sich nun auf ein Formularfeld konzentriert und dieses Feld nicht leer ist, wird die Beschriftung wie folgt mit der Markierungsfarbe hervorgehoben:

form-focus

Bonuspunkte

Wir können noch viel mehr mit diesem Formular machen, einschließlich der Validierung auf Client- und Serverseite. Wir könnten auch einige weitere Klassen erstellen, um gÃŒltige und ungÃŒltige Feldwerte zu gestalten.  Beispielsweise könnten wir einer Klasse von ‘js-error’ Stile hinzufÃŒgen, die sich auf das ÃŒbergeordnete <li>-Element beziehen, wenn der Wert der Eingabe ungÃŒltig ist, wie folgt:


.js-error {
    border-color: #f13b3b !important; /* override all cases */
}
.js-error + li {
    border-top-color: #f13b3b;
}
.js-error label {
    color: #f13b3b;
}

Diese Arten von Validierungsstilen könnten dazu fÌhren, dass unser Formular in etwa wie folgt aussieht:

bonus-form-error

Dieses Tutorial sollte jedoch zeigen, wie wir ein barrierefreies, schrittweise verbessertes Formular erstellen können, das das Design von Matt nachahmt. Und ich muss sagen, ich denke, wir haben es gut gemacht.

FÌhlen Sie sich frei, dieses Formular zu kopieren, zu Àndern oder zu verbessern, wie auch immer Sie in Ihre eigenen Projekte passen!

NÃŒtzliche Links



[ad_2]

Source link