Stworzenie formularza kontaktowego AJAX w WordPressie bez wtyczek

KapitanWebWordpressStworzenie formularza kontaktowego AJAX w WordPressie bez wtyczek

Podczas optymalizacji strony pod kątem szybkości zauważyłem, że popularna wtyczka formularza kontaktowego Contact Form 7 (CF7) razem z reCAPTCHA negatywnie wpływa na wyniki PageSpeed Insights.

Postanowiłem więc stworzyć własny formularz w WordPress bez użycia wtyczki oraz bez przeładowywania, który nie tylko poprawi wydajność strony, ale również zapewni większą elastyczność i kontrolę nad procesem kontaktu z użytkownikami.

Poniższy przewodnik krok po kroku przedstawia ten sposób stworzenia za pomocą tylko pliku function.php.

Stworzenie formularza kontaktowego AJAX w WordPressie bez wtyczek

Krok 1: jQuery w kolejce

Aby korzystać z funkcji AJAX w formularzu, należy dołączyć bibliotekę jQuery. Możesz to zrobić, dodając następujący kod:

function add_custom_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

Krok 2: Przesłanie formularza kontaktowego za pomocą technologii AJAX

Ta funkcja zapewnia podstawową funkcjonalność obsługi formularza kontaktowego z AJAX, weryfikacją antyspamową i wysyłaniem wiadomości e-mail. Możesz ją rozszerzyć o dodatkowe opcje i integracje, aby dopasować ją do swoich potrzeb.

function handle_contact_form_submit() {
	if (isset($_POST['action']) && $_POST['action'] == 'contact_form_submit') {
		// Zweryfikuj dane formularza
		if (isset($_POST['email']) && isset($_POST['message'])) {
			// Wykonaj podstawową weryfikację antyspamową (możesz ją ulepszyć)
			$is_spam = false;
			// Dodaj dodatkowe sprawdzanie antyspamowe, jeśli jest to konieczne

			if (!$is_spam) {
				// Przetwórz dane formularza (wyślij e-mail, zapisz w bazie danych itp.)
				// Zamień to na swoją własną logikę obsługi formularza
				$email = sanitize_email($_POST['email']);
				$message = sanitize_text_field($_POST['message']);

				// Przykład: Wyślij powiadomienie e-mail
				$to = 'mail@mail.mail';
				$subject = 'Nowy formularz kontaktowy twojastrona.pl';
				$body = "Email: $email \nWiadomość: $message";
				wp_mail($to, $subject, $body);

				// Zwróć odpowiedź
				wp_send_json_success('Formularz przesłany pomyślnie!');
			} else {
				wp_send_json_error('Wykryto spam: Wysłanie formularza nie powiodło się.');
			}
		} else {
			wp_send_json_error('Nieprawidłowe dane formularza.');
		}
	}
}
add_action('wp_ajax_contact_form_submit', 'handle_contact_form_submit');
add_action('wp_ajax_nopriv_contact_form_submit', 'handle_contact_form_submit');

Opis kodu funkcji handle_contact_form_submit:

Ta funkcja obsługuje przesyłanie formularza kontaktowego za pomocą AJAX i wysyła wiadomość e-mail z informacjami z formularza.

Krok po kroku:

  1. Sprawdzenie akcji i danych formularza:
    • Sprawdza, czy akcja POST jest ustawiona na „contact_form_submit”.
    • Sprawdza, czy pola „email” i „message” są obecne w danych POST.
  2. Podstawowa weryfikacja antyspamowa:
    • (Możesz udoskonalić tę logikę)
    • Sprawdza, czy w wiadomości lub adresie email występują typowe wzorce spamu.
  3. Obsługa formularza (opcjonalnie):
    • Jeśli nie jest to spam:
      • Sanitałyzuje adres email i wiadomość.
      • (Zamień to na swoją logikę)
      • Przykład: wysyła powiadomienie e-mail na adres „mail@mail.mail” z tematem „Nowy formularz kontaktowy twojastrona.pl” i treścią zawierającą email i wiadomość z formularza.
      • Zwraca komunikat JSON o sukcesie.
    • W przypadku wykrycia spamu:
      • Zwraca komunikat JSON o błędzie.
  4. Obsługa błędów:
    • Jeśli dane formularza są nieprawidłowe, zwraca komunikat JSON o błędzie.

Dodatkowe uwagi:

  • Funkcja korzysta z wp_send_json_success() i wp_send_json_error() do zwracania odpowiedzi JSON do żądania AJAX.
  • Używa sanitize_email() i sanitize_text_field() do oczyszczania danych formularza przed ich użyciem.
  • Pamiętaj, aby dostosować logikę wysyłania wiadomości e-mail i weryfikacji antyspamowej do swoich potrzeb.
  • Kod korzysta z akcji wp_ajax_contact_form_submit i wp_ajax_nopriv_contact_form_submit, aby zarejestrować funkcję obsługi żądań AJAX.

Krok 3: Wyświetlanie formularza kontaktowego za pomocą shortcode’a

Ten kod umożliwia dodawanie formularza poprzez shortcode o nazwie contact_form, na przykład w edytorze:

