Jak utworzyć formularz front-end ACF [bez kodu!]

Opublikowany: 2022-12-14

Chcesz używać zaawansowanych formularzy niestandardowych w swojej witrynie WordPress, ale nie wiesz, jak kodować? Ten przewodnik pomoże Ci błyskawicznie stworzyć formularz frontendowy ACF!

Przybliżony czas czytania: 6 minut

Advanced Custom Fields (ACF) to potężne narzędzie.

Dzięki możliwości dostosowywania pól i budowania formularzy dokładnie tak, jak chcesz, Twoje możliwości są prawie nieograniczone.

Ale jest jeden problem. Musisz wiedzieć, jak kodować, aby uzyskać formularze ACF na froncie swojej witryny.

Formidable Forms to najlepsza wtyczka WordPress Form Builder. Zdobądź to za darmo!

Czy ty?

Ten post pokaże Ci, jak bez wysiłku utworzyć formularz frontendowy ACF w WordPressie bez kodu! A wszystko to odbywa się za pomocą Formidable Forms , doskonałego narzędzia do tworzenia formularzy ACF.

Wejdźmy w to.

Co jest złego w korzystaniu z frontowego formularza Zaawansowanych pól niestandardowych?

Właściwie nie ma nic złego w używaniu ACF do tworzenia formularza frontendowego Advanced Custom Fields!

ACF to potężne narzędzie; jeśli wiesz, jak kodować w PHP, możesz szybko tworzyć unikalne formularze.

Ale jeśli nie wiesz, jak kodować, drapiesz się po głowie w języku obcym, który masz przed sobą.

Po prostu sprawdź ten przykładowy kod formularza ACF poniżej:

Formularze front-end ACF wymagają znajomości kodowania

Masz więc dwie opcje:

Naucz się kodować i tworzyć formularze frontendowe z ACF
Pozwól Formidable Forms wykonać całą ciężką pracę za Ciebie

Chociaż w Formidable mamy zespół doskonałych programistów, wyobrażamy sobie, że ty nie.

Dlatego dzisiaj skupimy się na opcji nr 2 w naszym samouczku dotyczącym formularza frontendowego zaawansowanych pól niestandardowych.

Jak wyświetlić formularz interfejsu ACF za pomocą Formidable

Aby rozpocząć, potrzebujesz kilku rzeczy:

Formidable Forms Biznesplan
Wtyczka ACF (darmowa lub profesjonalna)

Zdobądź Formidable Forms już teraz!

Aby korzystać z niektórych bardziej zaawansowanych pól z interfejsem ACF, wymagana jest wersja pro. Jednak w przypadku pól podstawowych możesz skorzystać z darmowej wersji.

Jeśli chcesz uzyskać więcej informacji, zapoznaj się z dokumentacją bazy wiedzy ACF!

Tak więc, gdy już zainstalujesz i aktywujesz Formidable Forms, przejdź do Formidable → Dodatki i kliknij przycisk Instaluj dla wtyczki ACF Form WordPress .

To tylko kilka prostych kroków:

Utwórz pola formularza ACF
Utwórz formularz interfejsu ACF w Formidable
Mapuj swoje pola

Zacznijmy.

Krok 1: Utwórz pola formularza ACF

Na przykład mamy blog o obserwacji ptaków o nazwie Here Birdie Birdie .

Chcemy, aby użytkownicy mogli przesyłać zgłoszenia dotyczące obserwacji ptaków, które będą automatycznie wyświetlane jako niestandardowy typ postu na blogu.

Chcemy więc utworzyć kilka pól, w których użytkownicy będą mogli wprowadzać informacje:

Nazwa
Data
Czas
Lista obserwowanych ptaków
Dodatkowe komentarze

Tak więc pierwszą rzeczą, którą chcemy zrobić, to udać się do ACF, aby dostosować pola. Na szczęście Formidable obsługuje mapowanie dla 19 różnych typów pól ACF. Masz więc wiele opcji.

W tym celu przejdź do Pola niestandardowe → Grupy pól i kliknij Dodaj nowe .

Kliknij przycisk Dodaj nowy, aby utworzyć pola ACF

Następnie możesz dodać swoje pola, klikając przycisk Dodaj pole .

Utworzymy więc wymienione powyżej pola i dostosujemy je do naszych potrzeb.

Użyjemy pola ACF Repeater , aby ułatwić odwiedzającym pokazanie wszystkich ptaków, które widzieli. Pole repeatera umożliwia użytkownikom dodawanie lub usuwanie dowolnej liczby wpisów.

W tych polach użyjemy pola rozwijanego ( Wybierz w ACF), aby odwiedzający mógł wybierać z listy ptaków. Dodamy również pole liczbowe, aby wpisać, jak długo widzieli każdego ptaka.

Możesz dostosować to do własnych potrzeb. Ale aby uzyskać bardziej zaawansowane funkcje (takie jak wzmacniacze , musisz kupić ACF Pro).

