So erstellen Sie Ihr eigenes benutzerdefiniertes Suchformular in WordPress (3 Möglichkeiten)

Möchten Sie einfach und ohne Programmierung ein benutzerdefiniertes Suchformular in WordPress erstellen?

Ein benutzerdefiniertes Suchformular ermöglicht es Besuchern, Ihre Website-Inhalte mit wenigen Klicks einfach zu durchsuchen und zu filtern.

Wenn Benutzer schnell finden, wonach sie suchen, bleiben sie mit größerer Wahrscheinlichkeit länger auf Ihrer Website. Sie werden auch eher Maßnahmen ergreifen, um ein Produkt zu kaufen, Ihren Blog zu lesen, sich für einen Newsletter anzumelden und vieles mehr.

In diesem Beitrag zeigen wir Ihnen, wie Sie ganz einfach ein benutzerdefiniertes Suchformular in WordPress erstellen, um die Benutzererfahrung zu verbessern und die Conversions zu steigern.

Lassen Sie uns vorher sehen, ob Sie wirklich ein benutzerdefiniertes Suchformular für Ihre Website erstellen müssen.

Warum ein benutzerdefiniertes Suchformular erstellen?

Ein benutzerdefiniertes Suchformular ist ideal für Websites mit vielen Inhalten, Produkten, Dokumentationen und häufig gestellten Fragen. Es ist eine unverzichtbare Funktion in E-Commerce-Shops, Online-Geschäftsverzeichnissen, Schul-/College-Websites und ähnlichen Websites.

Die Suchoption hilft Benutzern, das zu finden, was sie brauchen, ohne Minuten oder sogar Stunden damit zu verbringen, danach zu suchen.

Deshalb sollten Sie ein benutzerdefiniertes Suchformular für Ihre WordPress-Site erstellen:

• Hilft Benutzern, durch Ihre Inhalte zu navigieren
• Spart Zeit durch schnelleres Auffinden
• Steigert Conversions und Verkäufe
• Optimiert Ihre Website für mobile Benutzer
• Reduziert die Absprungrate

Jetzt zeigen wir Ihnen, wie Sie mit einem Form Builder-Plugin ein benutzerdefiniertes Suchformular in WordPress erstellen.

So erstellen Sie ein benutzerdefiniertes Suchformular in WordPress

Die erste Methode, die Sie verwenden können, ist die von WordPress.org angebotene Standardsuchoption. Sie können eine einfache WordPress-Suche aktivieren, mit der Sie nach Seiten und Beiträgen auf Ihrer Website suchen können.

Diese Methode ist allerdings etwas kompliziert. Es beinhaltet das Codieren und Bearbeiten von Dateien wie der functions.php, die hochsensibel sind. Ein falscher Schritt und Sie könnten Ihre Website beschädigen.

Sie müssen die Funktion „ get_search_form() “ verwenden, um das Suchformular auf Ihrer Website anzuzeigen. Dabei hilft Ihnen die Datei searchform.php in Ihrem WordPress-Theme. Wenn es nicht gefunden werden kann, wird die standardmäßige Kernsuchoption von WordPress verwendet.

Aber um das WordPress-Suchfeld anzupassen, müssen Sie der Datei etwas mehr Code hinzufügen.

Wenn Sie mit dem Codieren nicht vertraut sind, verwenden Sie am besten ein zuverlässiges WordPress-Such-Plugin, um eine Site-Suche zu ermöglichen. Und genau das werden wir in diesem Tutorial tun.

Auf dem Markt finden Sie mehrere Plugins, mit denen Sie das WordPress-Suchformular anpassen können.

Stellen Sie sicher, dass Sie ein WordPress-Plugin wählen, mit dem Sie nicht nur eine benutzerdefinierte Suche erstellen, sondern auch Filter hinzufügen und Ihren Besuchern die richtigen Ergebnisse anzeigen können.

