Jak utworzyć formularz zamówienia online w WordPress (krok po kroku)

Kilku naszych czytelników pytało, jak utworzyć formularz zamówienia online, aby klienci mogli łatwo składać zamówienia na stronie internetowej.

Jeśli prowadzisz firmę, taką jak restauracja lub sklep stacjonarny, możesz nie chcieć tworzyć całego sklepu internetowego. Możesz jednak chcieć zaoferować klientom łatwy sposób zamawiania jedzenia lub innych towarów do dostarczenia.

W tym poście pokażemy, jak utworzyć formularz zamówienia online w WordPress. Umożliwi to łatwe zbieranie zamówień klientów bez dodawania pełnoprawnego oprogramowania eCommerce do Twojej witryny.

Creating an online order form in WordPress

Samouczek wideo

Zasubskrybuj WPBeginner

Jeśli wolisz instrukcje pisemne, po prostu czytaj dalej.

Tworzenie formularza zamówienia online w WordPress

Być może ostatnio zdecydowałeś założyć stronę internetową swojej firmy i czujesz się trochę przytłoczony.

Wiele firm otwiera sklep internetowy, aby nie tylko zbierać zamówienia, ale także przyjmować płatności i zarządzać zapasami. Jednak nie wszystkie firmy potrzebują kompletnej witryny eCommerce .

Jeśli chcesz, aby klienci mogli tylko wypełniać formularz zamówienia online, możesz to łatwo utworzyć bez rozwiązania koszyka na zakupy.

Prosty formularz zamówienia online umożliwia akceptowanie płatności online, przy odbiorze zamówienia lub przy odbiorze.

W tym samouczku będziemy używać WPForms do tworzenia internetowego formularza zamówienia, ponieważ pozwala to łatwo zrobić za pomocą interfejsu „przeciągnij i upuść”.

WPForms to najlepsza wtyczka do tworzenia formularzy WordPress na rynku. Ponad 3 miliony witryn internetowych korzysta z WPForms, aby łatwo tworzyć wszelkiego rodzaju formularze online i dodawać je do swojej witryny (bez umiejętności kodowania).

Najpierw musisz zainstalować i aktywować wtyczkę WPForms . Potrzebujesz pomocy w instalacji wtyczki? Zobacz nasz przewodnik po tym, jak zainstalować wtyczkę WordPress , aby uzyskać szczegółowe instrukcje.

Wtyczki są jak aplikacje do Twojej witryny WordPress. Jeśli jesteś nowy w WordPressie, zapoznaj się z naszym artykułem czym są wtyczki WordPress i co możesz z nimi zrobić.

Po aktywowaniu wtyczki WPForms na panelu bocznym administratora w panelu WordPress pojawi się nowa karta WPForms.

Musisz odwiedzić stronę WPForms »Settings , aby wprowadzić swój klucz licencyjny. Możesz znaleźć te informacje na swoim koncie w witrynie WPForms.

Enter your license key for WPForms

Teraz możesz utworzyć formularz zamówienia online.

Po prostu przejdź na stronę WPForms »Dodaj nową stronę, aby utworzyć swój pierwszy formularz.

Creating a new form using WPForms

Teraz zobaczysz ekran tworzenia formularza. Wpisz nazwę swojego formularza i wybierz szablon. Zalecamy szablon „Formularz rozliczeniowy / zamówienia”.

Select the 'Billing / Order Form' template to get started

Po prostu przesuń kursor na opis szablonu i kliknij przycisk „Utwórz fakturę / formularz zamówienia”.

Click on the 'Create a Billing / Order Form' button to create your form

Twój formularz zostanie automatycznie utworzony i zostaniesz przeniesiony bezpośrednio do edytora formularzy WPForms.

Your newly created online order form

Możesz teraz edytować swój formularz zamówienia online w dowolny sposób. Poszczególne części formularza nazywane są „polami”. Możesz zmieniać, dodawać lub usuwać pola w formularzu za pomocą jednego kliknięcia.

Domyślny szablon zawiera już pola na większość potrzebnych informacji, takich jak imię i nazwisko, adres i numer telefonu. Musisz jednak podać swoje rzeczywiste produkty.

