So erstellen Sie ein ACF-Frontend-Formular [Kein Code!]

Veröffentlicht: 2022-12-14

Sie möchten erweiterte benutzerdefinierte Formulare auf Ihrer WordPress-Site verwenden, wissen aber nicht, wie man codiert? Diese Anleitung hilft Ihnen, im Handumdrehen ein ACF-Frontend-Formular zu erstellen!

So erstellen Sie ein ACF-Frontend-Formular

Ungefähre Lesezeit: 6 Minuten

Advanced Custom Fields (ACF) ist ein leistungsstarkes Tool.

Mit der Möglichkeit, Ihre Felder anzupassen und Ihre Formulare genau nach Ihren Wünschen zu erstellen, sind Ihre Möglichkeiten nahezu unbegrenzt.

Aber es gibt ein Problem. Sie müssen wissen, wie man codiert, um Ihre ACF-Formulare auf dem Frontend Ihrer Website anzuzeigen.

Formidable Forms ist das beste WordPress Form Builder-Plugin. Erhalte es kostenlos!

Oder tust du?

Dieser Beitrag zeigt Ihnen, wie Sie mühelos ein ACF-Frontend-Formular in WordPress ohne Code erstellen! Und das alles mit Formidable Forms , dem perfekten ACF-Formularersteller.

Lassen Sie uns darauf eingehen.

Was ist falsch an der Verwendung des Frontend-Formulars für erweiterte benutzerdefinierte Felder?

Eigentlich ist nichts falsch daran, ACF zu verwenden , um Ihr Frontend-Formular für erweiterte benutzerdefinierte Felder zu erstellen!

ACF ist ein mächtiges Werkzeug; Wenn Sie wissen, wie man in PHP programmiert, können Sie schnell einzigartige Formulare erstellen.

Aber wenn Sie nicht wissen, wie man codiert, kratzen Sie sich am Kopf über die Fremdsprache vor Ihnen.

Schauen Sie sich einfach diesen ACF-Formular-Beispielcode unten an:

Die Front-End-Formulare von ACF erfordern Programmierkenntnisse

Sie haben also zwei Möglichkeiten:

  1. Lernen Sie, Ihre Frontend-Formulare mit ACF zu programmieren und zu erstellen
  2. Lassen Sie Formidable Forms die ganze harte Arbeit für Sie erledigen

Obwohl wir hier bei Formidable ein Team von hervorragenden Entwicklern haben, können wir uns vorstellen, dass Sie dies nicht tun.

Daher konzentrieren wir uns heute auf Option Nr. 2 für unser Frontend-Formular-Tutorial zu erweiterten benutzerdefinierten Feldern.

So zeigen Sie das ACF-Frontend-Formular mit Formidable an

Abonnieren Sie auf YouTube

Um loszulegen, benötigen Sie ein paar Dinge:

  1. Formidable Forms-Geschäftsplan
  2. ACF-Plugin (kostenlos oder Pro)

Holen Sie sich jetzt Formidable Forms!

Um einige der erweiterten Felder mit dem ACF-Frontend zu verwenden, ist die Pro-Version erforderlich. Für grundlegende Felder können Sie jedoch die kostenlose Version verwenden.

Wenn Sie weitere Informationen wünschen, lesen Sie unbedingt unsere ACF Knowledgebase-Dokumente!

Sobald Sie also Formidable Forms installiert und aktiviert haben, gehen Sie zu Formidable → Add-ons und klicken Sie auf die Schaltfläche Installieren für das ACF Form WordPress-Plugin .

