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

Jak dodać niestandardowe formularze w WordPressie; Najlepsze wtyczki WordPress do niestandardowych formularzy; Poradnik tworzenia niestandardowych formularzy w WordPressie; Wtyczka do budowy niestandardowych formularzy WordPress; Dodaj niestandardowy formularz rejestracyjny w WordPressie; Wsparcie dla niestandardowych formularzy WordPress; Darmowa wtyczka do niestandardowych formularzy WordPress; Przykłady niestandardowych formularzy WordPress; Rozwiązywanie problemów z niestandardowymi formularzami WordPress; Integracja 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

<?php
// Add a custom form shortcode
function wp_dudecom_custom_form_shortcode() {
    ob_start();
    ?>
    <form id="wp-dudecom-custom-form" method="post" action="">
        <label for="wp-dudecom-name">Name:</label>
        <input type="text" id="wp-dudecom-name" name="wp-dudecom-name" required>
        
        <label for="wp-dudecom-email">Email:</label>
        <input type="email" id="wp-dudecom-email" name="wp-dudecom-email" required>
        
        <input type="hidden" name="wp_dudecom_form_submitted" value="1">
        <?php wp_nonce_field('wp_dudecom_custom_form', 'wp_dudecom_custom_form_nonce'); ?>
        
        <input type="submit" value="Submit">
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wp_dudecom_custom_form', 'wp_dudecom_custom_form_shortcode');

// Handle form submission
function wp_dudecom_handle_form_submission() {
    if (isset($_POST['wp_dudecom_form_submitted']) && $_POST['wp_dudecom_form_submitted'] == '1') {
        if (!isset($_POST['wp_dudecom_custom_form_nonce']) || !wp_verify_nonce($_POST['wp_dudecom_custom_form_nonce'], 'wp_dudecom_custom_form')) {
            wp_die('Security check failed');
        }

        $name = sanitize_text_field($_POST['wp-dudecom-name']);
        $email = sanitize_email($_POST['wp-dudecom-email']);

        // Process form data (e.g., send email, save to database)
        // Example: Send an email
        $to = get_option('admin_email');
        $subject = 'New Form Submission';
        $message = 'Name: ' . $name . "\n" . 'Email: ' . $email;
        $headers = array('Content-Type: text/plain; charset=UTF-8');

        wp_mail($to, $subject, $message, $headers);

        // Redirect to a thank you page or display a success message
        wp_redirect(home_url('/thank-you'));
        exit;
    }
}
add_action('init', 'wp_dudecom_handle_form_submission');

// Enqueue necessary scripts and styles
function wp_dudecom_enqueue_custom_form_scripts() {
    if (is_page() || is_single()) {
        wp_enqueue_style('wp-dudecom-custom-form-style', get_template_directory_uri() . '/css/wp-dudecom-custom-form.css');
        wp_enqueue_script('wp-dudecom-custom-form-script', get_template_directory_uri() . '/js/wp-dudecom-custom-form.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_form_scripts');
?>

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.