Kliknij pole „Dostępne pozycje”, aby je edytować.

Editing the 'Available Items' field of your online order form

Wpisz nazwę i cenę każdego produktu, który klienci mogą u Ciebie zamówić. Cena nie pojawi się automatycznie w formularzu, więc możesz dodać ją do nazwy przedmiotu.

Editing the 'Available Items' field to change the names of the items

Aby dodać więcej opcji, po prostu kliknij ikonę (+) w dowolnym miejscu, w którym chcesz dodać dodatkowe elementy.

Adding more items to your online order form

Uwaga: Możesz dodać dowolną liczbę elementów. Jednak klienci będą mogli wybrać tylko jedną opcję z tego pola.

Jeśli masz kilka kategorii opcji, możesz skopiować pole, aby utworzyć grupy.

Możesz skopiować pole „Dostępne pozycje”, klikając ikonę „Kopiuj”, która pojawia się po najechaniu na nie kursorem lub po zaznaczeniu.

Copy the 'Available Items' field to create a new field on your order form

Upewnij się, że zmienisz „Etykietę” pól na coś odpowiedniego dla każdej grupy.

Jeśli chcesz, aby klienci mogli wybrać co najmniej dwie opcje w jednym polu, musisz użyć innego typu pola.

Kliknij kartę „Dodaj pola”, a następnie przewiń w dół do „Pola płatności”, gdzie znajdziesz pole „Elementy pola wyboru”. Przeciągnij i upuść to w odpowiednim miejscu w formularzu.

Adding a checkbox field so customers can select multiple items at once

Możesz teraz edytować to pole tak jak poprzednio, wprowadzając nazwy i ceny swoich przedmiotów. Klienci mogą sprawdzić tyle pozycji, ile chcą zamówić.

Jeśli chcesz wyświetlać zdjęcia swoich produktów, to też jest naprawdę łatwe. Po prostu kliknij pole „Użyj opcji obrazu”:

Adding images of your products to your online order form

Dla każdego elementu kliknij przycisk „Prześlij obraz”, aby dodać obrazy z komputera lub z WordPress Biblioteki multimediów .

Uploading an image for a product that you offer

Twoje obrazy nie będą zmieniane ani kompresowane przez WPForms, więc ważne jest, aby przesłać je w odpowiednim rozmiarze. Wszystkie powinny mieć ten sam rozmiar i nie więcej niż 250 × 250 pikseli.

Najlepiej byłoby również zoptymalizować swoje obrazy na potrzeby Internetu .

Wreszcie, możesz chcieć edytować pole „Komentarz lub wiadomość” u dołu formularza, aby nie było to wymagane. Nie wszyscy użytkownicy będą chcieli dodać wiadomość.

Po prostu kliknij pole, a następnie odznacz pole „Wymagane” po prawej stronie, aby uczynić to pole opcjonalnym.

Making the 'Comment / Message' field optional rather than required

Możesz wykonać ten proces dla dowolnego pola, które chcesz, aby było opcjonalne. Możesz określić, które pola są wymagane, ponieważ obok etykiety pola będą oznaczone czerwoną gwiazdką.

Gdy będziesz zadowolony z projektu formularza, możesz przejść do konfigurowania jego ustawień. Dobrze jest najpierw zapisać formularz, klikając przycisk „Zapisz” u góry ekranu:

The WPForms 'Save' button appears is on the top right of your screen

Konfigurowanie powiadomień, które wyśle ​​formularz zamówienia

Najpierw kliknij kartę „Ustawienia” po lewej stronie ekranu. Spowoduje to otwarcie ustawień formularza.

The 'Settings' tab in WPForms

Następnie kliknij kartę „Powiadomienia”, aby zmienić powiadomienia e-mail w formularzu. Wypełnione formularze zamówień zostaną domyślnie wysłane na adres administratora witryny WordPress.

Możesz to zmienić lub skopiować formularze zamówienia na więcej niż jeden adres. Możesz po prostu wpisać adres e-mail lub adresy w polu „Wyślij na adres e-mail”. Jeśli podajesz więcej niż jeden adres e-mail, oddziel je przecinkami.

