Eigenes WordPress Formular mit Datenbankanbindung integrieren (HowTo)

Allgemeines

TBD

Arbeitsschritte

Schritt 1: HTML form integrieren

• Struktur (HTML) des Formulars durch HTML-Attribut form erstellen
• HTML-Formular integrieren in ...
  • Template --> folgenden Code in z.B. in single-xyz.php o.Ä. integrieren
  • Shortcode --> folgenden Code in child_theme/partials/participation.php integrieren

<form name="contact-form" class="contact" action="<?php echo get_site_url(); ?>/wp-json/wp/v2/submit-contact-request">

    <div class="input-wrapper">
        <label for="input_anrede">Anrede</label>
        <select name="anrede" id="input_anrede">
            <option value="">bitte wählen</option>
            <option value="Herr">Herr</option>
            <option value="Frau">Frau</option>
            <option value="">keine Angabe</option>
        </select>
    </div>

    <div class="input-wrapper">
        <label for="input_vorname">Vorname*</label>
        <input type="text" name="vorname" id="input_vorname" required placeholder="Vorname" />
    </div>

    <div class="input-wrapper">
        <label for="input_nachname">Nachname*</label>
        <input type="text" name="nachname" id="input_nachname" required placeholder="Nachname" />
    </div>

    <div class="input-wrapper">
        <label for="input_geburtstag_tag">Geburtstag</label>
        <select name="geburtstag_tag" id="input_geburtstag_tag">
            <option></option>
            <?php
            for($i = 1; $i <= 31; $i++) {
                echo "<option>$i</option>";
            }
            ?>
        </select>
        <select name="geburtstag_monat" id="input_geburtstag_monat">
            <option></option>
            <option>Januar</option>
            <option>Februar</option>
            <option>März</option>
            <option>April</option>
            <option>Mai</option>
            <option>Juni</option>
            <option>Juli</option>
            <option>August</option>
            <option>September</option>
            <option>Oktober</option>
            <option>November</option>
            <option>Dezember</option>
        </select>
        <select name="geburtstag_jahr" id="input_geburtstag_jahr">
            <option></option>
            <?php
            for($i = 2020; $i >= 1920; $i--) {
                echo "<option>$i</option>";
            }
            ?>
        </select>
    </div>

    <div class="input-wrapper">
        <label for="input_email">E-Mail-Adresse*</label>
        <input type="email" name="email" id="input_email" required placeholder="E-Mail-Adresse" />
    </div>

    <div class="input-wrapper">
        <input type="checkbox" name="newsletter" id="input_newsletter" value="1" />
        <label for="input_newsletter">
            Newsletter
        </label>
    </div>

    <div class="input-wrapper">
        <input type="checkbox" name="teilnahmebedingungen" id="input_teilnahmebedingungen" required value="1" />
        <label for="input_teilnahmebedingungen">
            <a href="https://www.banana-bites.de/teilnahmebedingungen/" target="_blank">Teilnahmebedingungen*</a>
        </label>
    </div>

    <div class="input-wrapper">
        <input type="checkbox" name="datenschutzbestimmungen" id="input_datenschutzbestimmungen" required value="1" />
        <label for="input_datenschutzbestimmungen">
            <a href="https://www.banana-bites.de/datenschutzerklaerung/" target="_blank">Datenschutzbestimmungen*</a>
        </label>
    </div>

    <div class="input-wrapper">
        <div class="wp-block-button">
            <input type="submit" value="Absenden" class="wp-block-button__link">
        </div>
    </div>

</form>

Schritt 2: HTML form durch CSS bzw. SCSS gestalten

