So erstellen Sie ein benutzerdefiniertes Suchformular in WordPress (schnell & einfach)

Möchten Sie ganz einfach ein benutzerdefiniertes Suchformular in WordPress ohne Code 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 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 mehr.

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

Sehen wir uns vorher an, 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 FAQs. Es ist ein Muss für E-Commerce-Shops, Online-Branchenverzeichnisse, Schul-/Hochschulseiten und ähnliche Websites.

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

Hier sind also die Gründe, warum Sie ein benutzerdefiniertes Suchformular für Ihre WordPress-Website erstellen sollten:

• Hilft Benutzern, durch Ihre Inhalte zu navigieren
• Spart Zeit, indem Dinge schneller gefunden werden
• Steigert Konversionen und Verkäufe
• Optimiert Ihre Website für mobile Benutzer
• Reduziert die Absprungrate

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

So erstellen Sie ein benutzerdefiniertes Suchformular in WordPress

Es gibt 3 Methoden, die Sie verwenden können:

• Code zu Ihrer WordPress-Website hinzufügen
• Das SearchWP-Plugin installieren – (Einfachste Methode)
• Ein Formular mit Formidable Forms erstellen

Wir werden Sie durch alle 3 führen.

1. Code zu Ihrer WordPress-Website hinzufügen

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

Diese Methode ist jedoch etwas kompliziert. Sie beinhaltet das Codieren und Bearbeiten von WordPress-Kern-Dateien wie der functions.php-Datei, die sehr sensibel sind. Sie müssen mit JavaScript, PHP und anderen Programmiersprachen vertraut sein, um dies zum Laufen zu bringen. 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. Dies hilft Ihnen, die Datei searchform.php in Ihrem WordPress-Theme zu erhalten. Wenn sie nicht gefunden wird, wird die Standard-Suchoption von WordPress verwendet.

Um die WordPress-Suchleiste anzupassen, müssen Sie jedoch weiteren Code zur Datei hinzufügen.

Wir empfehlen diese Methode nicht, insbesondere wenn Sie mit dem Programmieren nicht vertraut sind. Verwenden Sie stattdessen am besten ein zuverlässiges WordPress-Such-Plugin, um eine Website-Suche zu aktivieren. Und genau das werden wir als Nächstes tun.

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

Stellen Sie sicher, dass Sie ein WordPress-Plugin wählen, das es Ihnen nicht nur ermöglicht, eine benutzerdefinierte Suche zu erstellen, sondern auch Filter hinzuzufügen und Ihren Besuchern die richtigen Ergebnisse anzuzeigen.

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 auch Formidable Forms verwenden, um ein benutzerdefiniertes Suchformular zu erstellen. Im Folgenden zeigen wir Ihnen, wie Sie mit diesen beiden Plugins ein benutzerdefiniertes Suchformular erstellen.

Installieren Sie das SearchWP-Plugin (empfohlen)

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

SearchWP ist wirklich großartig und verfügt über unglaubliche Premium-Funktionen, daher ist es ein Premium-Plugin. Sie können einen Plan ab 99 US-Dollar pro Jahr abschließen. Und obwohl Sie nicht enttäuscht sein werden, gibt es eine 14-tägige Geld-zurück-Garantie.

Dadurch können Sie eine Suche nach allem aktivieren. Durchsuchen Sie Ihre Produktdetails, Inhalte benutzerdefinierter Felder, Shortcode-Ausgaben, Inhalte benutzerdefinierter Datenbanktabellen, standortübergreifende Multisite-Suchen und mehr auf Ihrer Website.

Sie erhalten Zugriff auf Funktionen, darunter:

• Indizierung von PDF- und Office-Dokumenten
• Automatische Integration mit der nativen WP-Suche, kein Code erforderlich!
• Mehrere Suchmaschinen
• Stammform-Wortbildung
• Erweiterte Unterstützung für benutzerdefinierte Felder
• WooCommerce-Integration
• Ergebnisse ausschließen oder zuordnen
• Suchstatistiken und Einblicke
• Einfache Algorithmusanpassung