Wir empfehlen die Verwendung von SearchWP, dem Such-Plugin Nr. 1 für WordPress, mit dem Sie ALLES auf Ihrer Website durchsuchen können. Sie können Formidable Forms auch verwenden, um ein benutzerdefiniertes Suchformular zu erstellen. Im Folgenden zeigen wir Ihnen, wie Sie mit diesen 2 Plugins ein benutzerdefiniertes Suchformular erstellen.

Erstellen Sie ein benutzerdefiniertes Suchformular mit SearchWP

SearchWP ist zweifellos das beste benutzerdefinierte Such-Plugin für WordPress. Es ist einfach zu bedienen, zeigt genaue Ergebnisse an und gibt Ihnen die Kontrolle über Ihr Suchformular.

SearchWP ist wirklich großartig und hat unglaubliche Premium-Funktionen, daher ist es ein Premium-Plugin. Sie können sich für einen Plan ab 99 $ pro Jahr anmelden. Und obwohl Sie nicht enttäuscht sein werden, gibt es eine 14-tägige Geld-zurück-Garantie.

Auf diese Weise können Sie eine Suche nach allem aktivieren. Durchsuchen Sie Ihre Produktdetails, den Inhalt benutzerdefinierter Felder, die Shortcode-Ausgabe, den Inhalt benutzerdefinierter Datenbanktabellen, die Cross-Site-Multisite-Suche und mehr auf Ihrer Website.

Sie erhalten Zugriff auf Funktionen wie:

• Indizierung von PDF- und Office-Dokumenten
• Automatische Integration mit der nativen WP-Suche, keine Codierung!
• Mehrere Suchmaschinen
• Schlüsselwortstammung
• Erweiterte Unterstützung für benutzerdefinierte Felder
• WooCommerce-Integration
• Ergebnisse ausschließen oder zuweisen
• Suchstatistiken und Einblicke
• Einfache Anpassung des Algorithmus

Das Plugin lässt sich auch in bbPress, WP Job Manager, Easy Digital Downloads und mehr integrieren. Außerdem erhalten Sie Zugang zu engagiertem Support und ausführlicher Dokumentation.

Und alles, was wir erwähnt haben, ist nur im Basisplan enthalten, sodass das Plugin mit nur 8,25 $ pro Monat seinen Preis absolut wert ist. Sie erhalten viel mehr Funktionen in den High-End-Plänen.

Sobald Sie sich für ein Konto angemeldet haben, können Sie mit dem folgenden Tutorial beginnen.

Schritt 1: SearchWP aktivieren

In Ihrem SearchWP-Konto können Sie auf Ihren Lizenzschlüssel, Kontodetails und Downloads zugreifen. Sie müssen die Plugin-Datei herunterladen. Und Sie werden auch Ihren Lizenzschlüssel kopieren wollen, da Sie ihn in Kürze benötigen werden.

Gehen Sie dann zu Ihrem wp-Admin-Panel und navigieren Sie zu Plugins » Neu hinzufügen » Plugin hochladen.

Wählen Sie die Plug-in-Datei aus, die Sie auf Ihren Computer heruntergeladen haben, und klicken Sie auf die Schaltfläche Jetzt installieren .

Sobald Sie es installiert und aktiviert haben, müssen Sie die Seite Einstellungen » SearchWP besuchen und dann auf die Menüoption „Lizenz“ klicken.

Holen Sie Ihren Lizenzschlüssel von Ihrem SearchWP-Konto und fügen Sie ihn hier in das Lizenzfeld ein.

Klicken Sie auf die Schaltfläche Aktivieren und Sie können die Suchmaschine einrichten.

Schritt 2: Anpassen der Suchmaschine

Wählen Sie auf der Registerkarte „SearchWP“ in Ihrem wp-Admin-Panel die Menüoption „Engines“. Klicken Sie im Inneren auf die Schaltfläche „Neu hinzufügen“, um eine neue Suchmaschine zu erstellen.

Dadurch wird eine neue Suchmaschine namens „Ergänzung“ erstellt. Um den Namen zu ändern, müssen Sie auf die Schaltfläche „Quellen & Einstellungen“ klicken.

