Kontaktní formulář pro WordPress bez pluginu

Seleccionar idioma
Kontaktní formulář pro WordPress bez pluginu

Jedna věc, kterou nechápu, je, že WordPress ještě neobsahuje jednoduchý, ale úplný kontaktní formulář ve výchozím nastavení.

Protože pravidelně provádím optimalizaci WordPressu, a to jak zde, tak na webech třetích stran, často nahrazuji zbytečně nafouklé pluginy s možnostmi, bloky a dekoracemi, které se nikdy nepoužívají nebo nejsou potřeba, kódem, který odlehčí zátěž.

Tento kontaktní formulář je kompletní a přizpůsobitelné řešení pro WordPress, které je navrženo tak, aby bylo bezpečné, snadno použitelné a respektovalo soukromí uživatelů. Kromě toho můžete přidávat nebo odebírat možnosti podle vlastního uvážení. Tento formulář používám zde.

Toto jsou jeho hlavní funkce a vlastnosti a návod, jak jej přidat na jakoukoli stránku nebo příspěvek vašeho blogu pomocí zkratky.

Struktura a možnosti

1. Pole formuláře

  • Jméno: Povinné pole pro zadání jména uživatele.
  • E-mailová adresa: E-mailová adresa: Povinné pole pro zadání e-mailové adresy uživatele.
  • Zpráva: Povinné pole, do kterého může uživatel napsat svou zprávu. Musí mít alespoň 15 znaků.
  • Součtová captcha: Jednoduchá captcha, která uživatele vyzve, aby vyřešil součet dvou náhodných čísel v rozmezí 1 až 9.
  • Přijetí zásad ochrany osobních údajů: Povinné zaškrtávací políčko pro přijetí zásad ochrany osobních údajů před odesláním formuláře.

Ověřování a zabezpečení

  • Ověřování povinných polí: Všechna pole jsou povinná. Pokud některé chybí, zobrazí se chybové hlášení.
  • Ověřování odkazů: V polích pro název a zprávu nejsou povoleny žádné odkazy (URL).
  • Sčítací captcha: Zabraňuje automatickému spamu tím, že vyžaduje, aby uživatel vyřešil jednoduchou matematickou operaci.
  • Google reCAPTCHA (volitelné): Pokud jsou nakonfigurovány klíče Google reCAPTCHA, je přidána druhá úroveň zabezpečení, která brání botům. Pokud klíče reCAPTCHA nejsou do kódu přidány, kód se do formuláře nepřidá.
  • Ověřování zakázaných slov: Volitelně lze ve zprávě zablokovat určitá slova, např.: ananas, pizza, bitcoin (oddělená čárkou a bez mezer).
  • Nonce security: Chrání před útoky CSRF (Cross-Site Request Forgery).

3. Ochrana osobních údajů

  • Žádné ukládání dat: Neukládají se žádné údaje o uživatelích (žádné e-maily, žádné IP adresy, žádné odkazující adresy URL, nic). Tento přístup je v souladu s předpisy o ochraně osobních údajů, jako je GDPR, protože se neshromažďují ani neukládají žádné osobní údaje.
  • Zásady ochrany osobních údajů: Obsahuje odkaz na zásady ochrany osobních údajů, které si uživatel musí přečíst a přijmout před odesláním formuláře.

4. Zprávy zpětné vazby

  • Chybová hlášení: Zobrazí se v bloku v horní části formuláře, pokud se při ověřování vyskytnou chyby.
  • Zpráva o úspěchu: Po úspěšném odeslání formuláře se zobrazí zpráva o úspěchu v zelené barvě, velikosti 14px a tučně:"Děkujeme! Vaše zpráva byla odeslána". Tento text a jeho formátování můžete v kódu změnit. Zbytek stylů, jako je žluté pozadí, ohraničení a stín rámečku obsahujícího formulář, které můžete vidět zde, stejně jako další externí prvky, nejsou v kódu obsaženy, protože jsou přidány pomocí kontejneru GenerateBlocks.