• neue Datei anlegen, z.B. innerhalb von Sass-7-1-Muster (https://sass-guidelin.es/de/#das-7-1-muster) in child_theme/style/layout/forms.scss

form .input-wrapper {
  margin: 15px 0 30px 0;
  max-width: 800px;
}

form .input-wrapper:first-child {
  margin-top: 0;
}

form .input-wrapper:last-child {
  margin-bottom: 0;
}

form .input-wrapper.small {
  font-size: 80%;
}

label {
  color: $main-grey;
  max-width: 100%;
}

form input, form textarea {
  border: #cccccc 1px solid;
  background: #f9f9f9;
  margin: 10px 0 0 0;
  padding: 15px;
  font-size: 13px;
  line-height: 17px;
  color: #818181;
  display: block;
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
}

form input[type="checkbox"], form input[type="radio"], form input[type="submit"], form input[type="reset"] {
  width: auto;
}

form input[type="checkbox"] {
  display: initial;
  margin-top: 10px;
  margin-right: 10px;
}

form input[type="checkbox"] + label::before {
  width: 18px;
  height: 18px;
  background-color: #f9f9f9;
  display: block;
  content: "x";
  position: absolute;
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  line-height: 17px;
  color: #e5e5e5;
  margin-top: -18px;
}

form input[type="checkbox"]:checked + label::before {
  color: #000;
}

.contact-success-message {
  display: none;
}

select {
  margin: 15px 0 0 0;
  min-width: 200px;
  border: #cccccc 1px solid;
  background-color: #f9f9f9;
  padding: 15px;
  color: #818181;
}

Dropdown (Select) individuell gestalten

• oder als Custom Select stylen https://www.w3schools.com/howto/howto_custom_select.asp
• bringt aber Probleme mit sich, z.B. kein Scrollen sehr langer Dropdown-Listen (Problem ungelöst)
• https://www.clickstorm.de/blog/dropdown-css3/

Schritt 3: Datenbank-Ablage für Formulardaten anlegen

• Custom Post Type (hier "gewinnspielteilnahme" als Beispiel) via Plugin "CPT-UI" anlegen
• Individuelle Felder für "Gewinnspielteilnahme" via "Advanced Custom Fields" anlegen ("Feldname"!!!), z. B.
  • email
  • firma
  • usw.

Schritt 4: Formulardaten speichern und anzeigen

• neue Datei anlegen child_theme/_contact_form.php
• folgenden Code integrieren (Beispielfelder anpassen!)

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

function process_custom_contact()
{
    if (!isset($_POST['teilnahmebedingungen']) || ($_POST['teilnahmebedingungen'] !== "1"))
        return wp_send_json_error(array('message' => 'Bitte die Teilnahmebedingungen akzeptieren!'), 403);
    if (!isset($_POST['datenschutzbestimmungen']) || ($_POST['datenschutzbestimmungen'] !== "1"))
        return wp_send_json_error(array('message' => 'Bitte die Datenschutzbestimmungen akzeptieren!'), 403);

    $existings = get_posts(array(
        'numberposts'	=> -1,
        'post_type'		=> 'gewinnspielteilnahme',
        'meta_key'		=> 'email',
        'meta_value'	=> sanitize_text_field($_POST['email']),
        'post_status'   => array('publish', 'pending', 'draft', 'auto-draft', 'future', 'private', 'inherit', 'trash')
    ));

    if (!empty($existings))
        return wp_send_json_error(array('message' => 'Sie haben bereits teilgenommen!'), 403);

    $title = sanitize_text_field($_POST['email']);

    $participation = array(
        'post_type'     => 'gewinnspielteilnahme',
        'post_title'    => $title,
        'post_content'  => '',
        'post_status'   => 'draft',
        'post_author'   => 1,
        'post_category' => array()
    );
    $postID = wp_insert_post( $participation );

    update_field('email', sanitize_text_field($_POST['email']), $postID);
    update_field('firma', sanitize_text_field($_POST['firma']), $postID);
    update_field('solution_bool', sanitize_text_field($_POST['solution_bool']), $postID);
    update_field('solution', sanitize_text_field($_POST['solution']), $postID);
    update_field('teilnahmebedingungen', sanitize_text_field($_POST['teilnahmebedingungen']), $postID);
    update_field('datenschutzbestimmungen', sanitize_text_field($_POST['datenschutzbestimmungen']), $postID);

    if (!is_wp_error($postID)) {
        wp_send_json(array('message' => 'Sie haben erfolgreich teilgenommen!'), 200);
    } else {
        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-contact-request', array(
        'methods' => 'POST',
        'callback' => 'process_custom_contact'
    ));
});

• PHP-Datei in functions.php inkludieren

include '_contact_form.php';

Quellen

• TBD