Snippet

Dodaj wsparcie dla niestandardowych formularzy w WordPressie z łatwością

Jak dodać niestandardowe formularze w WordPressieNajlepsze wtyczki WordPress do niestandardowych formularzyPoradnik tworzenia niestandardowych formularzy w WordPressieWtyczka do budowy niestandardowych formularzy WordPressDodaj niestandardowy formularz rejestracyjny w WordPressieWsparcie dla niestandardowych formularzy WordPressDarmowa wtyczka do niestandardowych formularzy WordPressPrzykłady niestandardowych formularzy WordPressRozwiązywanie problemów z niestandardowymi formularzami WordPressIntegracja niestandardowych formularzy w WordPressie

Objaśnienie

Aby dodać niestandardowy formularz do swojej strony WordPress, możesz użyć shortcode'a. Ten fragment kodu tworzy prosty formularz z polami na imię i adres e-mail. Możesz umieścić ten formularz w dowolnym miejscu na swojej stronie, używając shortcode'a [wp_dudecom_custom_form].

Przesyłanie formularza:

  • Kiedy ktoś wyśle formularz, kod sprawdza ukryte pole, aby upewnić się, że jest to ważne przesłanie.
  • Wykorzystuje również kontrolę bezpieczeństwa zwaną nonce, aby zapobiec nieautoryzowanym przesyłaniom.
  • Po walidacji, dane wejściowe są oczyszczane, aby zapewnić bezpieczeństwo Twojej strony.
  • Dane formularza mogą być przetwarzane, na przykład poprzez wysłanie e-maila do administratora strony z przesłanymi szczegółami.
  • Po przetworzeniu użytkownicy są przekierowywani na stronę z podziękowaniami.

Stylizacja i skrypty:

  • Kod zawiera style i skrypty dla formularza, które są ładowane tylko na stronach lub wpisach, gdzie są potrzebne.
  • Upewnij się, że masz odpowiednie pliki CSS i JavaScript w katalogu swojego motywu, aby stylizować i poprawić funkcjonalność formularza.

Ta konfiguracja pozwala na łatwą integrację niestandardowego formularza w Twojej stronie WordPress bez potrzeby używania wtyczki, dając Ci większą kontrolę nad jego wyglądem i działaniem.

Kod

1<?php 2// Add a custom form shortcode 3function wp_dudecom_custom_form_shortcode() { 4 ob_start(); 5 ?> 6 <form id="wp-dudecom-custom-form" method="post" action=""> 7 <label for="wp-dudecom-name">Name:</label> 8 <input type="text" id="wp-dudecom-name" name="wp-dudecom-name" required> 9 10 <label for="wp-dudecom-email">Email:</label> 11 <input type="email" id="wp-dudecom-email" name="wp-dudecom-email" required> 12 13 <input type="hidden" name="wp_dudecom_form_submitted" value="1"> 14 <?php wp_nonce_field('wp_dudecom_custom_form', 'wp_dudecom_custom_form_nonce'); ?> 15 16 <input type="submit" value="Submit"> 17 </form> 18 <?php 19 return ob_get_clean(); 20} 21add_shortcode('wp_dudecom_custom_form', 'wp_dudecom_custom_form_shortcode'); 22 23// Handle form submission 24function wp_dudecom_handle_form_submission() { 25 if (isset($_POST['wp_dudecom_form_submitted']) && $_POST['wp_dudecom_form_submitted'] == '1') { 26 if (!isset($_POST['wp_dudecom_custom_form_nonce']) || !wp_verify_nonce($_POST['wp_dudecom_custom_form_nonce'], 'wp_dudecom_custom_form')) { 27 wp_die('Security check failed'); 28 } 29 30 $name = sanitize_text_field($_POST['wp-dudecom-name']); 31 $email = sanitize_email($_POST['wp-dudecom-email']); 32 33 // Process form data (e.g., send email, save to database) 34 // Example: Send an email 35 $to = get_option('admin_email'); 36 $subject = 'New Form Submission'; 37 $message = 'Name: ' . $name . "\n" . 'Email: ' . $email; 38 $headers = array('Content-Type: text/plain; charset=UTF-8'); 39 40 wp_mail($to, $subject, $message, $headers); 41 42 // Redirect to a thank you page or display a success message 43 wp_redirect(home_url('/thank-you')); 44 exit; 45 } 46} 47add_action('init', 'wp_dudecom_handle_form_submission'); 48 49// Enqueue necessary scripts and styles 50function wp_dudecom_enqueue_custom_form_scripts() { 51 if (is_page() || is_single()) { 52 wp_enqueue_style('wp-dudecom-custom-form-style', get_template_directory_uri() . '/css/wp-dudecom-custom-form.css'); 53 wp_enqueue_script('wp-dudecom-custom-form-script', get_template_directory_uri() . '/js/wp-dudecom-custom-form.js', array('jquery'), null, true); 54 } 55} 56add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_form_scripts'); 57?>

Instrukcja

Lokalizacja pliku: Dodaj kod do pliku functions.php swojego motywu lub do pliku własnej wtyczki.

Wymagania wstępne:

  • Podstawowa znajomość edytowania plików WordPress.
  • Dostęp do plików motywu WordPress lub katalogu wtyczek.
  • Upewnij się, że masz kopię zapasową swojej strony przed wprowadzeniem zmian.

Kroki wdrożenia:

  1. Dostęp do plików WordPress: Użyj klienta FTP lub menedżera plików swojego dostawcy hostingu, aby uzyskać dostęp do instalacji WordPress.
  2. Edytuj plik functions.php: Przejdź do wp-content/themes/twoj-motyw/functions.php i otwórz go do edycji.
  3. Wstaw kod: Skopiuj i wklej podany fragment kodu do pliku functions.php. Upewnij się, że jest umieszczony przed zamykającym tagiem ?>, jeśli taki istnieje.
  4. Utwórz pliki CSS i JavaScript: W katalogu swojego motywu utwórz folder css i folder js, jeśli jeszcze nie istnieją. Dodaj swoje niestandardowe style do wp-dudecom-custom-form.css oraz wszelkie skrypty JavaScript do wp-dudecom-custom-form.js.
  5. Użyj shortcode: Dodaj shortcode [wp_dudecom_custom_form] do dowolnego wpisu lub strony, na której chcesz, aby formularz się pojawił.
  6. Przetestuj formularz: Odwiedź stronę, na której dodałeś shortcode, aby upewnić się, że formularz wyświetla się poprawnie, a przesyłki są przetwarzane zgodnie z oczekiwaniami.

Jeśli potrzebujesz pomocy przy wdrożeniu lub wymagasz bardziej zaawansowanej funkcjonalności, rozważ skorzystanie z usług wp-dude.com.