5. Personalizace

  • Text Captcha: Přizpůsobitelný (výchozí: "Jste člověk? Vyřešte tento součet:").
  • Zakázaná slova: Lze přidat čárkou oddělený seznam zakázaných slov.
  • Google reCAPTCHA: Nepovinné, přidává se pouze v případě, že konfigurujete a přidáváte do kódu klíč webu a tajný klíč captcha.

6. Výkonnost

Kód kontroluje, zda je zkratka přítomna, a pokud není přítomna, nezobrazí nic, takže se spustí pouze na stránce nebo v příspěvku, kam byla zkratka přidána.

Výkon v místech, kde je zobrazen, je optimální.

Výkon stránky s kontaktním formulářem

Pokyny pro instalaci a konfiguraci

1. Zkopírujte a přidejte kód

  1. Otevřete soubor functions.php svého tématu WordPress (nebo si vytvořte vlastní plugin, pokud nechcete upravovat téma nebo používat Code Snippets).
  2. Zkopírujte a vložte kompletní kód formuláře do souboru functions.php.

2. Nastavení Google reCAPTCHA (volitelné)

  1. Přejděte na Google reCAPTCHA.
  2. Vyberte reCAPTCHA v2 a zaškrtněte políčko "Nejsem robot".
  3. Zaregistrujte své webové stránky a získejte klíče
    :Polylang placeholder do not modify
  4. V kódu formuláře nahraďte 'YOUR_SITE_KEY' a 'YOUR_SECRET_KEY' získanými klíči
    .Polylangový zástupný symbol neupravujte.

3. Nastavení zakázaných slov (volitelné)

1 - V kódu formuláře najděte řádek:

$palabras_prohibidas = ' ';

2 - Přidejte slova, která chcete blokovat, oddělená čárkami. Například:

$palabras_prohibidas = 'caca,culo,pedo,pis';

Pokud nechcete blokovat žádná slova, nechte proměnnou prázdnou.

4. Přizpůsobení textu captcha částky (volitelné)

V kódu formuláře vyhledejte tento řádek:

<label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label>

Změňte text "Jste člověk? Vyřešte tento součet:" na ten, který chcete zobrazit.

5. Přidejte adresu URL svých zásad ochrany osobních údajů

Na tomto řádku nahraďte adresu url příkladu adresou URL zásad ochrany osobních údajů vašeho webu:

$politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';

6. Zkrácený kód

Přidejte zkrácený kód na stránku nebo do příspěvku, kde se má formulář zobrazit.

[formulario_contacto]

Nakonec budete muset jen otestovat, zda jsou e-maily odeslány a doručeny, a sledovat jejich používání, abyste zabránili neúnavným spammerům propašovat své sračky tím, že zkomplikují matematickou captchu a/nebo aktivují obě captchy současně. Kód lze vždy vylepšit a lze jej odladit a optimalizovat. Můžete jej také přeložit, pokud jej potřebujete používat v jiném jazyce.

Pokud v závislosti na výsledku provedu změny nebo vylepšení kódu, přidám sem poznámky.

Kód

