Sebastian.kalms: Die Seite wurde neu angelegt: „= Allgemeines = TBD = Arbeitsschritte = == Schritt 1: HTML form integrieren == * Struktur (HTML) des Formulars durch HTML-Attribut form erstellen * HTML-Fo…“

2021-06-30T07:37:45Z

Die Seite wurde neu angelegt: „= Allgemeines = TBD = Arbeitsschritte = == Schritt 1: HTML form integrieren == * Struktur (HTML) des Formulars durch HTML-Attribut form erstellen * HTML-Fo…“

Neue Seite

= 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

<pre>
<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>
</pre>

== 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

<pre>
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;
}
</pre>

=== 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!)

<pre>
<?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'
));
});
</pre>

* PHP-Datei in functions.php inkludieren

<pre>
include '_contact_form.php';
</pre>

= Quellen =

* TBD

[[Kategorie:HowTo]]
[[Kategorie:WordPress]]

Eigenes WordPress Formular mit Datenbankanbindung integrieren (HowTo) - Versionsgeschichte

Sebastian.kalms: Die Seite wurde neu angelegt: „= Allgemeines = TBD = Arbeitsschritte = == Schritt 1: HTML form integrieren == * Struktur (HTML) des Formulars durch HTML-Attribut form erstellen * HTML-Fo…“