So erstellen Sie ein Formular in WordPress ohne Plugins

Möchten Sie ein Formular in WordPress erstellen, ohne Plugins zu verwenden? Formulare gehören zu den wichtigsten und am häufigsten verwendeten Elementen einer Website, und es bietet mehrere Vorteile, ein Formular ohne den Einsatz von Plugins zu erstellen.

Warum ein Formular in WordPress ohne Plugins erstellen?

Es gibt viele WordPress-Formular-Plugins, mit denen Sie ein Formular erstellen können. Aber das Erstellen eines Formulars in WordPress ohne die Verwendung von Plugins kann aus mehreren Gründen von Vorteil sein:

• Einfachheit und Leichtgewichtigkeit: Sie vermeiden den zusätzlichen Aufwand, der mit der Installation und Wartung von Plugins verbunden ist, wenn Sie ein Formular ohne Plugins erstellen. Ein einfaches Formular, das mit benutzerdefiniertem Code erstellt wurde, kann einfacher und effizienter sein als eines, das mit einem Plugin erstellt wurde.
• Anpassung: Wenn Sie ein Formular von Grund auf neu erstellen, haben Sie die vollständige Kontrolle über dessen Design und Funktionalität. Sie können das Formular an die spezifischen Anforderungen Ihrer Website anpassen und es entsprechend anpassen.
• Lernerfahrung: Das Erstellen eines Formulars ohne Plugins kann eine großartige Lernerfahrung für Entwickler oder Benutzer sein, die ihre Programmierkenntnisse verbessern möchten. Sie lernen die zugrunde liegenden Mechanismen der Formularbearbeitung und Datenverarbeitung kennen.
• Reduzierte Abhängigkeit: Sie reduzieren die Abhängigkeit Ihrer Website von externem Code, indem Sie nicht auf Plugins angewiesen sind. Dies kann nützlich sein, wenn Sie potenzielle Sicherheitsrisiken oder Konflikte minimieren möchten, die durch die Verwendung mehrerer Plugins entstehen.
• Leistung: Benutzerdefinierte Formulare können für eine bessere Leistung und Geschwindigkeit Ihrer Website sorgen, da sie im Vergleich zu Plugins leichtgewichtig sind. Diese benutzerdefinierten Formulare enthalten nur die Funktionen, die Sie benötigen, und verfügen nicht über die zusätzlichen Funktionen, die von Plugins bereitgestellt werden, die Sie möglicherweise nicht nutzen.
• Flexibilität: Benutzerdefinierte Formulare bieten mehr Flexibilität für die Integration in andere Teile Ihrer Website oder benutzerdefinierte Beitragstypen. Sie können die Funktionalität des Formulars entsprechend Ihren individuellen Anforderungen erweitern.
  Sicher, die meisten Plugins bieten mithilfe der Shortcodes ähnliche Optionen. Mit den benutzerdefinierten Formularen können Sie sie jedoch an bestimmten Stellen auf der Website hinzufügen, je nachdem, wie Sie sie anzeigen möchten.

So erstellen Sie ein Formular in WordPress ohne Plugins

Es gibt viele Arten von Formularen, die Sie in WordPress erstellen können, ohne die Plugins zu verwenden. Aber ein Kontaktformular ist eines der wichtigsten und beliebtesten. Deshalb zeigen wir Ihnen in diesem Tutorial, wie Sie ein Kontaktformular erstellen .

Bevor wir beginnen , hoffen wir, dass Sie über grundlegende Programmierkenntnisse verfügen, da wir Skriptsprachen und Auszeichnungssprachen wie HTML und PHP verwenden. Wenn Sie nicht über die erforderlichen Kenntnisse verfügen, empfehlen wir Ihnen, die Hilfe eines Programmierers in Anspruch zu nehmen, der Ihnen bei der Erstellung eines Formulars hilft.

Um ein Kontaktformular in WordPress zu erstellen, müssen Sie zunächst eine Kontaktseite erstellen. Also fangen wir damit an.

1) Erstellen Sie eine Seite für das Formular

Gehen Sie in Ihrem WordPress-Dashboard zu Seiten > Neu hinzufügen .

Dadurch wird der Seiteneditor geöffnet, in dem Sie neben dem eigentlichen Kontaktformular auch den Seitentitel und weitere notwendige Beschreibungen eingeben können. Wenn Sie auf dieser Seite jedoch nur ein Formular benötigen, können wir das Formular direkt erstellen.

