In diesem Beitrag zeige ich, wie man ein einfaches und sicheres Kontaktformular in WordPress ohne die Verwendung eines Plugins erstellt. Wir verwenden ein HTML-Formular, PHP f\u00fcr die Formularverarbeitung und einige grundlegende CSS-Stile f\u00fcr die Darstellung des Formulars.<\/p>\n\n\n\n
1. HTML-Kontaktformular<\/strong><\/p>\n\n\n\n Zuerst erstellen wir das HTML-Formular, das die Benutzereingaben sammelt und an die WordPress-Admin-Seite sendet. Hier ist der Code:<\/p>\n\n\n\n 2. PHP-Code zur Formularverarbeitung (functions.php)<\/strong><\/p>\n\n\n\n Der n\u00e4chste Schritt ist die Formularverarbeitung. Dies geschieht durch eine Funktion in der Hier ist der benutzerdefinierte CSS-Code, um das Formular ansprechender zu gestalten:<\/p>\n\n\n\n Fazit<\/p>\n\n\n\n Mit diesen Schritten hast du ein einfaches und sicheres Kontaktformular in WordPress erstellt, das E-Mails an den Administrator sendet und dem Absender eine Best\u00e4tigungs-E-Mail zuschickt. Dies alles wird ohne die Verwendung von Plugins erreicht, und das Design des Formulars kann \u00fcber benutzerdefiniertes CSS angepasst werden.<\/p>\n","protected":false},"excerpt":{"rendered":" In diesem Beitrag zeige ich, wie man ein einfaches und sicheres Kontaktformular in WordPress ohne die Verwendung eines Plugins erstellt. Wir verwenden ein HTML-Formular, PHP f\u00fcr die Formularverarbeitung und einige grundlegende CSS-Stile f\u00fcr die Darstellung des Formulars. 1. HTML-Kontaktformular Zuerst erstellen wir das HTML-Formular, das die Benutzereingaben sammelt und an die WordPress-Admin-Seite sendet. Hier ist […]<\/p>\n","protected":false},"author":1,"featured_media":897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-895","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\/895","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=895"}],"version-history":[{"count":3,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/895\/revisions"}],"predecessor-version":[{"id":899,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/895\/revisions\/899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/897"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n<form action="\/wp-admin\/admin-post.php" method="POST">\n <!-- Vorname und Nachname -->\n <fieldset>\n <legend>Kontaktformular<\/legend>\n\n <label for="first_name">Vorname*:<\/label>\n <input type="text" id="first_name" name="first_name" required>\n \n <label for="last_name">Nachname*:<\/label>\n <input type="text" id="last_name" name="last_name" required>\n <\/fieldset>\n\n <!-- E-Mail-Adresse -->\n <fieldset>\n <label for="email">E-Mail*:<\/label>\n <input type="email" id="email" name="email" required>\n <\/fieldset>\n\n <!-- Nachricht -->\n <fieldset>\n <label for="message">Nachricht*:<\/label>\n <textarea id="message" name="message" rows="4" required><\/textarea>\n <\/fieldset>\n\n <!-- Nonce-Feld (f\u00fcr die Sicherheit) -->\n [contact_form_nonce]\n\n <!-- Unsichtbares Eingabefeld zur Identifikation der Aktion -->\n <input type="hidden" name="action" value="send_contact_form">\n\n <!-- Absenden-Button -->\n <button type="submit">Senden<\/button>\n<\/form>\n<\/code><\/pre>\n\n\n\n\nfunctions.php<\/code>, die sicherstellt, dass das Formular sicher verarbeitet wird.<\/p>\n\n\n\n\n\/\/ Funktion zum Erstellen des Nonce-Felds f\u00fcr die Formularsicherheit\nfunction add_contact_form_nonce() {\n \/\/ Erzeugt ein Nonce-Feld im Formular, um es vor CSRF-Angriffen zu sch\u00fctzen\n return wp_nonce_field( 'send_contact_form_action', 'contact_form_nonce', true, false );\n}\n\n\/\/ Shortcode erstellen, um das Nonce-Feld an einer bestimmten Stelle im Formular einzuf\u00fcgen\nadd_shortcode( 'contact_form_nonce', 'add_contact_form_nonce' );\n\n\/\/ Hooks f\u00fcr die Formularverarbeitung\nadd_action( 'admin_post_nopriv_send_contact_form', 'process_contact_form' );\nadd_action( 'admin_post_send_contact_form', 'process_contact_form' );\n\n\/\/ Funktion zur Formularverarbeitung\nfunction process_contact_form() {\n \/\/ \u00dcberpr\u00fcft die Sicherheit durch Validierung des Nonce\n if ( isset( $_POST['contact_form_nonce'] ) && wp_verify_nonce( $_POST['contact_form_nonce'], 'send_contact_form_action' ) ) {\n \/\/ Sanitize-Eingabedaten, um Sicherheitsrisiken zu minimieren\n $first_name = sanitize_text_field( $_POST['first_name'] );\n $last_name = sanitize_text_field( $_POST['last_name'] );\n $email = sanitize_email( $_POST['email'] );\n $message = sanitize_textarea_field( $_POST['message'] );\n\n \/\/ E-Mail an den Admin senden\n $to = 'example@gmail.com'; \/\/ Die E-Mail-Adresse des Admins\n $subject = 'Neue Kontaktanfrage von ' . $first_name . ' ' . $last_name;\n $body = \"Vorname: $first_name\\nNachname: $last_name\\nE-Mail: $email\\nNachricht:\\n$message\";\n $headers = array('Content-Type: text\/plain; charset=UTF-8');\n wp_mail( $to, $subject, $body, $headers );\n\n \/\/ Best\u00e4tigungs-E-Mail an den Absender senden\n $confirmation_subject = 'Best\u00e4tigung: Ihre Nachricht wurde erfolgreich gesendet';\n $confirmation_body = \"Hallo $first_name,\\n\\nVielen Dank f\u00fcr Ihre Nachricht. Wir werden uns bald bei Ihnen melden.\\n\\nIhre Nachricht war:\\n$message\";\n wp_mail( $email, $confirmation_subject, $confirmation_body, $headers );\n\n \/\/ Weiterleitung zur Danke-Seite\n wp_safe_redirect( home_url( '\/index.php\/danke\/' ) );\n exit();\n } else {\n \/\/ Fehlerbehandlung bei ung\u00fcltigem Nonce\n wp_safe_redirect( home_url( '\/index.php\/kontakt\/?status=error' ) );\n exit();\n }\n}\n<\/code><\/pre>\n\n\n\n3. CSS zur Anpassung des Formular-Designs<\/strong><\/h4>\n\n\n\n
\n\/* Stil f\u00fcr das gesamte Formular *\/\nform {\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n border: 1px solid #ddd;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n\n\/* Stil f\u00fcr die Fieldsets *\/\nfieldset {\n border: none;\n margin-bottom: 20px;\n padding: 0;\n}\n\n\/* Stil f\u00fcr die Labels *\/\nlabel {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n}\n\n\/* Stil f\u00fcr die Eingabefelder *\/\ninput[type=\"text\"],\ninput[type=\"email\"],\ntextarea {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n box-sizing: border-box;\n}\n\n\/* Stil f\u00fcr den Absenden-Button *\/\nbutton {\n background-color: #0073aa;\n color: #fff;\n border: none;\n padding: 10px 20px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s;\n}\n\n\/* Stil f\u00fcr den Button im Hover-Zustand *\/\nbutton:hover {\n background-color: #005177;\n}\n\n<\/code><\/pre>\n\n\n\n