Forms erstellen mit Bootstrap 5

HTML / Von
Hier erkläre ich dir wie du mit der Framework Bootstrap 5 und der Form Klasse einen Newsletter Formular erstellen kannst. Dazu verwenden wir noch den Dienst von form.taxi. Wir benutzen das „FREE“ Packet was vollkommen ausreichend und kostenlos ist. Damit lassen sich 3 Formulare mit E-Mail-Benachrichtigungen erstellen. Dieser Service wurde von Reinhard Söllradl aus Österreich angeboten der auch noch viele andere großartige Sachen Richtung Online Dienstleistungen anbietet.

Wichtig: form.taxi wird nicht funktionieren wenn die Webseite nicht mit einer Domain verbunden ist. Am besten Rate ich dir denn Code auf einen Webspace hochzuladen.
Als erstes erstellen wir einen „Tag“ mit <form> in der du deinen Individuellen Link aus der form.taxi nimmst. 
<!-- https://form.taxi/de -->
<!-- Newsletter -->
<form action="https://form.taxi/s/DEINCODE" method="POST">

</form>
Als nächstes erstellen wir eine <div> Klasse in der wir das erste Eingabe Feld erstellen. Diese wird zwischen <form> und </form> eingefügt wie die folgenden Sachen. 
    <!-- 2 Eingabefelder fuer Vor- und Nachname -->
    <div class="row mb-4">
        <div class="col">
            <div class="form-outline">
                <input type="text" id="vornameID" class="form-control" />
                <label class="form-label" for="vornameID">Vorname</label>
            </div>
        </div>
        <div class="col">
            <div class="form-outline">
                <input type="text" id="nachnameID" class="form-control" />
                <label class="form-label" for="NachnameID">Nachname</label>
            </div>
        </div>
    </div>
Eine Checkbox für die Datenschutzerklärung wäre auch ratsam. 
    <!-- Checkbox für die Datenschutzerklearung -->
    <div class="form-check d-flex justify-content-center mb-4">
        <input class="form-check-input me-2" type="checkbox" value="" id="datenschutzID"/>
        <label class="form-check-label" for="datenschutzID">
            Ich willige ein, dass diese Website meine übermittelten Informationen speichert, sodass meine Anfrage beantwortet werden kann.
        </label>
    </div>
Um das Versenden des Formulars zu ermöglichen, benötigen wir einen Button. 
    <!-- Senden button -->
    <button type="submit" value="Send" class="btn btn-secondary btn-block btn-lg mb-4">Abonnieren</button>
Und Voilà es funktioniert!
Erklärung

Wenn du große Datenmengen – beispielsweise Bilder – oder vertrauliche Formulardaten zum Server senden willst, ist die GET-Methode nicht ideal, da sämtliche Daten, die du übertragen, offen in die Adresszeile des Browsers geschrieben werden.

In diesen Fällen ist die POST-Methode angemessen. Diese schreibt die URL-Parameter nicht in die URL, sondern hängt sie an den HTTP-Header an.

Meistens werden POST-Requests im Zusammenhang mit Onlineformularen verwendet.
Hier das Beispiel eines Formulars, das den Namen, einer Nachricht und die E-Mail-Adresse aufnimmt und mittels POST an den Server sendet:

<form action="https://form.taxi/s/DEINCODE" method="POST">
  <input type="text" name="Name">
  <input type="email" name="Email">
  <textarea name="Nachricht"></textarea>
  <input type="submit" value="Send">
</form>
Das Beispiel stammt von form.taxi.
Der komplette Code (Füge deinen Code von form.taxi noch ein): 
<!-- form.taxi -->
<!-- Newsletter -->
<form action="https://form.taxi/s/DEINCODE" method="POST">
    <!-- 2 Eingabefelder fuer Vor- und Nachname -->
    <div class="row mb-4">
        <div class="col">
            <div class="form-outline">
                <input type="text" id="vornameID" class="form-control" />
                <label class="form-label" for="vornameID">Vorname</label>
            </div>
        </div>
        <div class="col">
            <div class="form-outline">
                <input type="text" id="nachnameID" class="form-control" />
                <label class="form-label" for="NachnameID">Nachname</label>
            </div>
        </div>
    </div>
    
    <!-- E-Mail eingabe -->
    <div class="form-outline mb-4">
        <input type="email" id="emailID" class="form-control" />
        <label class="form-label" for="emailID">E-Mail</label>
    </div>
    
    <!-- Checkbox für die Datenschutzerklearung -->
    <div class="form-check d-flex justify-content-center mb-4">
        <input class="form-check-input me-2" type="checkbox" value="" id="datenschutzID"/>
        <label class="form-check-label" for="datenschutzID">
            Ich willige ein, dass diese Website meine übermittelten Informationen speichert, sodass meine Anfrage beantwortet werden kann.
        </label>
    </div>
    
    <!-- Senden button -->
    <button type="submit" value="Send" class="btn btn-secondary btn-block btn-lg mb-4">Abonnieren</button>
</form>