Das Plugin integriert sich auch mit bbPress, WP Job Manager, Easy Digital Downloads und mehr. Außerdem erhalten Sie Zugang zu engagiertem Support und detaillierter Dokumentation.

Und alles, was wir erwähnt haben, ist nur im Basispaket enthalten, sodass sich das Plugin für nur 8,25 US-Dollar pro Monat absolut lohnt. In den höherwertigen Paketen erhalten Sie noch viel mehr Funktionen.

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

Schritt 1: SearchWP aktivieren

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

Navigieren Sie dann zu Ihrem wp-admin-Panel und gehen Sie zu Plugins » Neu hinzufügen » Plugin hochladen.

Wählen Sie die Plugin-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.

Rufen Sie Ihren Lizenzschlüssel aus Ihrem SearchWP-Konto ab und fügen Sie ihn hier in das Lizenzfeld ein.

Klicken Sie auf die Schaltfläche Aktivieren und Sie können mit der Einrichtung der Suchmaschine beginnen.

Schritt 2: Anpassen der Suchmaschine

Wählen Sie im SearchWP-Tab in Ihrem wp-admin-Panel die Menüoption 'Engines'. Klicken Sie dort auf die Schaltfläche 'Neu hinzufügen', um eine neue Suchmaschine zu erstellen.

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

Jetzt sehen Sie eine Option, um auszuwählen, ob Beiträge, Seiten, Mediendateien, Kommentare und Benutzer durchsucht werden sollen. Die empfohlenen Einstellungen sind hier bereits hinzugefügt, sodass Sie sie so belassen können.

Um die Suchmaschine später identifizieren zu können, nennen wir sie im Feld „Engine Label“ „Custom“.

Hier sehen Sie, dass die Option „Keyword Stems“ ausgewählt wurde. Dies ignoriert Wortendungen, wenn Ihre Benutzer suchen, sodass die relevantesten Suchergebnisse angezeigt werden.

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

Nun zurück auf der Seite der Suchmaschine sehen Sie unter jeder Unterüberschrift einen Abschnitt namens „Applicable Attribute Relevance“. Dies ermöglicht es Ihnen, verschiedene Beitragsattribute zu priorisieren oder nur bestimmte Kategorien oder Tags in Ihre Suchergebnisseite einzubeziehen.

Sie müssen lediglich die Schieberegler verwenden, um die „Attribute Relevance“ anzupassen.

Dies wirkt sich darauf aus, wie Suchmaschinen Inhalte auf Ihrer Website bewerten und ranken. Wenn Sie beispielsweise möchten, dass Google dem Beitragstitel mehr Aufmerksamkeit schenkt als dem Inhalt, können Sie dem Titel hier mehr Gewicht verleihen.

Als Nächstes gibt Ihnen SearchWP die Kontrolle darüber, ob bestimmte Inhalte in den Suchergebnissen enthalten oder ausgeschlossen werden sollen. Hierfür können Sie Regeln erstellen.

Dies könnte dazu dienen, Kunden schnell Produkte in der gleichen Kategorie finden zu lassen, die sie gerade durchsuchen. Oder Besuchern ermöglichen, nach Inhalten zum gleichen Thema zu suchen, über das sie gerade gelesen haben.

Um Regeln festzulegen, gibt es in jedem Abschnitt eine Schaltfläche „Edit Rules“.

Wenn Sie darauf klicken, sehen Sie ein Popup mit Einstellungen für Kategorien, Tags, Format, Veröffentlichungsdatum und 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 „Save Engines“, um Ihre benutzerdefinierte Suchmaschine zu erstellen.

Nun haben Sie Ihre WordPress-Suchmaschine erfolgreich eingerichtet. Sie kann jetzt zu Ihrer Website hinzugefügt werden.

Schritt 3: Hinzufügen des Suchformulars mit Shortcode

Normalerweise erfordert das Hinzufügen einer Suchmaschine zu Ihrer Website viel Code, 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 auch für Anfänger leicht ist.