Jetzt sehen Sie eine Option, mit der Sie auswählen können, ob Beiträge, Seiten, Mediendateien, Kommentare und Benutzer gesucht werden sollen. Die empfohlenen Einstellungen sind hier bereits hinzugefügt, sodass Sie sie unverändert lassen können.

Um die Suchmaschine später zu identifizieren, nennen wir sie „Benutzerdefiniert“ im Feld „Engine Label“.

Hier können Sie sehen, dass die Option „Keyword-Stämme“ ausgewählt wurde. Dadurch werden Wortendungen ignoriert, wenn Ihre Benutzer eine Suche durchführen, sodass die relevantesten Suchergebnisse angezeigt werden.

Wenn Sie hier fertig sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihre Änderungen zu speichern.

Zurück auf der Seite der Suchmaschine sehen Sie unter jeder Unterüberschrift einen Abschnitt namens „Anwendbare Attributrelevanz“. Auf diese Weise können Sie verschiedene Beitragsattribute priorisieren oder nur bestimmte Kategorien oder Tags in Ihre Suchergebnisseite aufnehmen.

Alles, was Sie tun müssen, ist, mit den Schiebereglern die „Attributrelevanz“ anzupassen.

Dies wirkt sich darauf aus, wie Suchmaschinen Inhalte auf Ihrer Website bewerten und einordnen. Wenn Sie beispielsweise möchten, dass Google dem Titel des Beitrags mehr Aufmerksamkeit schenkt als dem Inhalt, können Sie dem Titel hier mehr Bedeutung zuweisen.

Als nächstes gibt Ihnen SearchWP die Kontrolle darüber, ob bestimmte Inhalte in die Suchergebnisse aufgenommen oder aus diesen ausgeschlossen werden. Dazu können Sie Regeln erstellen.

So können Kunden schnell Produkte in derselben Kategorie finden, in der sie gerade stöbern. Oder erlauben Sie Besuchern, nach Inhalten zu demselben Thema zu suchen, über das sie gerade gelesen haben.

Um Regeln festzulegen, gibt es in jedem Abschnitt eine Schaltfläche "Regeln bearbeiten".

Wenn Sie darauf klicken, sehen Sie ein Popup mit Einstellungen für Kategorien, Tags, Format, das Veröffentlichungsdatum und die Beitrags-ID.

Sie können hier nach Belieben Regeln erstellen, um das Verhalten Ihrer Suchmaschine zu steuern.

Und wenn Sie fertig sind, klicken Sie oben auf der Seite auf die Schaltfläche „Engines speichern“, um Ihre benutzerdefinierte Suchmaschine zu erstellen.

Jetzt haben Sie Ihre WordPress-Suchmaschine erfolgreich eingerichtet. Es ist bereit, zu Ihrer Website hinzugefügt zu werden.

Schritt 3: Hinzufügen des Suchformulars mit Shortcode

Normalerweise erfordert das Hinzufügen einer Suchmaschine zu Ihrer Website viel Codierung, aber SearchWP hat dies auf ein Minimum reduziert. Sie müssen nur einen Shortcode einfügen, um Ihre Suchmaschine einzubetten, und das ist so einfach, dass es selbst für Anfänger einfach ist.

Besuchen Sie einfach die SearchWP Shortcodes-Erweiterung und klicken Sie dann auf die Schaltfläche „Erweiterung herunterladen“.

Danach müssen Sie die Erweiterung auf Ihrer WordPress-Seite auf die gleiche Weise installieren und aktivieren, wie Sie das Plugin oben installiert haben.

Nach der Aktivierung können Sie Ihren Posts, Seiten und Widgets einen einfachen Shortcode hinzufügen.

Sie müssen lediglich einen Beitrag im Blockeditor bearbeiten und einen neuen Block mit dem Namen „Benutzerdefiniertes HTML“ hinzufügen.