Dann sind es nur ein paar einfache Schritte:

  1. Erstellen Sie ACF-Formularfelder
  2. Erstellen Sie Ihr ACF-Frontend-Formular in Formidable
  3. Ordnen Sie Ihre Felder zu

    Lass uns anfangen.

    Formidable Forms Pro-Pläne

    Schritt 1: Erstellen Sie ACF-Formularfelder

    In unserem Beispiel haben wir einen Blog zur Vogelbeobachtung mit dem Namen Here Birdie Birdie .

    Hier Birdie Birdie Beispiel-Website

    Wir wollen eine Möglichkeit für Benutzer, ihre Beiträge zur Vogelbeobachtung automatisch als benutzerdefinierten Beitragstyp im Blog anzuzeigen.

    Daher möchten wir einige Felder erstellen, in die Benutzer Informationen eingeben können:

    1. Name
    2. Datum
    3. Zeit
    4. Liste der beobachteten Vögel
    5. Zusätzliche Kommentare

    Das erste, was wir tun möchten, ist, in ACF zu gehen, um die Felder anzupassen. Glücklicherweise unterstützt Formidable die Zuordnung für 19 verschiedene ACF-Feldtypen. Sie haben also viele Möglichkeiten.

    Gehen Sie dazu zu Benutzerdefinierte Felder → Feldgruppen und klicken Sie auf Neu hinzufügen .

    Klicken Sie auf die Schaltfläche Neu hinzufügen, um Ihre ACF-Felder zu erstellen

    Als Nächstes können Sie Ihre Felder hinzufügen, indem Sie auf die Schaltfläche Feld hinzufügen klicken.

    Also erstellen wir die oben aufgeführten Felder und passen sie an unsere Bedürfnisse an.

    ACF-Beispielfelder

    Wir werden ein ACF- Repeater- Feld verwenden, um es den Besuchern zu erleichtern, alle Vögel zu zeigen, die sie gesehen haben. Das Repeater-Feld ermöglicht es Benutzern, beliebig viele Einträge hinzuzufügen oder zu entfernen.

    Wir verwenden in diesen Feldern ein Dropdown- Feld ( Select in ACF), damit der Besucher aus einer Liste von Vögeln auswählen kann. Wir werden auch ein Zahlenfeld hinzufügen, um einzugeben, wie lange sie jeden Vogel gesehen haben.

    Beispiele für das ACF-Auswahlmenü

    Fühlen Sie sich frei, dies an Ihre eigenen Bedürfnisse anzupassen. Um jedoch erweiterte Funktionen (wie die Repeater) zu erhalten, müssen Sie ACF Pro erwerben.

    Wenn Sie fertig sind, klicken Sie auf Änderungen speichern .

    Schritt 2: Erstellen Sie Ihr ACF-Frontend-Formular in Formidable

    Jetzt erstellen wir das Formular, das im Frontend Ihrer Website angezeigt wird.

    Gehen Sie also zu Formidable → Forms in Ihrem WordPress-Admin-Panel.

    Klicken Sie als Nächstes oben auf der Seite auf Neu hinzufügen und wählen Sie dann aus, ob Sie mit einem leeren Formular oder einer der Vorlagen von Formidable beginnen möchten.

    Klicken Sie auf Neu hinzufügen, um ein neues Formular zu erstellen

    Fühlen Sie sich frei, die Option auszuwählen, die für Ihre Situation am besten geeignet ist. Wir beginnen mit einem leeren Formular , um es nach unseren Wünschen anzupassen.

    Geben Sie als Nächstes Ihrem Formular einen Namen und klicken Sie dann auf Erstellen .

    Das Plugin führt Sie zum Drag-and-Drop-Formular-Builder von Formidable, wo Sie beliebige Formularelemente hinzufügen können. Name, E-Mail, Nummer, Adresse – Sie nennen es, es ist hier.

    Formidables Drag-and-Drop-Formularersteller

    Da wir unsere Formularfelder bereits in ACF erstellt haben, müssen wir nur passende Felder hinzufügen, um sie einfach zu verbinden.

    Beispielformular für die Vogelbeobachtung

    Wir haben oben ein Feld hinzugefügt, damit Benutzer ihre Blog-Posts benennen können, um sie einzigartig zu machen!

    Wenn Sie mit der Erstellung Ihres Formulars fertig sind, klicken Sie auf Aktualisieren , um Ihre Änderungen zu speichern.

    Nichts erinnert Sie mehr an die 90er, als alles zu verlieren, was Sie erstellt haben, weil Sie nicht gespeichert haben.

    Schritt 3: Ordnen Sie Ihre Felder zu

    Nachdem wir unser Formular erstellt haben, müssen wir die ACF-Feldzuordnung aktivieren.

    Klicken Sie also oben auf der Seite auf die Registerkarte Einstellungen und gehen Sie zu Aktionen & Benachrichtigungen .

    Wählen Sie als Nächstes die Aktion Beitrag erstellen aus , um die Anzeige der Formularfelder anzupassen.

    Klicken Sie auf die Aktion Beitragsformular erstellen

    Scrollen Sie in der Aktion Beitragsformular erstellen nach unten zum Abschnitt Benutzerdefinierte Felder und klicken Sie auf den Schalter Formularfelder zu erweiterten benutzerdefinierten Feldern zuordnen.

    Schalten Sie die ACF-Formularfunktionalität ein

    Wählen Sie Ihre ACF-Feldgruppe aus der Dropdown-Liste aus und beginnen Sie mit der Zuordnung Ihrer benutzerdefinierten Felder zu den Formidable-Feldern, indem Sie auf Hinzufügen klicken.

    Ordnen Sie Ihre ACF-Felder Ihren Formidable-Feldern zu

    Wenn Sie ein Repeater-Feld verwenden, müssen Sie außerdem die Repeater und die Unterfelder korrekt zuordnen.

    Nachdem Sie Ihre Felder zugeordnet haben, klicken Sie auf Aktualisieren , um Ihre Änderungen zu speichern.

    Und das ist es! Benutzer können jetzt ihre Eingaben an Ihr WordPress-ACF-Frontend-Formular senden, und Ihre ACF- und Formidable Forms-Felder werden die Informationen zuordnen und senden.

    Von hier aus können Sie die Informationen im Frontend mit einer Ansicht anzeigen oder ein Design verwenden, das ACF unterstützt, und dann den Beitrag, den Beitragstitel, den Inhalt und mehr bearbeiten!

    Was kann dieses ACF-Frontend-Formular-Plugin noch?

    Formidable Forms-Banner

    Formidable mag wie ein einfacher Formularersteller für ACF erscheinen, aber es ist viel mehr als das.

    Mit Dutzenden von ACF-Formularfunktionen, Vorlagendateien und Kompatibilität mit allen Top-Designs (einschließlich Elementor) bietet Formidable alles.

    Und es hat viele zusätzliche Funktionen und Optionen, um Ihr Formular aufzuladen:

    • Mehrstufige Formulare, Quiz und Konversationsformulare
    • Mehrere Spam-Schutzoptionen
    • Eingebauter visueller Formular-Styler
    • Über 100 Formularvorlagen
    • Beeindruckende Ansichten

    Dies sind nur einige der Funktionen, die Sie erhalten. Und sie sind ziemlich großartig, wenn wir das selbst sagen.

    Worauf warten Sie also, wie einfach es ist, ein ACF-Formular in das Frontend zu stellen, und wie viele Funktionen Sie erhalten?

    Formidable ist bereit, Ihre Website noch heute zu verbessern .

    Sind Sie bereit, Ihre ACF-Frontform zu erstellen?

    Wenn Sie sich gefragt haben: „Wie füge ich ein ACF-Feld zum Frontend hinzu?“ Sie haben jetzt Ihre Antwort.

    Mit der einfachen No-Code-Lösung von Formidable können Sie innerhalb von Minuten loslegen. Und dieser Beitrag hat dir genau gezeigt, wie es geht.

    Egal, ob Sie WordPress ACF Pro oder die kostenlose Version verwenden, Formidable ist das perfekte Partner-Plugin.

    Also, wenn Sie bereit sind, loszulegen, holen Sie sich jetzt Formidable Forms und bringen Sie es auf Ihre Website.

    Holen Sie sich jetzt ACF-Frontend-Formulare!

    Und folgen Sie uns auf Facebook, Twitter und YouTube für weitere unglaubliche WordPress-Tipps und Tricks.

    Lesen Sie mehr über WordPress-Formulare!