Besuchen Sie einfach die SearchWP Shortcodes Extension und klicken Sie dann auf die Schaltfläche „Download Extension“.

Danach müssen Sie die Erweiterung auf Ihrer WordPress-Site installieren und aktivieren, genauso wie Sie das obige Plugin installiert haben.

Nach der Aktivierung können Sie einen einfachen Shortcode in Ihre Beiträge, Seiten und Widgets einfügen.

Alles, was Sie tun müssen, ist, einen Beitrag im Block-Editor zu bearbeiten und einen neuen Block namens „Custom HTML“ hinzuzufü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 Suchmaschine „custom“ genannt. Wenn Sie einen anderen Namen gewählt haben, müssen Sie engine=“custom” in vier Stellen dieses Code-Snippets durch Ihren eigenen Suchmaschinennamen ersetzen.

In diesem Code wird der Schaltflächentext „Custom Search“ lauten. Wenn Sie den Text der Suchschaltfläche in etwas Kreativeres ändern möchten, können Sie die Bearbeitung in der ersten Zeile button_text=“Custom Search” vornehmen.

Dieser Code fügt die benutzerdefinierte Suchmaschine zu Ihrem WordPress-Beitrag hinzu. Er erstellt auch einen Abschnitt zur Anzeige der Suchergebnisse, zeigt bei Bedarf eine Meldung „Keine Ergebnisse“ an und fügt eine Paginierung hinzu, wenn die Ergebnisse auf mehrere Seiten aufgeteilt werden.

Sie können die Vorschau des Beitrags anzeigen und sehen, wie die Suchmaschine erscheint. 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 Thema 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 Suchleisten zu Ihrer WordPress-Website hinzufügen. SearchWP ist ein fortschrittliches Such-Plugin, dessen Funktionen es wert sind, weiter erforscht zu werden. Als Nächstes zeigen wir Ihnen, wie Sie die Suchfunktion Ihrer Website verbessern können.

Schritt 4: Konfigurieren erweiterter Einstellungen

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 Anfrage schneller zu finden. SearchWP bietet für diesen Zweck ein kostenloses Live Ajax Lite Search Plugin im WordPress-Repository an.
• Verwenden erweiterter Einstellungen für SearchWP: Unter dem Tab Einstellungen » SearchWP in Ihrem WordPress-Menü gibt es einen Tab „Erweitert“. Auf dieser Seite können Sie Einstellungen aktivieren, die es Ihren Benutzern erleichtern, das zu finden, wonach sie suchen.

Dies gibt Ihnen die volle Kontrolle darüber, wie Ihre Suchmaschine funktioniert. Als Nächstes zeigen wir Ihnen, wie Sie das Aussehen Ihrer Suchmaschine anpassen.

Schritt 5: Styling des Suchformulars und der Ergebnisseite

Wenn Sie mit dem Aussehen Ihrer neuen Suchleiste nicht zufrieden sind, können Sie das ändern.

Sie müssen wissen, dass das Theme Ihrer Website das Erscheinungsbild Ihrer Homepage, Kopfzeile, Seitenleiste, Beiträge, Suchformular und Suchergebnisse steuert. Die Formate und Stile Ihres WordPress-Themes werden in einer CSS-Stylesheet gespeichert.

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

Wenn Sie dies noch nie zuvor getan haben, empfehlen wir eine Sicherung Ihrer Website zu erstellen. Es ist wichtig, Ihre Website wiederherstellen zu können, falls die Dinge nicht wie geplant laufen. Sie können dann eine Staging-Site (eine Kopie Ihrer Website) verwenden, um dies zuerst auszuprobieren.

Unten finden Sie einen benutzerdefinierten CSS-Snippet, der mit den meisten WordPress-Themes funktioniert. Der erste Abschnitt ändert den Stil des Standard-Suchformulars und der zweite Abschnitt passt die Suchergebnisse an.

Sie können den folgenden Code kopieren und einfügen, um die Suchfunktion Ihrer Website 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-Website einfach benutzerdefiniertes CSS hinzu.