function display_contact_form() {
    ob_start(); ?>
	<h2>Formularz kontaktowy</h2>
    <form id="contact_form">
		<input type="email" class="form_control" name="email" placeholder="<?php _e('Email', 'uniwp') ?>" required>
        <textarea name="message" class="form_control" placeholder="<?php _e('Opisz swoje oczekiwania*', 'uniwp') ?>" required></textarea>
        <input type="hidden" name="action" value="contact_form_submit">
        <button type="submit" class="btn_3 btn_round btn_md"><?php _e('Wyślij', 'uniwp') ?></button>
    </form>

    <div id="contact-form-response"></div>

    <script>
        jQuery(function($) {
            $('#contact_form').submit(function(e) {
                e.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#contact-form-response').html(response.data);
                    },
                    error: function() {
                        $('#contact-form-response').html('Error submitting form.');
                    }
                });
            });
        });
    </script>

    <?php return ob_get_clean();
}
add_shortcode('contact_form', 'display_contact_form');

Przyjrzyjmy się kodowi:

1. Buforowanie wyjścia:

  • ob_start(): Uruchamia buforowanie wyjścia. Wszelkie dane wygenerowane przez kod w buforze zostaną przechwycone zamiast być bezpośrednio wysyłane do przeglądarki.

2. Budowanie formularza:

  • <form id="contact_form">: Tworzy element formularza o identyfikatorze „contact_form”.
  • <input type="email">: Tworzy pole wprowadzania adresu e-mail z etykietą „Email” i obowiązkowym polem. Używa funkcji _e(), aby przetłumaczyć tekst etykiety na bieżący język.
  • <textarea>: Tworzy pole tekstowe, w którym użytkownik może napisać wiadomość. Również używa _e() dla tekstu etykiety.
  • <input type="hidden">: Tworzy ukryte pole wprowadzania z nazwą „action” ustawioną na „contact_form_submit”. Ta wartość zostanie wysłana z danymi formularza i użyta przez serwer do identyfikacji sposobu obsługi zgłoszenia.
  • <button type="submit">: Tworzy przycisk submit z tekstem „Wyślij”. Ponownie używa _e() do tłumaczenia.
  • <div id="contact-form-response"></div>: Tworzy element div o identyfikatorze „contact-form-response”, który zostanie użyty do wyświetlenia odpowiedzi po wysłaniu formularza.

3. Skrypt AJAX:

  • $('#contact_form').submit(function(e) { ... }): Dołącza obsługę zdarzenia submit do formularza o identyfikatorze „contact_form”. Po wysłaniu formularza zostanie uruchomiona funkcja wewnątrz obsługi zdarzenia.
    • e.preventDefault(): Zapobiega domyślnemu zachowaniu wysyłania formularza, które normalnie spowodowałoby ponowne załadowanie strony.
    • $.ajax({ ... }): Uruchamia żądanie AJAX za pomocą jQuery.
      • type: Ustawia metodę żądania na „POST”.
      • url: Ustawia adres URL punktu końcowego admin-ajax.php za pomocą admin_url(). Ten punkt końcowy służy do obsługi żądań AJAX w WordPressie.
      • data: Ustawia dane do wysłania z żądaniem. Tutaj używa $(this).serialize(), które serializuje dane formularza do formatu ciągu zapytania.
      • success: Definiuje funkcję zwrotną, która zostanie wykonana, jeśli żądanie AJAX zakończy się pomyślnie.
        • $('#contact-form-response').html(response.data): Aktualizuje zawartość diva „contact-form-response” danymi odebranymi z serwera (zapewne komunikatem o sukcesie).
      • error: Definiuje funkcję zwrotną, która zostanie wykonana, jeśli żądanie AJAX się nie powiedzie.
        • $('#contact-form-response').html('Błąd podczas wysyłania formularza.'): Aktualizuje div „contact-form-response” komunikatem o błędzie.

4. Wyjście i rejestracja shortcode’a:

  • return ob_get_clean(): Pobiera przechwycony bufor wyjścia za pomocą ob_get_clean() i zwraca go. Zapewnia to, że zwracany jest tylko zawarty w buforze, wykluczając sam kod.

Uwagi:

  • Zmień adres email „mail@mail.mail” na swój adres email odbiorcy.
  • Dostosuj styl formularza kontaktowego do swojego motywu WordPressa.
  • Możesz dodać dodatkowe pola do formularza, takie jak numer telefonu lub lista rozwijana z wyborem tematu wiadomości.

Korzyści z formularza kontaktowego bez wtyczki:

  • Szybsze działanie: Brak obciążenia strony dodatkową wtyczką.
  • Lepsze wyniki w PageSpeed Insights: Mniejsza ilość kodu i skryptów.
  • Większa elastyczność: Możliwość pełnej kontroli nad wyglądem i funkcjonalnością formularza.
  • Mniejsza podatność na błędy: Brak zależności od aktualizacji wtyczek.

Stworzenie formularza kontaktowego bez wtyczki może wydawać się skomplikowane, ale z pomocą tego artykułu i krok po kroku instrukcji każdy może to zrobić. Formularz bez wtyczki jest szybszy i daje większą kontrolę nad jego wyglądem i funkcjonalnością. Same zalety 🙂