Едно нещо, което не разбирам, е, че WordPress все още не включва проста, но пълна форма за контакт по подразбиране.
Тъй като редовно се занимавам с оптимизация на WordPress, както тук, така и в сайтове на трети страни, често заменям ненужно раздутите плъгини с опции, блокове и декорации, които никога не се използват или не са необходими, с код, за да облекча натоварването.
Този формуляр за контакт е цялостно решение за WordPress, което може да бъде персонализирано и проектирано така, че да бъде сигурно, лесно за използване и да зачита поверителността на потребителите. Освен това можете да добавяте или премахвате опции по ваше желание. Това е формулярът, който използвам тук.
Това са основните му функции и характеристики, както и инструкциите за добавянето му към всяка страница или публикация в блога ви с помощта на шорткode.
Структура и опции
1. Полета на формуляра
- Име: Задължително поле за въвеждане на името на потребителя.
- Имейл адрес: Задължително поле, в което потребителят трябва да въведе своя имейл адрес.
- Message (Съобщение): Задължително поле, в което потребителят може да напише своето съобщение. То трябва да бъде с дължина най-малко 15 знака.
- Captcha за събиране: Проста captcha, която изисква от потребителя да реши сумата от две произволни числа между 1 и 9.
- Приемане на политиката за поверителност: Задължително квадратче за отметка, за да приемете политиката за поверителност, преди да изпратите формуляра.
Удостоверения и сигурност
- Валидиране на задължителните полета: Всички полета са задължителни. Ако някое от тях липсва, се извежда съобщение за грешка.
- Валидиране на връзката: В полетата за име и съобщение не се допускат връзки (URL адреси).
- Captcha за добавяне: предотвратява автоматичния спам, като изисква от потребителя да реши проста математическа операция.
- Google reCAPTCHA (по избор): Ако са конфигурирани ключове Google reCAPTCHA, се добавя второ ниво на сигурност, за да се предотвратят ботове. Ако ключовете reCAPTCHA не са добавени към кода, кодът няма да бъде добавен към формуляра.
- Утвърждаване на забранени думи: По желание в съобщението могат да бъдат блокирани определени думи, например: ананас, пица, биткойн (разделени със запетая и без интервали).
- Сигурност с нонсенс: Защитава от CSRF (Cross-Site Request Forgery) атаки.
3. Поверителност
- Не се съхраняват данни: Не се съхраняват никакви данни за потребителя (нито имейли, нито IP адреси, нито препращащи URL адреси, нищо). Този подход е в съответствие с разпоредбите за защита на личните данни, като например GDPR, тъй като не се събира или съхранява лична информация.
- Политика за поверителност: Включва връзка към политиката за поверителност, която потребителят трябва да прочете и приеме, преди да изпрати формуляра.
4. Съобщения за обратна връзка
- Съобщения за грешки: Показва се в блок в горната част на формуляра, ако има грешки при валидирането.
- Съобщение за успех: След успешното изпращане на формуляра се показва съобщение за успех в зелено, с размер 14px и удебелен шрифт:"Благодаря ви! Вашето съобщение е изпратено". Можете да промените този текст и неговото форматиране в кода. Останалите стилове, като например жълтият фон, рамката и сянката на полето, съдържащо формуляра, които можете да видите тук, както и други външни елементи, не са включени в кода, тъй като са добавени с контейнер GenerateBlocks.
5. Персонализиране
- Текст на Captcha: Може да се персонализира (по подразбиране: "Are you human? Solve this sum:").
- Забранени думи: Може да се добави списък със забранени думи, разделен на запетаи.
- Google reCAPTCHA: По желание, добавя се само ако конфигурирате и добавите в кода ключовете за сайта и тайната на вашата captcha.
6. Изпълнение
Кодът проверява дали шорткодът е наличен и ако не е наличен, няма да показва нищо, така че ще се изпълнява само на страницата или публикацията, където е добавен шорткодът.
Изпълнението там, където е показано, е оптимално.
Инструкции за инсталиране и конфигуриране
1. Копирайте и добавете кода
- Отворете файла functions.php на вашата тема на WordPress (или създайте персонализирана приставка, ако предпочитате да не променяте темата или да не използвате Code Snippets).
- Копирайте и поставете пълния код на формуляра във вашия файл functions.php.
2. Настройка на Google reCAPTCHA (по избор)
- Отидете в Google reCAPTCHA.
- Изберете reCAPTCHA v2 и поставете отметка в квадратчето "Не съм робот".
- Регистрирайте сайта си и получете ключовете
:Polylang placeholder do not modify
- В кода на формуляра заменете
'YOUR_SITE_KEY'и'YOUR_SECRET_KEY'с получените ключове.Polylang placeholder не променяйте
3. Задаване на забранени думи (по избор)
1 - В кода на формата намерете реда:
$palabras_prohibidas = ' ';2 - Добавете думите, които искате да блокирате, разделени със запетаи. Например:
$palabras_prohibidas = 'caca,culo,pedo,pis';Ако не искате да блокирате никакви думи, оставете променливата празна.
4. Персонализиране на текста на captcha на сумата (по избор)
В кода на формуляра потърсете този ред:
<label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label>Променете текста "Човек ли си? Решете тази сума:" с този, който искате да покажете.
5. Добавете URL адреса на вашата политика за поверителност
Заменете URL адреса на примера с URL адреса на политиката за поверителност на вашия сайт на този ред:
$politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';6. Кратък код
Добавете шорткода към страницата или публикацията, в която искате да се показва формулярът.
[formulario_contacto]Накрая просто трябва да го тествате, за да проверите дали имейлите се изпращат и пристигат, и да наблюдавате използването му, за да предотвратите промъкването на неумолими спамъри чрез усложняване на математическата капча и/или активиране на двете капча едновременно. Кодът винаги може да бъде подобрен и може да се отстранява грешки и да се оптимизира. Можете също така да го преведете, ако ви се налага да го използвате на друг език.
Ако направя промени или подобрения в кода в зависимост от резултата, ще добавя бележките тук.
Код
//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');