Enter the email addresses you want the form to be sent to, separated with commas

Możesz także zmienić temat, aby nie był taki sam dla każdego zamówienia. Może to ułatwić śledzenie zamówień w zatłoczonej skrzynce odbiorczej poczty e-mail.

Tutaj zmieniliśmy temat e-maili na „Zamówienie klienta od”, a następnie nazwę klienta. Użyliśmy opcji „Pokaż tagi inteligentne”, aby wstawić pole nazwy w temacie.

Changing the subject line on the notification email to add the customer's name

Możesz też zmienić dowolne inne szczegóły.

Zdecydowanie zalecamy również skonfigurowanie powiadomień e-mail dla klientów. Przypomina im to, co zamówili, i informuje, że otrzymałeś ich zamówienie.

Aby ustawić nowe powiadomienie e-mail, kliknij przycisk „Dodaj nowe powiadomienie”.

Click the 'Add New Notification' button to create a new notification

Zostaniesz poproszony o wpisanie nazwy nowego powiadomienia. Możesz to nazwać, jak chcesz, ponieważ klienci nie zobaczą tej nazwy. Sugerujemy na przykład „Potwierdzenie klienta” lub „Potwierdzenie adresu e-mail klienta”.

Entering a name for the notification that'll be sent to the customer

Chcesz, aby „Wyślij na adres e-mail” było kontem e-mail Twojego klienta. Usuń {admin_email} z tego pola. Kliknij „Pokaż tagi inteligentne” i wybierz pole „E-mail”.

Setting up the customer receipt so that it will be emailed to the customer

Będziesz także chciał podać inne szczegóły e-maila. Sugerujemy użycie tematu, takiego jak „Twoje zamówienie z” i nazwa Twojej firmy.

Entering the 'From' name and email address for the customer's receipt

W polu „Wiadomość” prawdopodobnie zechcesz dodać wiadomość do klienta. Tag {all_fields} zawiera wszystkie informacje wprowadzone przez klienta w formularzu.

Editing the email address that your customer will receive

A jeśli chcesz umieścić w e-mailu tylko niektóre informacje o kliencie? A co, jeśli chcesz najpierw umieścić szczegóły zamówienia i dołączyć szczegóły dostawy na końcu wiadomości e-mail? Możesz po prostu użyć tagów inteligentnych, aby dodać dowolne pola formularza do formularza.

Po zakończeniu konfigurowania powiadomień kliknij przycisk „Zapisz” u góry ekranu.

Wskazówka: Aby wrócić do pierwszego edytowanego powiadomienia, po prostu przewiń ekran w dół.

Ustawianie komunikatu potwierdzającego dla klientów

Oprócz wysyłania klientom e-maili z potwierdzeniem możesz pokazać im potwierdzenie na ekranie, aby wiedzieli, że ich zamówienie zostało wysłane.

Możesz to zrobić na karcie Ustawienia »Potwierdzenie .

Domyślne potwierdzenie brzmi: „Dziękujemy za skontaktowanie się z nami! Wkrótce się z Tobą skontaktujemy ”.

Your online order form's default confirmation message

Możesz to zmienić na cokolwiek chcesz, a także możesz użyć edytora wizualnego, aby sformatować swój tekst.

Customizing the confirmation message that your customer will see on their screen

Alternatywnie możesz przekierować klientów na stronę z podziękowaniami w swojej witrynie lub nawet na inną witrynę.

Po skonfigurowaniu komunikatu potwierdzającego kliknij „Zapisz” u góry ekranu.

Integracja płatności z formularzem zamówienia (opcjonalnie)

Jeśli chcesz pobierać płatność za pośrednictwem formularza zamówienia, musisz zintegrować go z procesorem płatności.

WPForms bardzo łatwo integruje się z dwoma popularnymi procesorami płatniczymi, PayPal i Stripe. Klienci mogą płacić za pośrednictwem swojego konta PayPal lub wprowadzając dane karty kredytowej.