Po zakończeniu kliknij Zapisz zmiany .

Krok 2: Utwórz formularz interfejsu ACF w Formidable

Teraz utworzymy formularz, który będzie wyświetlany na froncie Twojej witryny.

Przejdź więc do Formidable → Forms w panelu administracyjnym WordPress.

Następnie kliknij Dodaj nowy u góry strony, a następnie wybierz rozpoczęcie od pustego formularza lub jednego z szablonów Formidable.

Kliknij dodaj nowy, aby utworzyć nowy formularz

Możesz wybrać opcję, która najlepiej pasuje do Twojej sytuacji. Zaczniemy od pustego formularza , aby dostosować go do własnych upodobań.

Następnie nadaj formularzowi nazwę, a następnie kliknij Utwórz .

Wtyczka przeniesie Cię do kreatora formularzy Formidable typu „przeciągnij i upuść”, w którym możesz dodać dowolne elementy formularza. Imię i nazwisko, adres e-mail, numer, adres — nazwij to, jest tutaj.

Kreator formularzy typu „przeciągnij i upuść” firmy Formidable

Ponieważ stworzyliśmy już nasze pola formularza w ACF, musimy tylko dodać pasujące pola, aby ułatwić ich łączenie.

Dodaliśmy pole u góry, aby użytkownicy mogli nazwać swoje posty na blogu, aby były wyjątkowe!

Po zakończeniu tworzenia formularza kliknij Aktualizuj , aby zapisać zmiany.

Nic bardziej nie przypomina lat 90. niż utrata wszystkiego, co stworzyłeś, ponieważ nie oszczędzałeś.

Krok 3: Zmapuj swoje pola

Teraz, gdy utworzyliśmy nasz formularz, musimy włączyć mapowanie pól ACF.

Kliknij kartę Ustawienia u góry strony i przejdź do sekcji Czynności i powiadomienia .

Następnie wybierz czynność Utwórz wpis , aby dostosować sposób wyświetlania pól formularza.

W akcji Utwórz formularz postu przewiń w dół do sekcji Pola niestandardowe i kliknij przełącznik Mapuj pola formularza do zaawansowanych pól niestandardowych .

Wybierz grupę pól ACF z listy rozwijanej i rozpocznij mapowanie własnych pól z polami Formidable, klikając Dodaj .

Ponadto, jeśli używasz pola przemiennika, będziesz musiał poprawnie dopasować przemienniki i pola podrzędne.

Po zmapowaniu pól kliknij Aktualizuj , aby zapisać zmiany.

I to wszystko! Użytkownicy mogą teraz przesyłać swoje wpisy do formularza frontendowego WordPress ACF, a pola ACF i Formidable Forms będą mapować i wysyłać informacje.

Stąd możesz wyświetlić informacje na interfejsie za pomocą widoku lub użyć motywu obsługującego ACF, a następnie edytować post, tytuł postu, treść i wiele więcej!

Co jeszcze może zrobić ta wtyczka formularza frontendowego ACF?

Formidable może wydawać się prostym narzędziem do tworzenia formularzy dla ACF, ale to znacznie więcej.

Dzięki dziesiątkom funkcji formularzy ACF, plikom szablonów i kompatybilności ze wszystkimi najpopularniejszymi motywami (w tym z Elementorem), Formidable robi to wszystko.

Ma też wiele dodatkowych funkcji i opcji, które ulepszą Twój formularz:

Formularze wieloetapowe, quizy i formularze konwersacyjne
Wiele opcji ochrony przed spamem
Wbudowany styler formularzy wizualnych
Ponad 100 szablonów formularzy
Potężne widoki

To tylko niektóre z funkcji, które otrzymujesz. I są całkiem świetne, jeśli sami tak mówimy.

Tak więc, biorąc pod uwagę to, jak łatwo jest umieścić formularz ACF na interfejsie użytkownika i bogactwo dostępnych funkcji, na co czekasz?

Firma Formidable jest gotowa już dziś podnieść poziom Twojej witryny .

Gotowy do wykonania przedniej formy ACF?

Jeśli zastanawiasz się: „Jak dodać pole ACF do frontendu?” Masz teraz swoją odpowiedź.

Dzięki prostemu rozwiązaniu Formidable bez kodu możesz rozpocząć pracę w ciągu kilku minut. A ten post pokazał ci dokładnie, jak to zrobić.

Niezależnie od tego, czy używasz WordPress ACF pro, czy darmowej wersji, Formidable jest idealną wtyczką partnerską.

Tak więc, jeśli jesteś gotowy, aby zacząć, pobierz teraz Formidable Forms i umieść je na swojej stronie internetowej.

Zdobądź formularze front-end ACF już teraz!

Śledź nas na Facebooku, Twitterze i YouTube, aby uzyskać więcej niesamowitych porad i wskazówek dotyczących WordPress.