Das ist alles! Sie haben ein vollständig anpassbares Suchformular mit SearchWP 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-Formular-Plugin, das über eine vollständig integrierte Ansichten-Funktion verfügt. So können Sie nicht nur Formulardaten sammeln, sondern diese auch auf der Frontend-Seite Ihrer Website anzeigen.

Mit Views können Sie ganz einfach eine Webseite erstellen, um die von Benutzern eingereichten Daten direkt aus Ihrem WordPress-Dashboard schön anzuzeigen. Sie können dies verwenden, um Branchenverzeichnisse, Mitgliederverzeichnisse, Angebote 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.

Um zu sehen, ob es die richtige Wahl für Sie ist, können Sie diesen Beitrag lesen, um Formidable Forms mit WPForms zu vergleichen.

Lassen Sie uns nun mit dem Tutorial beginnen. 

Schritt 1: Installieren und Aktivieren des Formidable Forms Plugins

Zuerst müssen Sie sich für ein Formidable Forms Konto registrieren. Stellen Sie sicher, dass Sie den Plan wählen, der die Views-Funktion beinhaltet. 

Nach der Registrierung gehen Sie zu Ihrem WordPress-Admin-Dashboard und öffnen Sie den Tab Plugins » Neues Plugin hinzufügen. Suchen Sie nach dem Formidable Forms Plugin und klicken Sie dort auf den Installieren-Button.

Wenn Sie hierbei weitere Hilfe benötigen, können Sie unseren Leitfaden zum Installieren eines WordPress-Plugins durchgehen. 

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

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

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

Sie können sie direkt über den Formidable-Tab in Ihrem WordPress-Dashboard installieren oder die Plugin-Datei aus Ihrem Konto herunterladen. 

Nun sind Sie bereit, ein benutzerdefiniertes Suchformular in WordPress mit Formidable Forms zu erstellen. 

Schritt 2: Hinzufügen von Daten für Ihr Suchformular

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 den Button + Neu hinzufügen. 

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

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

Sobald Sie Ihrem Formular einen Namen gegeben haben, klicken Sie dort auf den Erstellen-Button, 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 Formularfelder einzufügen, können Sie sie einfach aus dem Feldermenü in die Formularvorschau ziehen und ablegen. 

Hier fügen wir die folgenden Felder hinzu: Vorname, Nachname, E-Mail und Land. Sie können je nach Ihren Anforderungen beliebige Felder hinzufügen.

Um ein Feld anzupassen, klicken Sie einfach darauf und Sie sehen die Formulareinstellungen. Es gibt viele Optionen wie Bezeichnung, Pflichtfeld, benutzerdefiniertes CSS und mehr. 

Sie können sogar die bedingte Logikoption verwenden, um Formularfelder basierend auf Benutzereingaben ein- oder auszublenden.

Wenn Sie mit dem Hinzufügen von Feldern fertig sind, klicken Sie oben rechts im Formular-Builder auf die Schaltfläche Aktualisieren. 

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

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

Anschließend sehen Sie ein Fenster, in dem Sie jede 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 wie in Schritt 2 befolgen. 

Gehen Sie zu Formidable » Formulare » Neu hinzufügen und wählen Sie eine leere Vorlage. 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 des Feldes Vorname müssen Sie den Standardwert hinzufügen, um Ihr Suchformular später mit einer Ergebnisansicht zu verbinden. 

Fügen Sie dazu diesen Shortcode in die Option Standardwert in den Feldeinstellungen ein:

[get param=fname] 

Hier ist „fname“ der Text, den wir für das Feld Vorname verwenden, um die Verbindung zur Ansicht herzustellen. 

In den Einstellungen des Feldes Nachname fügen wir den gleichen Shortcode hinzu:

[get param=lname] 

Hier ist „lname“ der Text, den wir für das Feld Nachname verwenden, um die Verbindung zur Ansicht herzustellen. 

In den Einstellungen des Feldes Land 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 von Platzhaltertext. Und wie bei den beiden anderen Formularfeldern müssen Sie hier einen Standardwert hinzufügen. Fügen Sie den Shortcode ein:

