<\/p>\n\n\n\n
functions.php<\/code> registrieren<\/strong><\/h3>\n\n\n\n<\/pre>\n\n\n\n\n\/\/ kontaktformular per shortcode laden\nfunction mein_kontaktformular_shortcode() {\n ob_start();\n require get_stylesheet_directory() . '\/parts\/php\/kontaktformular.php'; \/\/ Pfad anpassen\n return ob_get_clean();\n}\nadd_shortcode('kontaktformular', 'mein_kontaktformular_shortcode');\n<\/code><\/pre>\n\n\n\n\ud83d\udccc Was das macht:<\/strong><\/h4>\n\n\n\n\n- Gibt deren Inhalt zur\u00fcck, wenn du
[kontaktformular<\/span>]<\/code> im Editor verwendest.<\/li>\n\n\n\n- L\u00e4dt die Datei
kontaktformular.php<\/code> aus dem Unterordner \/parts\/php\/<\/code> deines Child-Themes.<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
\ud83c\udfa8 2. CSS-Datei einbinden (contact.css<\/code>)<\/strong><\/h3>\n\n\n\n<\/pre>\n\n\n\n\nfunction kontaktformular_styling() {\n wp_enqueue_style(\n 'kontaktformular-style',\n get_stylesheet_directory_uri() . '\/custom-styles\/contact.css' \/\/ Pfad zur CSS-Datei\n );\n}\nadd_action('wp_enqueue_scripts', 'kontaktformular_styling');\n<\/code><\/pre>\n\n\n\n\ud83d\udccc Hinweis:<\/strong> <\/h4>\n\n\n\nLege die Datei contact.css<\/code> im Verzeichnis \/custom-styles\/<\/code> deines Child-Themes an.
<\/p>\n\n\n\n 3. Datei kontaktformular.php<\/code> in \/parts\/php\/<\/code> anlegen<\/strong><\/h3>\n\n\n\n\n<?php\n$empfaenger = 'info@example.com'; \/\/ E-Mail-Adresse des Admins\n\n$fehler = '';\n$erfolg = '';\n\nif ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['kontaktseite_nonce']) && wp_verify_nonce($_POST['kontaktseite_nonce'], 'kontaktformular_absenden')) {\n $vorname = sanitize_text_field($_POST['vorname']);\n $nachname = sanitize_text_field($_POST['nachname']);\n $email = sanitize_email($_POST['email']);\n $nachricht = sanitize_textarea_field($_POST['nachricht']);\n\n if (empty($vorname) || empty($nachname) || empty($email) || empty($nachricht)) {\n $fehler = 'Bitte f\u00fcllen Sie alle Pflichtfelder aus.';\n } elseif (!is_email($email)) {\n $fehler = 'Bitte geben Sie eine g\u00fcltige E-Mail-Adresse ein.';\n } else {\n $betreff = 'Kontaktformular-Anfrage von ' . $vorname . ' ' . $nachname;\n $inhalt = "Vorname: $vorname\\nNachname: $nachname\\nE-Mail: $email\\nNachricht:\\n$nachricht";\n $headers = [\n 'Content-Type: text\/plain; charset=UTF-8',\n "From: $vorname $nachname <$email>"\n ];\n\n \/\/ Best\u00e4tigung an den Absender\n $confirmation_subject = 'Best\u00e4tigung: Ihre Nachricht wurde erfolgreich gesendet';\n $confirmation_body = "Hallo $vorname,\\n\\nvielen Dank f\u00fcr Ihre Nachricht. Wir melden uns bald bei Ihnen.\\n\\nIhre Nachricht war:\\n$nachricht";\n wp_mail($email, $confirmation_subject, $confirmation_body, $headers);\n\n \/\/ Mail an Admin\n if (wp_mail($empfaenger, $betreff, $inhalt, $headers)) {\n wp_safe_redirect(home_url('\/danke\/'));\n exit;\n } else {\n $fehler = 'Beim Senden ist ein Fehler aufgetreten.';\n }\n }\n}\n?>\n<\/code><\/pre>\n\n\n\nErg\u00e4nze die Datei kontaktformular.php<\/code><\/strong> ganz unten um folgenden Html-Code. :<\/p>\n\n\n\n\n<div class="kontaktformular">\n <h1>Kontaktformular<\/h1>\n\n <?php if ($fehler): ?>\n <p style="color:red;"><?php echo esc_html($fehler); ?><\/p>\n <?php endif; ?>\n\n <?php if ($erfolg): ?>\n <p style="color:green;"><?php echo esc_html($erfolg); ?><\/p>\n <?php endif; ?>\n\n <form action="<?php echo esc_url(get_permalink()); ?>" method="post">\n <?php wp_nonce_field('kontaktformular_absenden', 'kontaktseite_nonce'); ?>\n\n <p>\n <label for="vorname">Vorname*:<\/label><br>\n <input type="text" name="vorname" id="vorname" required>\n <\/p>\n\n <p>\n <label for="nachname">Nachname*:<\/label><br>\n <input type="text" name="nachname" id="nachname" required>\n <\/p>\n\n <p>\n <label for="email">E-Mail*:<\/label><br>\n <input type="email" name="email" id="email" required>\n <\/p>\n\n <p>\n <label for="nachricht">Nachricht*:<\/label><br>\n <textarea name="nachricht" id="nachricht" rows="5" required><\/textarea>\n <\/p>\n\n <p>\n <button type="submit">Absenden<\/button>\n <\/p>\n <\/form>\n<\/div>\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
4. CSS f\u00fcr contact.css<\/code> erstellen<\/strong><\/h3>\n\n\n\n\n.kontaktformular {\n max-width: 600px;\n margin: 0 auto;\n padding: 2rem;\n background-color: #f9f9f9;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n font-family: system-ui, sans-serif;\n}\n\n.kontaktformular h1 {\n text-align: center;\n font-size: 1.75rem;\n margin-bottom: 1.5rem;\n color: #333;\n}\n\n.kontaktformular label {\n display: block;\n margin-bottom: 0.25rem;\n font-weight: 600;\n color: #444;\n}\n\n.kontaktformular input,\n.kontaktformular textarea {\n width: 100%;\n padding: 0.75rem;\n margin-bottom: 1rem;\n border: 1px solid #ccc;\n border-radius: 8px;\n font-size: 1rem;\n box-sizing: border-box;\n}\n\n.kontaktformular textarea {\n resize: vertical;\n min-height: 150px;\n}\n\n.kontaktformular button {\n background-color: #0073aa;\n color: #fff;\n border: none;\n cursor: pointer;\n font-weight: bold;\n padding: 0.75rem 1.5rem;\n border-radius: 8px;\n font-size: 1rem;\n transition: background-color 0.3s ease;\n}\n\n.kontaktformular button:hover {\n background-color: #005f8d;\n}\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
5. Formular in Gutenberg einf\u00fcgen<\/strong><\/h3>\n\n\n\n\n- \u00d6ffne deine Seite \u201eKontakt\u201c<\/strong> im Block-Editor (Gutenberg)<\/strong>.<\/li>\n\n\n\n
- F\u00fcge einen \u201eShortcode\u201c-Block<\/strong> ein.<\/li>\n\n\n\n
- Trage dort den Shortcode ein:<\/li>\n<\/ol>\n\n\n\n
\n[kontaktformular]\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\u2705 Ergebnis<\/h3>\n\n\n\n\n- Kontaktformular wird auf der Seite angezeigt.<\/li>\n\n\n\n
- E-Mails gehen an den Website-Betreiber und eine Best\u00e4tigung an den Absender.<\/li>\n\n\n\n
- Nach Absenden erfolgt eine Weiterleitung zur Danke-Seite<\/strong> (
\/danke\/<\/code> \u2013 du musst diese Seite anlegen!).<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
\ud83d\udd12 Sicherheitshinweis<\/h3>\n\n\n\n\n- Durch
wp_verify_nonce<\/code> ist das Formular vor CSRF-Angriffen gesch\u00fctzt<\/strong>.<\/li>\n\n\n\n- Mit
sanitize_\u2026()<\/code> werden alle Eingaben gesichert verarbeitet.<\/li>\n<\/ul>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udd27 1. Shortcode-Funktion in functions.php registrieren \/\/ kontaktformular per shortcode laden function mein_kontaktformular_shortcode() { ob_start(); require get_stylesheet_directory() . ‘\/parts\/php\/kontaktformular.php’; \/\/ Pfad anpassen return ob_get_clean(); } add_shortcode(‘kontaktformular’, ‘mein_kontaktformular_shortcode’); \ud83d\udccc Was das macht: \ud83c\udfa8 2. CSS-Datei einbinden (contact.css) function kontaktformular_styling() { wp_enqueue_style( ‘kontaktformular-style’, get_stylesheet_directory_uri() . ‘\/custom-styles\/contact.css’ \/\/ Pfad zur CSS-Datei ); } add_action(‘wp_enqueue_scripts’, ‘kontaktformular_styling’); \ud83d\udccc Hinweis: Lege […]<\/p>\n","protected":false},"author":1,"featured_media":1900,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/comments?post=1894"}],"version-history":[{"count":12,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1894\/revisions"}],"predecessor-version":[{"id":1911,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/1894\/revisions\/1911"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/1900"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=1894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=1894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=1894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}