2) Fügen Sie im Editor HTML-Code für das Formular hinzu

 Gehen Sie nun zu Ihrem Code-Editor, indem Sie oben links auf dem Bildschirm auf Optionen (drei vertikale Punkte) > Code-Editor klicken. Fügen Sie dann im Editor einen HTML-Code für das Formular hinzu. Sie können die erforderlichen Formularfelder basierend auf dem folgenden Code hinzufügen. 
<form method="post">
  <label for="name">Name:</label>
<Eingabetyp="text" name="name" erforderlich="">

<label for="email">E-Mail:</label>
<input type="email" name="email" erforderlich="">

<label for="message">Nachricht:</label>
<textarea name="message" erforderlich=""></textarea>

<input type="submit" value="Submit">
</form>

Dieser Code hilft Ihnen, ein einfaches Kontaktformular in WordPress zu erstellen. Sie können es jedoch problemlos ändern, um das gewünschte Formular auf Ihrer WordPress-Website zu erstellen.

Nachdem Sie alle erforderlichen Formularfelder zum Code hinzugefügt haben, klicken Sie auf „Veröffentlichen “ oder „Aktualisieren“ , um die Änderungen auf der Kontaktseite zu speichern.

Wenn Sie eine Vorschau der Seite anzeigen, können Sie das gerade erstellte Formular sehen. Um das Formular jedoch funktionsfähig zu machen und Daten daraus zu extrahieren, müssen Sie auch die Formularübermittlungen bearbeiten. Daher müssen wir danach eine Datenbank für die Formulareinsendungen erstellen.

3) Erstellen Sie eine Datenbanktabelle für die Formularübermittlung

Um eine Datenbank für Formularübermittlungen zu erstellen, können Sie ein Datenbankverwaltungstool wie phpMyAdmin verwenden. Sie können darauf zugreifen, indem Sie sich bei Ihrem cPanel anmelden. Wenn Sie nicht über die erforderlichen Anmeldeinformationen verfügen, empfehlen wir Ihnen, sich an Ihren Hosting-Dienst oder den Websitebesitzer zu wenden.

Scrollen Sie nun nach unten zum Abschnitt „Datenbank“ und klicken Sie auf „phpMyAdmin“ . Dadurch wird das phpMyAdmin-Dashboard geöffnet, in dem Sie alle Datenbanken Ihrer Website sehen können.

Erweitern Sie die Tabelle Ihrer Website-Datenbank und scrollen Sie zum Ende der Seite, wo Sie eine neue Datenbanktabelle erstellen können. Geben Sie hier den Tabellennamen „ wp_contact_form_submission “ ein und klicken Sie auf „Los“ , um die neue Tabelle zu erstellen.

Anschließend müssen Sie die Datenfelder für die Formularfelder in den Tabellenspalten und deren Typen eingeben. Gemäß dem Formular, das wir gerade erstellt haben, fügen wir die folgenden Spaltennamen und -typen hinzu:

• Name: TEXT
• E-Mail: TEXT
• Nachrichtentext
• Einreichungszeit: DATETIME

Klicken Sie abschließend aufSpeichern , um die Änderungen in der Datenbanktabelle zu speichern.

Wir haben die Datenbanktabelle basierend auf dem von uns erstellten Kontaktformular benannt. Sie können also den Namen der Tabelle je nach dem ursprünglich erstellten Formular ändern. Wenn Sie in Ihrem Formular unterschiedliche Formularfelder verwendet haben, können Sie die Spalten entsprechend hinzufügen.

4) Fügen Sie Code zur Verarbeitung von Formularübermittlungen hinzu

Nachdem Sie die Datenbank erstellt haben, müssen Sie noch eine Reihe von Codes hinzufügen, um die Formularübermittlungen in der Designfunktionsdatei Ihrer Website zu verarbeiten.

Wir empfehlen Ihnen jedoch, Ihre Website zu sichern, bevor Sie fortfahren, da wir einige der Kerndateien der Website bearbeiten werden. Und alle unbeabsichtigten Änderungen könnten zu weiteren Problemen auf Ihrer Website führen. Wenn Sie Hilfe benötigen, können Sie sich unsere ausführliche Anleitung zum Sichern einer WordPress-Website ansehen.

4.1) Greifen Sie auf die Theme-Funktionsdatei zu

Gehen Sie in Ihrem WordPress-Dashboard zu „Darstellung“ > „Designdatei-Editor“, um auf die Datei mit den Designfunktionen zuzugreifen. Hier finden Sie alle Kernthemendateien Ihrer Website. Wählen Sie dann die Datei „Themenfunktionen“ ( functions.php) auf der rechten Seite Ihres Bildschirms aus, in der wir den Code hinzufügen.

4.2) Fügen Sie den Code zum Theme-Datei-Editor hinzu

Sie können Folgendes verwenden, um die Formularübermittlung auf Ihrer Website abzuwickeln. Fügen Sie also am Ende des Editors den folgenden Code hinzu.

 if ($_SERVER["REQUEST_METHOD"] === "POST") {
  $name = sanitize_text_field($_POST["name"]);
  $email = sanitize_email($_POST["email"]);
  $message = sanitize_textarea_field($_POST["message"]);

  // Code hinzufügen, um die Formulardaten in der Datenbank zu speichern
  global $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $data = array(
    'name' => $name,
    'email' => $email,
    'message' => $message,
    'submission_time' => current_time('mysql')
  );
  $insert_result = $wpdb->insert($table_name, $data);

  if ($insert_result === false) {
    $response = array(
      'Erfolg' => falsch,
      'message' => 'Fehler beim Speichern der Formulardaten.',
    );
  } anders {
    $response = array(
      'Erfolg' => wahr,
      'message' => 'Formulardaten erfolgreich gespeichert.'
    );
  }

  // JSON-Antwort zurückgeben
  header('Content-Type: application/json');
  echo json_encode($response);
  Ausfahrt;
}

Dieser Code speichert die eingegebenen Formulardaten aus dem Formular in der soeben erstellten Formularübermittlungsdatenbanktabelle. Wir haben auch eine JSON-Antwort eingefügt, um sicherzustellen, dass Sie Ihrem Formular beim Bearbeiten des Codes die richtigen Datenbanktabellennamen und -felder hinzugefügt haben. Sie können es entfernen, nachdem die Formulardaten erfolgreich in der Datenbank gespeichert wurden.

Klicken Sie einfach auf Datei aktualisieren, nachdem Sie alle erforderlichen Änderungen am Code vorgenommen haben.

5) Zeigen Sie Formulareinsendungen in Ihrem Dashboard an

Nachdem die Formulardaten in der Datenbank gespeichert wurden, können Sie Ihr Dashboard-Menü erstellen, um die Formularübermittlungen anzuzeigen. Deshalb fügen wir auch einen Code ein, um es anzuzeigen.

Sie können der Theme-Funktionsdatei ( funtions.php) den folgenden Code hinzufügen, genau wie im vorherigen Schritt.

 Funktion display_contact_form_submissions_page() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE name <> '' AND email <> '' AND message <> '' ORDER BY subscription_time DESC", ARRAY_A);

  ?>
  <div class="wrap">
    <h1>Einreichen von Kontaktformularen</h1>
    <table class="wp-list-table widefat behoben gestreift">
      <thead>
        <tr>
          <th>Name</th>
          <th>E-Mail</th>
          <th>Nachricht</th>
          <th>Einreichungszeit</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($form_data as $data): ?>
          <tr>
            <td><?php echo esc_html($data['name']); ?></td>
            <td><?php echo esc_html($data['email']); ?></td>
            <td><?php echo esc_html($data['message']); ?></td>
            <td><?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
<?php }

