HTML Forms

Allgemeines

Ein HTML-Formular wird verwendet, um Benutzereingaben zu sammeln. Die Benutzereingabe wird meistens zur Verarbeitung an einen Server gesendet.

Das HTML-Element <form> wird verwendet, um ein HTML-Formular für Benutzereingaben zu erstellen:

‎

<form>
.
Formelemente
.
</form>
‎

Das <form>-Element ist ein Container für verschiedene Arten von Eingabeelementen, wie z. B.: Textfelder, Kontrollkästchen, Optionsfelder, Senden-Schaltflächen usw.

Folgende, verschiedene HTML-Formularelemente sind innerhalb des <form>-Element möglich (unvollständig)

HTML-Form-Elemente

<input>

<input type="radio">

• name muss vergeben sein, da sonst die einfachauswahl nicht funktioniert

<input type="submit">

• funktioniert nur innerhalb eines Form-Elements (<form></form>)

<input type="reset">

• funktioniert nur innerhalb eines Form-Elements (<form></form>)

<select>

HTML-Grundstruktur

<select id="" name="">
  <option value="value 1">value 1</option>
  <option value="value 2">value 2</option>
  <option value="value 3">value 3</option>
</select>

CSS

Pfeile über Hintergrundbild

https://codepen.io/vkjgr/pen/VYMeXp

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}

Pfeile über SVG als Hintergrundbild

https://codepen.io/herrfischer/pen/aNpWwy

select {
  width: 300px;
  padding: 12px;
  border: 0 !important;
  background-color: lightblue;
  /* needed */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* SVG background image */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-size: .6em;
    background-position: calc(100% - 1.3em) center;
    background-repeat: no-repeat;
}
select::-ms-expand {
    display: none;
}

<textarea>

<textarea name="message" rows="10" cols="30">
</textarea>

Vorlage

alle häufig verwendeten sichtbaren Elemente

PHP (inkl. HTML & JS)

<?php defined( 'ABSPATH' ) or die(); ?>

<form name="my-new-form" onsubmit="submitForm(this);" class="ek-block-form my-form" action="<?php echo get_site_url(); ?>/wp-json/wp/v2/submit-form-request">
    <div class="ek-block-form__inner-container">
        <label for="textfeld">Textfeld</label>
        <input type="text" id="text" name="textfeld" value="">
    </div>
    <div class="ek-block-form__inner-container">
        <label for="email">E-Mail</label>
        <input type="email" name="email" required>
    </div>
    <div class="ek-block-form__inner-container">
        <label for="telefon">Telefonnummer</label>
        <input type="tel" name="telefon">
    </div>
    <div class="ek-block-form__inner-container">
        <label for="selection">Selection</label>
        <select id="selection" name="selection" size="">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="checkbox" id="checkbox1" name="checkbox1" value="1">
        <label for="checkbox1">checkbox1</label><br>
        <input type="checkbox" id="checkbox2" name="checkbox2" value="1">
        <label for="checkbox2">checkbox2</label><br>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="radio" id="radiobutton1" name="radio" value="1">
        <label for="radiobutton1">Radiobutton 1</label><br>
        <input type="radio" id="radiobutton2" name="radio" value="2">
        <label for="radiobutton2">Radiobutton 2</label><br>
        <input type="radio" id="radiobutton3" name="radio" value="3">
        <label for="radiobutton3">Radiobutton 3</label>
    </div>
    <div class="ek-block-form__inner-container">
        <label for="Range">Range Slider</label>
        <input type="range" name="range">
    </div>
    <!--
    <div class="ek-block-form__inner-container">
        <label for="fileupload">Dateiupload</label>
        <input type="file">
    </div>
    -->
    <div class="ek-block-form__inner-container">
        <label for="textbox">Textbox</label>
        <textarea name="textbox" rows="10" cols="30"></textarea>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="checkbox" name="datenschutz" id="input_datenschutz" required value="akzeptiert" />
        <label for="input_datenschutz">
            <small>
                Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Die Daten werden nach abgeschlossener Bearbeitung meiner Anfrage gelöscht.
            </small>
        </label>
    </div>
    <div class="ek-block-form__inner-container">
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </div>
</form>


<div class="form-submit-msg submit-msg">
    Vielen Dank für Ihre Anfrage!
</div>

<script>
    let submitForm = function(form) {
        event.preventDefault();

        let FD, XHR;
        XHR = new XMLHttpRequest();
        FD = new FormData(form);

        XHR.addEventListener('load', function(event) {
            if (event.target.status === 200) {
                document.querySelector('form.my-form').classList.add("form-sent");
                document.querySelector('.form-submit-msg').classList.add("form-sent");
            } else {
                let json = JSON.parse(event.target.responseText);

                let msg;
                if (json.data) {
                    msg = json.data.message;
                } else {
                    msg = json.message;
                }

                return alert(msg);
            }
        });

        XHR.addEventListener('error', function (event) {
            return alert('Fehler beim Versenden des Formulars!');
        });

        XHR.open('POST', form.getAttribute('action'));
        XHR.send(FD);

        return false;
    };
</script>

PHP Funktion