W tym samouczku zamierzamy korzystać z systemu PayPal, ale proces w przypadku Stripe jest podobny.

Najpierw musisz wyjść z kreatora formularzy. Możesz to zrobić, klikając „X” w prawym górnym rogu. Zostaniesz poproszony o zapisanie formularza, jeśli masz niezapisane zmiany.

Następnie przejdź do strony WPForms »Dodatki na pulpicie nawigacyjnym WordPress. Przewiń w dół do „Standardowego dodatku PayPal” i kliknij znajdujący się pod nim przycisk „Zainstaluj dodatek”.

Installing the PayPal addon for WPForms

Dodatek zostanie następnie zainstalowany i aktywowany automatycznie.

Wróć do swojego formularza, który można znaleźć w WPForms »All Forms . Teraz kliknij kartę „Płatności”.

Select the payment service(s) to integrate with your form

Kliknij „PayPal Standard”, a następnie wypełnij szczegóły formularza. Najpierw musisz zaznaczyć pole „Włącz standardowe płatności PayPal” i wprowadzić adres e-mail firmy PayPal.

Pozostaw menu rozwijane „Tryb” ustawione na „Produkcja”, a „Typ płatności” ustaw na „Produkty i usługi”.

The PayPal payment settings page for your form

Jeśli odbierasz adres dostawy za pomocą formularza zamówienia, możesz zmienić „Wysyłka” na „Nie pytaj o adres”.

Nie musisz wpisywać „Anuluj URL”, ale możesz chcieć utworzyć w swojej witrynie stronę, na którą będą kierowani klienci, jeśli nie ukończą procesu płatności.

Po zakończeniu kliknij przycisk „Zapisz”.

Teraz, gdy użytkownik prześle formularz, zostanie automatycznie przekierowany do PayPal w celu zapłaty. Nie musisz dodawać żadnych dodatkowych pól do formularza ani robić nic więcej.

Dodawanie formularza zamówienia do swojej witryny internetowej

Ostatnim krokiem jest dodanie formularza zamówienia do witryny internetowej.

Po prostu wybierz stronę, do której chcesz dodać formularz, lub utwórz nową stronę w Strony »Dodaj nową .

Następnie kliknij ikonę (+), aby dodać nowy blok (w dowolnym miejscu, w którym chcesz utworzyć formularz) i znajdź blok „WPForms”. Znajduje się w sekcji bloków „Widżety”. Aby go znaleźć, możesz po prostu wpisać „WPForms” w pasku wyszukiwania.

Adding your online order form to a page on your website

Zobaczysz blok WPForms. Kliknij menu „Wybierz formularz” i wybierz formularz.

Selecting your online order form from the the WPForms dropdown list

Następnie zobaczysz podgląd samego formularza w edytorze WordPress.

Kiedy będziesz gotowy, zapisz i opublikuj (lub zaktualizuj) swoją stronę. Możesz wyświetlić go na żywo w swojej witrynie, aby zobaczyć, jak działa formularz. Przed udostępnieniem go klientom zalecamy przetestowanie formularza, aby upewnić się, że działa zgodnie z oczekiwaniami.

Warto też sprawdzić, czy otrzymałeś powiadomienie e-mail po przesłaniu formularza. Jeśli nie, sprawdź nasz post o tym, jak naprawić problem z nie wysyłaniem e-maili przez WordPress .

Nawet jeśli przegapisz wiadomość e-mail lub przypadkowo ją usuniesz, WPForms zapisuje dane formularza w bazie danych WordPress . Możesz znaleźć wszystkie swoje zamówienia, przechodząc do WPForm »Wpisy na pulpicie WordPress.

Kliknij nazwę swojego formularza, a zobaczysz listę wpisów. Możesz kliknąć „Wyświetl” obok dowolnego z nich, aby wyświetlić szczegóły.

Viewing completed order forms in your WordPress dashboard

To wszystko! Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć formularz zamówienia online w WordPress. Możesz również polubić nasz przewodnik po najlepszych usługach telefonicznych dla firm oraz musi mieć wtyczki WordPress dla małych firm.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .