Jak edytować formularz w WordPress?

To, jak edytować formularz w WordPress, zależy od jego źródła. Formularz kontaktowy zmienisz w ustawieniach wtyczki, na przykład Contact Form 7 lub WPForms. Formularz zamówienia WooCommerce edytuje się za pomocą dedykowanej wtyczki albo kodu PHP. Przed każdą zmianą wykonaj kopię zapasową strony.

Wtyczka czy kod – co wybrać?

Najpierw ustal, gdzie znajduje się formularz. Jeśli widzisz go na stronie kontaktowej, prawdopodobnie został utworzony przez wtyczkę albo kreator stron, taki jak Elementor. Jeśli pojawia się podczas składania zamówienia, pracujesz z formularzem WooCommerce.

Początkujący użytkownik powinien zacząć od edycji przez panel wtyczki. Kod ma sens wtedy, gdy potrzebujesz niestandardowego rozwiązania i potrafisz bezpiecznie pracować z WordPressem.

Wtyczkę warto wybrać, gdy:

• chcesz szybko dodać lub usunąć pole formularza,
• potrzebujesz zmienić kolejność pól bez pisania kodu,
• nie masz doświadczenia z PHP,
• formularz udostępnia własny edytor wizualny.

Jak edytować formularz kontaktowy?

W przypadku formularzy kontaktowych najczęściej korzysta się z Contact Form 7 albo WPForms. Obie wtyczki mają własne panele konfiguracji, choć sposób pracy z nimi jest inny.

W Contact Form 7 pola edytuje się w zakładce Formularz, korzystając z pól tekstowych, adresu e-mail, pola wyboru lub obszaru tekstowego. Zakładka E-mail służy do ustawienia odbiorcy, tematu i treści wiadomości, a w sekcji Komunikaty zmienisz teksty wyświetlane użytkownikowi.

W WPForms formularz otwiera się z poziomu menu WPForms. Edytor wizualny pozwala przeciągać pola na formularz, zmieniać ich etykiety, ustawiać wymagane odpowiedzi i modyfikować komunikaty walidacyjne.

Procedura wygląda zwykle tak:

1. Zaloguj się do kokpitu WordPress i otwórz menu wtyczki formularza.
2. Wybierz istniejący formularz, który chcesz zmienić.
3. Dodaj, usuń lub edytuj pola w edytorze wtyczki.
4. Zapisz formularz i sprawdź, czy jego shortcode lub blok nadal znajduje się na właściwej stronie.

Shortcode to krótki kod, który wyświetla formularz w treści strony lub wpisu. Po zapisaniu zmian zwykle nie trzeba go podmieniać, ponieważ nadal wskazuje ten sam formularz. W przypadku WPForms możesz także użyć dedykowanego bloku, a formularz osadzony w Elementorze należy sprawdzić bezpośrednio w edytorze tej strony.

Wygląd formularza zmienisz przez ustawienia wtyczki albo CSS. Własne reguły CSS możesz dodać w sekcji Wygląd → Dostosuj → Dodatkowy CSS. Przykładowo:

.wpforms-form button[type=submit] {
  background-color: #024488;
  border-color: #024488;
  color: #fff;
}

Jak edytować formularz zamówienia WooCommerce?

Formularz zamówienia WooCommerce zawiera między innymi dane rozliczeniowe, adres, telefon i adres e-mail. Jeśli chcesz dodać pole NIP, numer lokalu albo dodatkową informację dla kuriera, masz dwie drogi: wtyczkę do pól zamówienia lub własny kod.

Metoda z użyciem wtyczki

Dedykowana wtyczka, na przykład Flexible Checkout Fields, udostępnia panel do dodawania, usuwania i porządkowania pól. W repozytorium WordPressa znajdziesz także inne dodatki określane jako Checkout Field Editor. Ich menu i zakres funkcji mogą się różnić, dlatego przed instalacją sprawdź zgodność z używaną wersją WordPressa i WooCommerce.