Innerhalb des Blocks können Sie diesen Shortcode kopieren und einfügen:

 [searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"] <div class="search-results-wrapper"> [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4] <h2>[searchwp_search_result_link direct="true"]</h2> [searchwp_search_result_excerpt] [/searchwp_search_results] </div> <div class="no-search-results-found"> [searchwp_search_results_none] No results found, please search again. [/searchwp_search_results_none] </div> <div class="search-results-pagination"> [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"] [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"] </div>

Wir haben unsere Engine „custom“ genannt. Wenn Sie einen anderen Namen gewählt haben, müssen Sie engine=“custom” an vier Stellen in diesem Code-Snippet in Ihren eigenen Engine-Namen ändern.

In diesem Code lautet der Schaltflächentext „Benutzerdefinierte Suche“. Wenn Sie den Text der Suchschaltfläche kreativer gestalten möchten, können Sie die Bearbeitung in der ersten Zeile button_text=“Custom Search” .

Dieser Code fügt die benutzerdefinierte Suchmaschine zu Ihrem WordPress-Beitrag hinzu. Es wird auch einen Abschnitt erstellen, um die Suchergebnisse anzuzeigen, bei Bedarf eine Keine-Ergebnis-Meldung anzuzeigen und eine Paginierung hinzuzufügen, wenn die Ergebnisse auf mehrere Seiten gehen.

Sie können den Beitrag in der Vorschau anzeigen und die Suchmaschine wird angezeigt. Sie sehen ein Suchfeld zusammen mit der CTA-Schaltfläche in Ihrem Beitrag.

Veröffentlichen oder aktualisieren Sie es dann und schalten Sie das benutzerdefinierte Suchformular live. Wenn Sie dabei Hilfe benötigen, folgen Sie unserer einfachen Anleitung zum Hinzufügen eines Shortcodes in WordPress.

Sie können Ihr benutzerdefiniertes Formular testen, indem Sie einige Suchbegriffe eingeben, um die Ergebnisse anzuzeigen, die das Tool zurückgibt.

Damit haben Sie gelernt, wie Sie Ihrer WordPress-Website Suchleisten hinzufügen. SearchWP ist ein erweitertes Such-Plugin, bei dem es sich lohnt, mehr seiner Funktionen zu erkunden. Als Nächstes zeigen wir Ihnen, wie Sie die Suchfunktion Ihrer Website verbessern können.

Schritt 4: Erweiterte Einstellungen konfigurieren

Es gibt 2 erweiterte Optionen, die wir behandeln möchten, um Ihr benutzerdefiniertes WordPress-Suchformular zu verbessern.

• Live-Ajax-Suche hinzufügen: Dies fügt automatisch Dropdown-Suchergebnisse hinzu, während der Benutzer tippt. Es hilft dem Benutzer, seine Suchanfrage schneller zu finden. SearchWP bietet dafür ein kostenloses Live Ajax Lite Search Plugin im WordPress Repository an.
• Erweiterte Einstellungen für SearchWP verwenden : Unter der Registerkarte Einstellungen » SearchWP in Ihrem WordPress-Menü gibt es eine Registerkarte Erweitert. Auf dieser Seite können Sie Einstellungen aktivieren, die es Ihren Benutzern erleichtern, das zu finden, wonach sie suchen.

Dadurch haben Sie die volle Kontrolle darüber, wie Ihre Suchmaschine funktioniert. Als Nächstes zeigen wir Ihnen, wie Sie das Aussehen Ihrer Suchmaschine anpassen können.

Schritt 5: Gestaltung des Suchformulars und der Ergebnisseite

Wenn Sie mit der Darstellung Ihrer neuen Suchleiste nicht zufrieden sind, können Sie dies ändern.

Was Sie wissen müssen, ist, dass das Design Ihrer Website das Erscheinungsbild Ihrer Homepage, Kopfzeile, Seitenleiste, Posts, Suchformular und Suchergebnisse steuert. Die Formate und Stile Ihres WordPress-Themes werden in einem CSS-Stylesheet gespeichert.

Sie müssen lediglich Ihr eigenes benutzerdefiniertes CSS hinzufügen, um das Aussehen Ihrer Suchleiste und Ihrer Ergebnisseite zu ändern.

Wenn Sie dies noch nicht getan haben, empfehlen wir Ihnen, ein Backup Ihrer Website zu erstellen. Es ist wichtig, dass Sie Ihre Website wiederherstellen können, falls die Dinge nicht wie geplant verlaufen. Sie können dann eine Staging-Site (einen Klon Ihrer Website) verwenden, um dies zuerst auszuprobieren.

Unten ist ein benutzerdefiniertes CSS-Snippet, das mit den meisten WordPress-Themes funktioniert. Der erste Abschnitt ändert den Stil des Standardsuchformulars und der zweite Abschnitt passt die Suchergebnisse an.

Sie können den folgenden Code kopieren und einfügen, um Ihre Website-Suchfunktion zu gestalten:

 .searchform { font-family:arial; font-size:16px; background:#ace5e3; color:#ffffff; border:1px solid #61c3c0; padding:10px; height:90px; width:600px; } .search-results { font-family:arial; font-size:16px; background:#ace5e3; color:#000000; border:1px solid #61c3c0; padding:10px; width:600px; }

Möchten Sie mehr darüber erfahren? WPBeginner hat die beste Anleitung: So fügen Sie Ihrer WordPress-Site ganz einfach benutzerdefiniertes CSS hinzu.

Das ist alles dazu! Sie haben mit SearchWP ein vollständig anpassbares Suchformular erstellt.

Als Nächstes zeigen wir Ihnen eine weitere Möglichkeit, ein benutzerdefiniertes WordPress-Suchformular zu erstellen.

Erstellen Sie ein benutzerdefiniertes Suchformular mit Formidable Forms

Formidable Forms ist das einzige WordPress-Formularerstellungs-Plugin, das mit einer vollständig integrierten Ansichtsfunktion ausgestattet ist. So können Sie Formulardaten nicht nur sammeln, sondern auch im Frontend Ihrer Seite anzeigen.

Mit Ansichten können Sie ganz einfach eine Webseite erstellen, um die vom Benutzer übermittelten Daten direkt von Ihrem WordPress-Dashboard aus schön anzuzeigen. Sie können dies verwenden, um Geschäftsverzeichnisse, Mitgliederverzeichnisse, Auflistungen und mehr anzuzeigen.

Sie können Ihre Ansichten auch mit einem Suchformular verbinden und den Besuchern Ihrer Website ermöglichen, nach bestimmten Inhalten zu suchen.

Beginnen wir mit dem Tutorial.

Schritt 1: Installieren und aktivieren Sie das Formidable Forms-Plugin

Zunächst müssen Sie sich für ein Formidable Forms-Konto anmelden. Stellen Sie sicher, dass Sie den Plan erhalten, der die Views-Funktion enthält.

Nachdem Sie sich angemeldet haben, gehen Sie zu Ihrem WordPress-Admin-Dashboard und öffnen Sie die Registerkarte Plugins » Neu hinzufügen. Suchen Sie nach dem Formidable Forms -Plugin und klicken Sie dort auf die Schaltfläche Installieren .

Wenn Sie dazu weitere Hilfe benötigen, können Sie unsere Anleitung zur Installation eines WordPress-Plugins durchgehen.

Sobald Sie das Plugin installiert und aktiviert haben, sehen Sie eine Willkommensseite. Klicken Sie auf die Schaltfläche Konto verbinden, um sich mit Ihrem Konto zu verbinden und auf alle Premium-Funktionen zuzugreifen.

Wenn Sie noch nicht bei Ihrem Formidable Forms-Konto angemeldet sind, müssen Sie sich erneut anmelden.

Als nächstes müssen Sie das Add-on Formidable Forms Pro und Visual Views auf Ihrer Website installieren.

Sie können sie direkt von der Registerkarte „Formidable“ in Ihrem WordPress-Dashboard installieren oder die Plugin-Datei von Ihrem Konto herunterladen.

Jetzt können Sie mit Formidable Forms ein benutzerdefiniertes Suchformular in WordPress erstellen.

Schritt 2: Fügen Sie Daten für Ihr Suchformular hinzu

Bevor Sie ein Suchformular erstellen, müssen Sie Daten für Ihre Suchergebnisse sammeln.

Um ein neues Formular zu erstellen, navigieren Sie zu Formidable » Formulare und klicken Sie auf die Schaltfläche + Neu hinzufügen.

Sie sehen ein Popup, in dem Sie eine Vorlage für Ihr Formular auswählen können. Wir verwenden für dieses Tutorial die leere Formularvorlage.

Dann müssen Sie den Namen und die Beschreibung für Ihr Formular hinzufügen.

Wenn Sie mit der Benennung Ihres Formulars fertig sind, klicken Sie dort auf die Schaltfläche Erstellen , um den Drag-and-Drop-Formularersteller zu starten.

Im Formularersteller sehen Sie die Formularfelder auf der linken Seite und die Formularvorschau auf der rechten Seite der Seite.

Um beliebige Formularfelder einzufügen, können Sie diese einfach aus dem Feldmenü in die Formularvorschau ziehen und dort ablegen.

Hier fügen wir diese Felder hinzu: Vorname, Nachname, E-Mail und Land. Sie können jedes der Felder gemäß Ihren Anforderungen hinzufügen.

Um ein beliebiges Feld anzupassen, müssen Sie nur darauf klicken und Sie können die Formulareinstellungen sehen. Es gibt viele Optionen wie Label, erforderliche Option, benutzerdefiniertes CSS und mehr.

Sie können sogar die bedingte Logikoption verwenden, um Formularfelder entsprechend der Benutzereingabe ein- oder auszublenden.

Wenn Sie mit dem Hinzufügen von Feldern fertig sind, klicken Sie auf die Schaltfläche Aktualisieren in der oberen rechten Ecke des Formularerstellers.

Jetzt müssen Sie nur noch dieses Formular auf Ihrer Website veröffentlichen, um Daten von Ihren Benutzern oder Website-Mitgliedern zu sammeln.

Sie können auch eine Datendatei von Ihrem Computer importieren. Öffnen Sie dazu die Registerkarte Einträge oben im Builder und klicken Sie auf die Schaltfläche Importieren .

Dann sehen Sie ein Fenster, in dem Sie eine beliebige CSV- oder XML-Datei hochladen können, um Daten in Ihr Formular zu importieren. Sie können die Felder den Daten in der Datei zuordnen, um Datensätze zu importieren.

Nachdem Sie die Daten gesammelt haben, müssen Sie ein benutzerdefiniertes Suchformular in WordPress erstellen, damit Benutzer auf Ihrer Website suchen können.

Schritt 3: Erstellen Sie Ihr benutzerdefiniertes Suchformular

Um ein Suchformular zu erstellen, müssen Sie die gleichen Anweisungen in Schritt 2 befolgen.

Gehen Sie zu Formidable » Formulare » Neu hinzufügen und wählen Sie eine leere Vorlage aus. Geben Sie dann Ihrem benutzerdefinierten Suchformular einen Namen und eine Beschreibung.

In diesem Formular werden wir 3 Formularfelder hinzufügen, damit Benutzer die Daten auf Ihrer Website durchsuchen können. Die Felder sind Vorname, Nachname und Land.

Sie können das Textformularfeld für die Namen und ein Such-Dropdown-Feld für die Ländersuche verwenden.

In den Einstellungen für das Feld Vorname müssen Sie den Standardwert hinzufügen, um Ihr Suchformular später mit einer Ergebnisansicht zu verbinden.

Fügen Sie dazu diesen Shortcode zur Option Standardwert in den Feldeinstellungen hinzu:

[param=fname abrufen]

Hier ist „fname“ der Text, den wir für das Vornamensfeld verwenden, um eine Verbindung mit der Ansicht herzustellen.

In den Feldeinstellungen Nachname fügen wir denselben Shortcode hinzu:

[param=lname abrufen]

Hier ist „lname“ der Text, den wir für das Nachnamenfeld verwenden, um eine Verbindung mit der Ansicht herzustellen.

In den Länderfeldeinstellungen müssen wir die Ländernamen in der Dropdown-Option hinzufügen. Stellen Sie sicher, dass Sie die erste Option leer lassen.

Wenn Sie nach unten scrollen, sehen Sie die Option zum Hinzufügen eines Platzhaltertextes. Und wie bei den anderen beiden Formularfeldern müssen Sie hier einen Standardwert hinzufügen. Geben Sie den Shortcode ein:

[Erhalte Parameter=Land]

Hier ist „Land“ der Text, den wir für das Länderfeld verwenden, um eine Verbindung mit der Ansicht herzustellen.

Nachdem Sie die Eingabetypen hinzugefügt haben, können Sie das Layout der Formularfelder ändern.

Damit sie in einer einzelnen horizontalen Linie angezeigt werden, gehen Sie für jedes Feld zur Option CSS-Layoutklassen und wählen Sie die Option 1/4 aus.

Wenn Sie die Schaltfläche anpassen möchten, navigieren Sie zur Registerkarte Einstellungen » Gestaltung & Schaltflächen und gehen Sie zu den Schaltflächeneinstellungen.

Hier können Sie den Text der Schaltfläche „Senden“ in „ Suchen “ ändern und die Ausrichtung der Schaltfläche „ Inline “ auswählen. Dadurch erscheint Ihre Suchschaltfläche in derselben Zeile wie Ihre Formularfelder.

Nachdem Sie nun gelernt haben, wie Sie ein benutzerdefiniertes Suchformular in WordPress erstellen, fügen wir dieses Formular und die Ergebnisse auf einer Webseite ein.

Schritt 4: Erstellen Sie eine Suchergebnisansicht

Sie müssen eine Ansicht erstellen, um die Suchergebnisse und das Suchformular auf derselben Seite anzuzeigen.

Um eine neue Ansicht zu erstellen, öffnen Sie die Seite Formidable » Ansichten und klicken Sie auf die Schaltfläche + Neu hinzufügen.

Dann können Sie das Popup sehen, in dem Sie zwischen den Ansichtstypen Raster, Tabelle, Kalender und Klassisch wählen können.

Für dieses Tutorial wählen wir die Rasteransicht für die Ergebnisse des Suchformulars.

Danach sehen Sie die Optionen, um ein Formular für Eingaben auszuwählen und den Namen für Ihre Ergebnisansicht hinzuzufügen. Stellen Sie sicher, dass Sie das Datenerfassungsformular auswählen, das Sie in Schritt 2 erstellt haben.

Klicken Sie auf die Schaltfläche Ansicht erstellen , wenn Sie fertig sind.

Im Views Builder sehen Sie die Gestaltungsoptionen auf der linken Seite und den View Layout Builder auf der rechten Seite. Klicken Sie auf den Link zum Hinzufügen von Inhalten , um Ihre Einträge hinzuzufügen.

Klicken Sie auf das Symbol „ + “, um mit dem Hinzufügen Ihres Eintrags zu den Ansichten zu beginnen. Dadurch wird der Inhaltseditor für Einträge geöffnet.

Im Inhaltseditor der Auflistungsseite können Sie die Formularfelder aus der Anpassungsoption auf der rechten Seite der Seite hinzufügen. Klicken Sie dort einfach auf die Formularfelder, um sie in Ihre Ergebnisansicht einzufügen.

Anschließend können Sie die Feldtasten so gestalten, dass die Formularfelder im gewünschten Layout angezeigt werden.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Ansicht aktualisieren. Jetzt können Sie alle Einträge auf der Ansichtsseite sehen.

Sie müssen das Suchformular auf dieser Seite hinzufügen. Klicken Sie dazu auf die Option „ Vor Inhalt hinzufügen“.

Dadurch wird der Inhaltseditor geöffnet, in dem Sie das benutzerdefinierte Suchformular einfügen können, das Sie in Schritt 3 erstellt haben.

Alles, was Sie tun müssen, ist auf die Schaltfläche Formidable zu klicken und Ihr Suchformular auszuwählen, um den Formular-Shortcode einzufügen.

Klicken Sie auf die Schaltfläche Ansicht aktualisieren, um Ihr benutzerdefiniertes Suchformular für die Ansicht anzuzeigen.

Im nächsten Schritt zeigen wir Ihnen, wie Sie die Ergebnisansicht auf Ihrer WordPress-Seite veröffentlichen.

Schritt 5: Ansicht Suchergebnisse veröffentlichen

Um die Suchergebnisansicht auf Ihrer Website hinzuzufügen, müssen Sie eine neue Seite erstellen und nach dem Block „Formidable Views“ suchen.

Nachdem Sie die Ansicht hinzugefügt haben, können Sie die Seite auf Ihrer Website veröffentlichen. Ihre Seite wird in etwa so aussehen.

Warte ab! Sie sind noch nicht fertig. Sie müssen Ihr benutzerdefiniertes Suchformular und die Ergebnisansicht verbinden, damit Benutzer nach Inhalten auf Ihrer Website suchen können.

Schritt 6: Verbinden Sie das benutzerdefinierte Suchformular mit der Ansicht

Um Ihr Suchformular zu verbinden, gehen Sie zu Formidable » Formulare und öffnen Sie die Option Einstellungen des Suchformulars.

Hier können Sie zur Option On Submit gehen und die Option Redirect to URL auswählen. Dann müssen Sie den Link zu der Ansichtsseite hinzufügen, die Sie in Schritt 5 erstellt haben.

Kopieren Sie dazu die Seiten-URL und fügen Sie diesen Teil hinzu: „?fname[21]&lname=[19]&country=[22]“.

Sie können Feldtext und Schlüssel einfügen, sodass die Umleitungs-URL wie folgt aussieht:

http://Name Ihrer Website/Benutzerverzeichnis/?fname[21]&lname=[19]&country=[22]

Denken Sie daran, für dieses Formular die Option Über dieses Formular übermittelte Einträge nicht speichern zu aktivieren.

Jetzt müssen Sie Ihren Ergebnisansichten Filter hinzufügen, damit Benutzer die Auflistung nach den von Ihnen hinzugefügten Formularfeldern durchsuchen können.

Öffnen Sie dazu die zuvor erstellte Ansicht und klicken Sie oben auf der Seite auf die Filteroption.

Dann müssen Sie die Filter für Vorname, Nachname und Land hinzufügen und den Shortcode als Standardwert für jedes Feld eingeben.

Eine letzte Sache, die Sie tun müssen, ist, den Shortcode Ihres Suchformulars in die Option No Entrys Message im linken Menü einzufügen. Dadurch können Benutzer nach jeder Suche nach weiteren Inhalten suchen.

Vergessen Sie nicht, die Ansicht zu aktualisieren, nachdem Sie mit den Einstellungen fertig sind.

Testen Sie Ihr benutzerdefiniertes Suchformular

Um zu überprüfen, ob Ihr Suchformular richtig funktioniert, laden Sie Ihre Suchseite neu und verwenden Sie die Filter, um nach Einträgen zu suchen.

Damit kennen Sie 3 Möglichkeiten, Ihrer Website ein Suchformular hinzuzufügen. Obwohl die standardmäßige WordPress-Suchoption kostenlos ist, empfehlen wir sie nicht, wenn Sie nicht wissen, was Sie mit Code tun. Das SearchWP-Plugin ist bei weitem unsere Lieblingsmethode. Es ist einfach zu bedienen und fügt Ihrer Website eine wesentlich erweiterte Suchfunktion hinzu.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, mit Hilfe des Formidable Forms-Plugins auf einfache Weise ein benutzerdefiniertes Suchformular in WordPress zu erstellen.

Für Ihre nächsten Schritte können Sie sich diese Ressourcen ansehen:

• So fügen Sie Ihrer WordPress-Site ein benutzerdefiniertes Buchungsformular hinzu
• Die besten Formularersteller im Vergleich (kostenlos und kostenpflichtig)
• So erstellen Sie ein Registrierungsformular mit PayPal-Zahlungen in WordPress

Diese Beiträge helfen Ihnen dabei, Ihrer WordPress-Site mit Hilfe der besten WordPress-Formularersteller weitere Funktionen hinzuzufügen.