//Crea un shortcode que genera un formulario de contacto para añadir en cualquier página o post de tu blog. Código actualizado en https://jrmora.com/formulario-contacto-wordpress-sin-plugin/
// Shortcode para mostrar el formulario de contacto
function contacto_form_shortcode() {
    // Verificar si el shortcode está presente en el contenido actual
    if (!has_shortcode(get_the_content(), 'formulario_contacto')) {
        return ''; // Si no está el shortcode, no mostrar nada
    }

    ob_start(); // Iniciar el buffer de salida

    // Claves de Google reCAPTCHA (cambia estas por las tuyas)
    $site_key = 'TU_CLAVE_DEL_SITIO'; // Clave del sitio de reCAPTCHA
    $secret_key = 'TU_CLAVE_SECRETA'; // Clave secreta de reCAPTCHA

    // Verificar si las claves son las predeterminadas
    $recaptcha_enabled = ($site_key !== 'TU_CLAVE_DEL_SITIO' && $secret_key !== 'TU_CLAVE_SECRETA');

    // Lista de palabras prohibidas (separadas por comas)
    // Ejemplo: $palabras_prohibidas = 'spam,publicidad,oferta';
    $palabras_prohibidas = ''; // No hay palabras prohibidas por defecto

    // Convertir la lista de palabras prohibidas en un array
    $palabras_prohibidas_array = !empty($palabras_prohibidas) ? explode(',', $palabras_prohibidas) : [];

    // Variables para almacenar errores
    $errors = [];

    // Verificar si el formulario ha sido enviado
    if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['contacto_nonce'])) {
        // Verificar el nonce para seguridad
        if (!wp_verify_nonce($_POST['contacto_nonce'], 'contacto_form_nonce')) {
            $errors[] = 'Error de seguridad. Inténtalo de nuevo.';
        } else {
            // Validar el captcha de suma
            $captcha = sanitize_text_field($_POST['captcha']);
            $captcha_correct = sanitize_text_field($_POST['captcha_correct']);

            if ($captcha !== $captcha_correct) {
                $errors[] = 'El resultado de la operación es incorrecto. Inténtalo de nuevo.';
            } else {
                // Validar la aceptación de la política de privacidad
                if (!isset($_POST['aceptar_privacidad'])) {
                    $errors[] = 'Debes aceptar la política de privacidad para enviar el formulario.';
                } else {
                    // Validar Google reCAPTCHA (solo si está habilitado)
                    if ($recaptcha_enabled) {
                        if (isset($_POST['g-recaptcha-response'])) {
                            $recaptcha_response = sanitize_text_field($_POST['g-recaptcha-response']);
                            $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
                            $recaptcha_data = [
                                'secret' => $secret_key,
                                'response' => $recaptcha_response,
                            ];

                            $recaptcha_options = [
                                'http' => [
                                    'method' => 'POST',
                                    'header' => 'Content-Type: application/x-www-form-urlencoded',
                                    'content' => http_build_query($recaptcha_data),
                                ],
                            ];

                            $recaptcha_context = stream_context_create($recaptcha_options);
                            $recaptcha_result = file_get_contents($recaptcha_url, false, $recaptcha_context);
                            $recaptcha_json = json_decode($recaptcha_result);

                            if (!$recaptcha_json->success) {
                                $errors[] = 'Por favor, verifica que no eres un robot.';
                            }
                        } else {
                            $errors[] = 'Por favor, completa el reCAPTCHA.';
                        }
                    }

                    // Si no hay errores, procesar el formulario
                    if (empty($errors)) {
                        $nombre = sanitize_text_field($_POST['nombre']);
                        $email = sanitize_email($_POST['email']);
                        $mensaje = sanitize_textarea_field($_POST['mensaje']);

                        // Validar campos obligatorios
                        if (empty($nombre)) {
                            $errors[] = 'El campo nombre es obligatorio.';
                        }
                        if (empty($email)) {
                            $errors[] = 'El campo email es obligatorio.';
                        }
                        if (empty($mensaje)) {
                            $errors[] = 'El campo mensaje es obligatorio.';
                        }

                        // Validar que no se hayan añadido enlaces en los campos
                        if (preg_match('/http|www|\[url|\[link|href=/i', $nombre . $mensaje)) {
                            $errors[] = 'No se permiten enlaces en los campos del formulario.';
                        }

                        // Validar que el mensaje tenga al menos 15 caracteres
                        if (strlen($mensaje) < 15) {
                            $errors[] = 'El mensaje debe tener al menos 15 caracteres.';
                        }

                        // Validar palabras prohibidas (solo si hay palabras en la lista)
                        if (!empty($palabras_prohibidas_array)) {
                            foreach ($palabras_prohibidas_array as $palabra) {
                                if (stripos($mensaje, $palabra) !== false) {
                                    $errors[] = 'El mensaje contiene palabras no permitidas.';
                                    break; // Detener la validación al encontrar una palabra prohibida
                                }
                            }
                        }

                        // Si no hay errores, enviar el correo
                        if (empty($errors)) {
                            $to = get_option('admin_email'); // Correo del administrador
                            $subject = 'Nuevo mensaje de contacto desde el sitio web';
                            $headers = array('Content-Type: text/html; charset=UTF-8', 'From: ' . $nombre . ' <' . $email . '>');

                            $body = "<p><strong>Nombre:</strong> $nombre</p>";
                            $body .= "<p><strong>Email:</strong> $email</p>";
                            $body .= "<p><strong>Mensaje:</strong> $mensaje</p>";

                            if (wp_mail($to, $subject, $body, $headers)) {
                                // Redirigir para evitar reenvío al refrescar la página
                                wp_redirect(add_query_arg('contacto', 'success', wp_get_referer()));
                                exit;
                            } else {
                                $errors[] = 'Hubo un error al enviar el mensaje. Inténtalo de nuevo.';
                            }
                        }
                    }
                }
            }
        }
    }

    // Mostrar mensaje de éxito después de la redirección
    if (isset($_GET['contacto']) && $_GET['contacto'] === 'success') {
        echo '<p style="font-size: 14px; font-weight: bold; color: green;">¡Gracias! Tu mensaje ha sido enviado.</p>';
    }

    // Generar un captcha de suma de dos números aleatorios entre 1 y 9
    $num1 = rand(1, 9); // Primer número aleatorio entre 1 y 9
    $num2 = rand(1, 9); // Segundo número aleatorio entre 1 y 9
    $captcha_result = $num1 + $num2; // Resultado de la suma

    // URL de la política de privacidad
    $politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';

    // Mostrar el formulario
    ?>
    <?php if (!empty($errors)) : ?>
        <div style="color: red; margin-bottom: 20px;">
            <?php foreach ($errors as $error) : ?>
                <p><?php echo esc_html($error); ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <form action="" method="post">
        <p>
            <label for="nombre">Nombre:</label><br>
            <input type="text" name="nombre" id="nombre" value="<?php echo isset($nombre) ? esc_attr($nombre) : ''; ?>" required>
        </p>
        <p>
            <label for="email">Email:</label><br>
            <input type="email" name="email" id="email" value="<?php echo isset($email) ? esc_attr($email) : ''; ?>" required>
        </p>
        <p>
            <label for="mensaje">Mensaje:</label><br>
            <textarea name="mensaje" id="mensaje" rows="5" required><?php echo isset($mensaje) ? esc_textarea($mensaje) : ''; ?></textarea>
        </p>
        <p>
            <label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label><br>
            <input type="text" name="captcha" id="captcha" required>
            <input type="hidden" name="captcha_correct" value="<?php echo $captcha_result; ?>">
        </p>
        <?php if ($recaptcha_enabled) : ?>
            <p>
                <div class="g-recaptcha" data-sitekey="<?php echo esc_attr($site_key); ?>"></div>
                <script src="https://www.google.com/recaptcha/api.js" async defer></script>
            </p>
        <?php endif; ?>
        <p>
            <input type="checkbox" name="aceptar_privacidad" id="aceptar_privacidad" required>
            <label for="aceptar_privacidad">He leído y acepto la <a href="<?php echo esc_url($politica_privacidad_url); ?>" target="_blank">política de privacidad</a>.</label>
        </p>
        <p>
            <?php wp_nonce_field('contacto_form_nonce', 'contacto_nonce'); ?>
            <input type="submit" value="Enviar">
        </p>
    </form>
    <?php

    return ob_get_clean(); // Devolver el contenido del buffer
}
add_shortcode('formulario_contacto', 'contacto_form_shortcode');

Související články