Typowy proces wygląda następująco:

1. Wykonaj kopię zapasową sklepu, a następnie zainstaluj i włącz wybraną wtyczkę.
2. Otwórz jej ustawienia z menu WooCommerce lub osobnej pozycji w kokpicie.
3. Dodaj pole, wybierz jego typ, etykietę, miejsce wyświetlania i wymagany format danych.
4. Zapisz zmiany, ustaw kolejność pól i przetestuj formularz na stronie zamówienia.

W ten sposób możesz dodać pole tekstowe, liczbowe, wyboru, daty lub dodatkowe pole na uwagi. Jeśli sklep korzysta z blokowej wersji strony zamówienia, sprawdź, czy wybrana wtyczka obsługuje ten sposób wyświetlania. Niektóre dodatki działają tylko z klasycznym formularzem WooCommerce.

Metoda z użyciem functions.php

Ręczna edycja pozwala dodać pole bez kolejnej wtyczki, ale wymaga znajomości PHP i mechanizmów WooCommerce. Przykładowy fragment dodający pole NIP może wyglądać tak:

add_action( 'woocommerce_after_order_notes', 'custom_nip_field' );

function custom_nip_field( $checkout ) {
    echo '<div id="custom_nip_field"><h3>Dodatkowe informacje</h3>';

    woocommerce_form_field( 'billing_nip', array(
        'type'        => 'text',
        'class'       => array( 'form-row-wide' ),
        'label'       => 'NIP',
        'placeholder' => 'Wpisz NIP',
    ), $checkout->get_value( 'billing_nip' ) );

    echo '</div>';
}

Samo wyświetlenie pola nie wystarczy. Dane trzeba jeszcze zapisać przy składaniu zamówienia, a następnie zdecydować, czy mają być widoczne w panelu administracyjnym i wiadomościach e-mail. Te fragmenty powinny być dopasowane do aktualnego API WooCommerce, dlatego przy wdrożeniu produkcyjnym warto skorzystać z dokumentacji albo pomocy programisty.

Nie edytuj bezpośrednio plików wtyczki ani głównego motywu. Aktualizacja może nadpisać zmiany, a błąd PHP może wyłączyć część strony. Kod umieść w motywie potomnym albo użyj wtyczki typu Code Snippets. Przed zapisaniem wykonaj kopię plików i bazy danych. Jeśli po zmianie pojawi się błąd PHP, przywróć kopię lub wyłącz dodany fragment przez bezpieczny dostęp administracyjny.

Co sprawdzić po edycji formularza?

Po zapisaniu zmian nie ograniczaj się do sprawdzenia wyglądu. Wyślij testowe zgłoszenie lub przejdź przez cały proces zamówienia. Sprawdź następujące elementy:

• Wyślij formularz i sprawdź, czy wiadomość dociera do właściwego odbiorcy.
• Zweryfikuj, czy wymagane pola blokują wysyłkę pustych lub błędnych danych.
• Otwórz formularz na telefonie i sprawdź układ pól oraz przycisku.
• W przypadku WooCommerce sprawdź, czy nowe dane zapisują się przy zamówieniu i pojawiają się tam, gdzie ich potrzebujesz.
• Przetestuj formularz na kilku adresach e-mail, a nie tylko na koncie administratora.

Jeśli formularz pokazuje komunikat o wysłaniu, ale wiadomość nie przychodzi, problem może dotyczyć sposobu wysyłki WordPressa. W takiej sytuacji skonfiguruj wysyłkę SMTP, na przykład za pomocą narzędzia integrującego WordPress z tym protokołem, i ponów test.

Najbezpieczniejsza ścieżka to edycja formularza w panelu właściwej wtyczki. Kod PHP zostaw dla zmian, których nie da się wykonać wizualnie, i wdrażaj go wyłącznie po wykonaniu kopii zapasowej oraz w motywie potomnym lub przez Code Snippets.