Dieses einfache Kontaktformular-Plugin für WordPress habe ich mit Künstlicher Inteligenz (ChatGPT Plus, Version 5.2) generiert. Wer möchte kann es kostenfrei nutzen oder es selbst einmal versuchen ein PHP-Programm mit KI zu erzeugen. Mein Skript enthält die Felder Name, E-Mail und Betreff sowie ein Feld für die Nachricht und ein Bestätigungsfeld für die Datenschutzerklärung. Es wird automatisch eine E-Mail an die WP-Admin-Mailadresse versendet und an die Absender-Mail. Die Farben der Formularfelder werden automatisch von den Grundeinstellungen des WP-Themes übernommen.
Das ist der Code:
<?php
/*
Plugin Name: Simple Contact Form One Line
Description: Einfaches Kontaktformular mit Name, E-Mail, Betreff in einer Zeile und Datenschutzbestätigung.
Version: 1.1
Author: Dein Name
*/
if (!defined('ABSPATH')) {
exit;
}
// Shortcode registrieren
function scf_display_form() {
ob_start();
?>
<form method="post" class="scf-form">
<div class="scf-row">
<input type="text" name="scf_name" placeholder="Name" required>
<input type="email" name="scf_email" placeholder="E-Mail" required>
<input type="text" name="scf_subject" placeholder="Betreff" required>
</div>
<textarea name="scf_message" placeholder="Nachricht" rows="5" required></textarea>
<div class="scf-privacy">
<label>
<input type="checkbox" name="scf_privacy" required>
Ich habe die <a href="/datenschutzerklaerung/" target="_blank">Datenschutzerklärung</a> gelesen und stimme zu.
</label>
</div>
<button type="submit" name="scf_submit">Senden</button>
</form>
<style>
@media (min-width:769px) {
.scf-form {
width: 100%;
margin: 0 auto;
}
.scf-row {
display: flex;
flex-direction: row;
gap: 10px;
width: 100%;
margin-bottom: 10px;
}
.scf-row input {
flex: 1;
width: 100%;
padding: 10px;
}
.scf-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
}
.scf-form button {
padding: 10px 20px;
color: #fff;
border: none;
cursor: pointer;
}
.scf-privacy {
margin-bottom: 15px;
}
}
@media (max-width:769px) {
.scf-row {
width: 100%;
}
.scf-row input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.scf-privacy {
margin-bottom: 15px;
}
}
</style>
<?php
if (isset($_POST['scf_submit'])) {
scf_handle_form();
}
return ob_get_clean();
}
add_shortcode('simple_contact_form', 'scf_display_form');
// Formular verarbeiten
function scf_handle_form() {
if (!isset($_POST['scf_privacy'])) {
echo "<p style='color:red; margin-top: 15px;'>Bitte bestätigen Sie die Datenschutzerklärung.</p>";
return;
}
$name = sanitize_text_field($_POST['scf_name']);
$email = sanitize_email($_POST['scf_email']);
$subject = sanitize_text_field($_POST['scf_subject']);
$message = sanitize_textarea_field($_POST['scf_message']);
$to = get_option('admin_email');
$to_benutzer = $email;
$headers = array(
'Content-Type: text/html; charset=UTF-8'
);
$body = "
<h3>Neue Kontaktanfrage</h3>
<p><strong>Name:</strong> {$name}</p>
<p><strong>E-Mail:</strong> {$email}</p>
<p><strong>Betreff:</strong> {$subject}</p>
<p><strong>Nachricht:</strong><br>{$message}</p>
<p><strong>Datenschutz akzeptiert:</strong> Ja</p>
";
wp_mail($to, $subject, $body, $headers);
wp_mail($to_benutzer, $subject, $body, $headers);
echo "<p style='color:green; margin-top: 15px;'>Vielen Dank! Ihre Nachricht wurde gesendet.</p>";
}Das einzige was ich noch geändert habe ist der CSS-Code, damit das Formular auch responsiv, also auf mobilen Geräten, richtig dargestellt wird. Das kann man aber auch direkt über die KI ändern lassen, inden man seine Eingabe dementsprechend ergänzt. Probieren Sie es einfach mal aus!
Um das Plugin zu installieren gehen Sie wie folgt vor:
- Im Plugin-Verzeichnis (wp-content/plugins/) diesen Ordner anlegen:
simple-contact-form
(/wp-content/plugins/simple-contact-form/) - Den Code in eine Textdatei kopieren und unter folgenden Namen speichern:
simple-contact-form.php
Diese Datei in das angelegte Verzeichnis (simple-contact-form) kopieren. - Plugin aktivieren
Diesen Text als Shortcode in die Seite einfügen, auf der das Formular angezeigt werden soll:
[simple_contact_form]