[get param=country] 

Hier ist „country“ der Text, den wir für das Feld Land verwenden, um die Verbindung zur Ansicht herzustellen. 

Sobald Sie mit dem Hinzufügen der Eingabetypen fertig sind, können Sie das Layout der Formularfelder ändern. 

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

Wenn Sie die Schaltfläche anpassen möchten, navigieren Sie zum Tab Einstellungen » Styling & Schaltflächen und gehen Sie zu den Schaltflächeneinstellungen. 

Hier können Sie den Text der Sende-Schaltfläche in Suchen ändern und die Schaltflächenausrichtung auf Inline setzen. Dadurch wird Ihre Suchschaltfläche in derselben Zeile wie Ihre Formularfelder angezeigt. 

Nachdem Sie nun gelernt haben, wie man ein benutzerdefiniertes Suchformular in WordPress erstellt, 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 sehen Sie das Popup, mit 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 Suchformularergebnisse.

Danach sehen Sie die Optionen zur Auswahl eines Formulars für Einträge und zum Hinzufügen des Namens für Ihre Ergebnisansicht. 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 Ansichtseditor sehen Sie die Styling-Optionen auf der linken Seite und den Ansichtslayout-Editor auf der rechten Seite. Klicken Sie auf den Link Inhalt hinzufügen, um Ihre Einträge hinzuzufügen. 

Klicken Sie auf das Symbol „+“, um mit dem Hinzufügen Ihrer Liste zu den Ansichten zu beginnen. Dies öffnet den Editor für Listeninhalte.

Im Editor für Seiteninhalte können Sie die Formularfelder über die Option Anpassung auf der rechten Seite der Seite hinzufügen. Klicken Sie einfach auf die Formularfelder dort, um sie in Ihre Ergebnisansicht einzufügen. 

Dann können Sie die Feldschlüssel gestalten, um die Formularfelder im gewünschten Layout anzuzeigen.

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.

Dies öffnet den Inhaltseditor, in den 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 zur Ansicht hinzuzufügen.

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

Schritt 5: Suchergebnisansicht veröffentlichen

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

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

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

Schritt 6: Benutzerdefiniertes Suchformular mit der Ansicht verbinden

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

Hier können Sie zur Option Beim Absenden gehen und die Option An URL weiterleiten auswählen. Dann müssen Sie den Link zur 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 Feldtexte und Schlüssel einfügen, damit die Weiterleitungs-URL wie folgt aussieht:

http://yoursitename/user-directory/?fname[21]&lname=[19]&country=[22]

Denken Sie daran, die Option Keine Einträge speichern, die von diesem Formular übermittelt wurden für dieses Formular zu aktivieren. 

Nun müssen Sie Ihren Ergebnisansichten Filter hinzufügen, damit Benutzer die Liste anhand der von Ihnen hinzugefügten Formularfelder durchsuchen können. 

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

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

Als Letztes müssen Sie den Shortcode Ihres Suchformulars in die Option Keine Einträge Nachricht im linken Menü einfügen. Dadurch können Benutzer nach jedem Suchvorgang nach weiteren Inhalten suchen. 

Vergessen Sie nicht, die Ansicht zu aktualisieren, nachdem Sie die Einstellungen vorgenommen haben. 

Testen Sie Ihr benutzerdefiniertes Suchformular 

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

Damit kennen Sie 3 Möglichkeiten, ein Suchformular zu Ihrer Website hinzuzufügen. Während die Standard-WordPress-Suchoption kostenlos ist, empfehlen wir sie nicht, wenn Sie sich nicht mit Code auskennen. Das SearchWP-Plugin ist mit Abstand unsere bevorzugte Methode. Es ist einfach zu bedienen und fügt Ihrer Website eine weitaus erweiterte Suchfunktion hinzu.

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

Als nächste Schritte können Sie diese Ressourcen prüfen:

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

Diese Beiträge helfen Ihnen, mit Hilfe der besten WordPress-Formular-Builder weitere Funktionalitäten zu Ihrer WordPress-Website hinzuzufügen.