Funktion register_contact_form_submissions_page() {
  add_menu_page(
    „Einreichen von Kontaktformularen“,
    „Formulareinreichungen“,
    'manage_options',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'Dashicons-Feedback'
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

Klicken Sie erneut auf Datei aktualisieren , nachdem Sie den Code entsprechend dem von Ihnen erstellten Formular und der Datenbanktabelle eingefügt und bearbeitet haben.

Wenn Sie nun zu Ihrem WordPress-Dashboard gehen, sehen Sie ein Menü „ Kontaktformular-Übermittlungen “. Dadurch werden alle Formulareinsendungen des ursprünglich erstellten Formulars angezeigt.

Debug-Optionen zum Anzeigen von Formularübermittlungen

Wenn Sie die Formulardaten nicht sehen können, empfehlen wir Ihnen, einen Code für die Debug-Ausgabe und eine SQL-Abfrage zum Code hinzuzufügen. Sie können die Codes var_dump($form_data); hinzufügen. und var_dump($wpdb->last_query); bzw. nach der Abfrage.

Der Code könnte also etwa so aussehen:

 Funktion display_contact_form_submissions_page() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY subscription_time DESC", ARRAY_A);

  var_dump($form_data); // Debug-Ausgabe
  var_dump($wpdb->last_query); // SQL-Abfrage debuggen

  ?>
  <!-- Rest des Codes... -->
  <?php
}

Basierend auf dem Debug-Bericht können Sie die Codes weiter bearbeiten, um sicherzustellen, dass die Formulardaten korrekt angezeigt werden. Sie können aber auch die Punkte im nächsten Abschnitt durchgehen, um sicherzustellen, dass der von Ihnen verwendete Code keinen Fehler enthält.

Grundlegende Überlegungen zum Erstellen eines effizienten benutzerdefinierten Formulars

Hier sind einige Faktoren, die Sie beim Bearbeiten der Codes zum Erstellen Ihres benutzerdefinierten Formulars berücksichtigen sollten. Sie können hilfreich sein, wenn Sie während des Prozesses auf Fehler stoßen .

• Überprüfen Sie die Datenbank: Stellen Sie sicher, dass die Formulardaten korrekt in der richtigen Tabelle gespeichert sind. Für dieses Tutorial ist es die Tabelle „wp_contact_form_submissions“.
• Auf Fehler prüfen: Überprüfen Sie Ihre PHP-Fehlerprotokolle oder aktivieren Sie die Fehlerberichterstattung, um festzustellen, ob Fehler im Zusammenhang mit der Formularübermittlung oder der Datenanzeige vorliegen. Fehler können Hinweise darauf geben, was möglicherweise schiefläuft.
• Überprüfen Sie den Formularübermittlungsprozess: Stellen Sie sicher, dass die Formulardaten korrekt übermittelt werden und dass der PHP-Code zum Speichern der Formulardaten fehlerfrei ausgeführt wird. Überprüfen Sie, ob die Formulardaten beim Absenden des Formulars korrekt an den PHP-Code übergeben werden.
• Tabellennamen überprüfen: Überprüfen Sie noch einmal, ob der in der Funktion „display_contact_form_submissions_page()“ verwendete Tabellenname mit dem tatsächlichen Tabellennamen in der Datenbank übereinstimmt. Stellen Sie sicher, dass es „wp_contact_form_submissions“ ist, oder passen Sie den Tabellennamen entsprechend Ihrer Datenbanktabelle an.
• Cache leeren: Wenn Sie Caching-Plugins oder serverseitiges Caching verwenden, leeren Sie den Cache, um sicherzustellen, dass Sie die neuesten Daten sehen.
• Berechtigungen: Stellen Sie sicher, dass die Benutzerrolle, mit der Sie angemeldet sind, über die Funktion „manage_options“ verfügt, um auf die benutzerdefinierte Admin-Seite zuzugreifen. Mit dieser Funktion können Administratoren standardmäßig auf die Seite zugreifen.

Wir haben für Sie eine Reihe von Codes zum Erstellen eines Kontaktformulars in WordPress erwähnt. Sie müssen die Codes jedoch bearbeiten, wenn Sie ein anderes Formular oder ein alternatives Formular mit anderen Datenfeldern erstellen möchten. Daher können die oben genannten Punkte auch für Sie hilfreich sein, um Ihr individuelles Formular auf WordPress zu erstellen.

Abschluss

So erstellen Sie ein Formular in WordPress, ohne Plugins zu verwenden. Sie können Formulare auch mit Plugins erstellen. Allerdings hat die Erstellung eines benutzerdefinierten Formulars viele Vorteile, wenn Sie über grundlegende Programmierkenntnisse verfügen.

Mit den grundlegenden Codesätzen, die wir in diesem Tutorial enthalten haben, können Sie ganz einfach ein Formular erstellen. Zusammenfassend sind hier die grundlegenden Schritte zum Aufbau einer effektiven Lösung aufgeführt:

• Fügen Sie den Code für das Formular im Seiteneditor hinzu
• Erstellen Sie eine Datenbank für Formularübermittlungen
• Fügen Sie die erforderlichen Codes hinzu, um Formularübermittlungen zu verarbeiten und anzuzeigen

Wir hoffen, dass Sie mit den in diesem Tutorial genannten Codes jetzt problemlos ein Formular auf Ihrer Website erstellen können. Sie können sie je nach Bedarf bearbeiten, um zusätzliche Formularfelder hinzuzufügen. Wenn Sie auf Probleme stoßen, haben wir sogar einige Debug-Optionen und Faktoren hinzugefügt, die Sie beim Erstellen eines benutzerdefinierten Codes in WordPress berücksichtigen sollten.

Haben Sie schon einmal versucht, ein Formular in WordPress ohne Plugin zu erstellen?

Lass es uns unten in den Kommentaren wissen.

Schauen Sie sich in der Zwischenzeit gerne die folgenden Artikel an, die Ihnen dabei helfen, Ihre WordPress-Website zu verbessern und anzupassen.

• So passen Sie das WooCommerce-Registrierungsformular an
• Das Divi-Kontaktformular funktioniert nicht? Hier erfahren Sie, wie Sie das Problem beheben können!
• So fügen Sie ein Popup-Formular zu WordPress hinzu