einfache Funktion mit Standard-URL-Weiterleitung

<?php defined( 'ABSPATH' ) or die();

// Daten für die Konfiguration
$mailTo             = 'sebastian.kalms@elsterkind.de';
$mailFrom           = 'website@DOMIAN.de';
$mailSubject        = 'Feedback vom Php-Formular';
$returnPage         = 'danke.html';
$returnError        = 'fehler.html';
$mailContent        = '';

// Formulardaten einlesen und Mail daraus erstellen
if(isset($_POST)) {
    foreach ($_POST as $name => $value) {
        $mailContent .= $name . " : " . $value . "\n";
    }
}

// E-Mail versenden
$mailSend = mail($mailTo, $mailSubject, $mailContent, "From: " . $mailFrom );

// E-Mail-Versand überprüfen
if($mailSend === TRUE) {
  header("Location: " . $returnPage);
} else {
    header("Location: " . $returnError);
}
exit();

umfangreiche Funktion ohne URL-Weiterleitung

<?php defined( 'ABSPATH' ) or die();

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/// FORMULAR /////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function process_form_request()
{
    if (!isset($_POST['datenschutz']) || ($_POST['datenschutz'] !== "akzeptiert"))
        return wp_send_json_error(array('message' => 'Bitte akzeptiere unsere Datenschutzbestimmungen!'), 403);

    // Anpassen je nach Empfänger
    $receiver = 'sebastian.kalms@elsterkind.de';
    $subject = 'Kontaktanfrage BALANCE 7 Website';

    // Zuweisung der Formulardaten
    $textfeld   = $_POST['textfeld'];
    $email      = $_POST['email'];
    $phone      = $_POST['telefon'];
    $selection  = $_POST['selection'];
    $checkbox1  = $_POST['checkbox1'];
    $checkbox2  = $_POST['checkbox2'];
    $radio      = $_POST['radio'];
    $range      = $_POST['range'];
    $message    = $_POST['textbox'];
    $privacy    = $_POST['datenschutz'];

    // E-Mail-Inhalt
    $body = <<<BODY
Neue Kontaktanfrage

Textfeld: $textfeld
E-Mail: $email 
Telefon: $phone
Auswahl: $selection
Checkbox 1: $checkbox1
Checkbox 2: $checkbox2
Radio Button: $radio
Range: $range

Textbox:
$message

Datenschutz: $privacy

_________________
Diese Nachricht wurde automatisch erstellt
BODY;

    $headers = array('Content-Type: text/plain; charset=UTF-8');

    // Versenden der E-Mail
    $res = wp_mail($receiver, $subject, $body, $headers);
    if ($res) {
        return wp_send_json(array('message' => 'Vielen Dank für Deine Anfrage!'), 200);
    } else {
        return wp_send_json_error(array('message' => 'Fehler beim Versenden des Formulars!'), 500);
    }
}

// Hinzufügen eines Rest Api Endpunktes
add_action('rest_api_init', function () {
    // Kontaktanfrage
    register_rest_route('wp/v2', 'submit-form-request', array(
        'methods' => 'POST',
        'callback' => 'process_form_request'
    ));
});

CSS

form, .ek-block-form {
  transition: opacity .5s 0s, max-height 1s .5s;
  opacity: 1;
  max-height: 2000px;

  &.form-sent {
  opacity: 0;
  overflow: hidden;
  max-height: 0;
  }

  .ek-block-form__inner-container {
    clear: both;
    margin: 10px 0 20px 0;

    label {
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 4px;
      display: inline-block;
      user-select: none;
    }

    input, textarea, select {
      border: 1px solid $color-grey;
      outline: none;
      display: block;
      box-sizing: border-box;
      width: 100%;

      box-shadow: none !important;
      &[type="submit"], &[type="button"], &[type="reset"] {
        border: 0px;
      }
    }

    input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="reset"] {
      display: inline-block;
      width: auto;
    }

    input[type="checkbox"], input[type="radio"] {
      margin: 10px;
    }

    input[type="file"] {
      background-color: $color-white;
      padding: 10px;
    }

    input[type="submit"], input[type="reset"] {
      border-radius: 10px;
      background-color: unset;
      text-align: center;
      width: fit-content;
      min-width: 130px;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.35px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }

    input[type="submit"] {
      background: linear-gradient(to bottom, $color-main, $color-main-dark);
      color: $color-white;
      &:hover {
        background: $color-main;
        color: $color-white;
      }
    }

    input[type="reset"] {
      border: 1px solid $color-main;
      background: $color-white;
      color: $color-main;
      &:hover {
        background-color: $color-main;
        color: $color-white;
      }
    }

    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23999999%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat, repeat;
      background-position: right 10px top 50%, 0 0;
      background-size: .65em auto, 100%;

      &::-ms-expand {
        display: none;
      }
    }

    textarea {
      resize: vertical;
    }


  }
}

.submit-msg {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s 0s, opacity .5s 1.5s;
  font-weight: bold;
  font-size: 120%;

  &.form-sent {
    max-height: 100px;
    opacity: 1;
  }
}

mit Gruppierung via Fieldset

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>