Я не розумію, чому WordPress досі не має простої, але повної контактної форми за замовчуванням.
Оскільки я регулярно займаюся оптимізацією WordPress, як тут, так і на сторонніх сайтах, я часто замінюю непотрібні роздуті плагіни з опціями, блоками і прикрасами, які ніколи не використовуються або не потрібні, кодом для полегшення навантаження.
Ця контактна форма є повним і настроюваним рішенням для WordPress, розробленим, щоб бути безпечним, простим у використанні і поважати конфіденційність користувачів. Крім того, ви можете додавати або видаляти опції за власним бажанням. Це форма, яку я використовую тут.
Ось його основні функції та можливості, а також інструкція, як додати його на будь-яку сторінку або допис вашого блогу за допомогою шорткоду.
Структура та опції
1. поля форми
- Ім'я: обов'язкове поле для введення імені користувача.
- Адреса електронної пошти: Обов'язкове поле для введення користувачем адреси електронної пошти.
- Повідомлення: Обов'язкове поле для написання користувачем свого повідомлення. Воно повинно мати довжину не менше 15 символів.
- Сума капчі: Проста капча, яка просить користувача обчислити суму двох випадкових чисел від 1 до 9.
- Прийняття політики конфіденційності: Обов'язковий прапорець для прийняття політики конфіденційності перед відправкою форми.
Перевірки та безпека
- Перевірка обов'язкових полів: Всі поля є обов'язковими. Якщо якесь з них відсутнє, з'явиться повідомлення про помилку.
- Перевірка посилань: Жодні посилання (URL) не допускаються в полях імені або повідомлення.
- Додавання Captcha: запобігає автоматизованому спаму, вимагаючи від користувача розв'язати просту математичну операцію.
- Google reCAPTCHA (необов'язково): якщо ключі Google reCAPTCHA налаштовані, додається другий рівень захисту від ботів. Якщо ключі reCAPTCHA не додані до коду, код не буде додано до форми.
- Перевірка заборонених слів: За бажанням, певні слова можуть бути заблоковані в повідомленні, наприклад: ананас, піца, біткойн (через кому і без пробілів).
- Nonce security: захист від CSRF-атак (Cross-Site Request Forgery - підробка міжсайтових запитів).
3. Конфіденційність
- Відсутністьзберігання даних: Жодні дані користувачів не зберігаються (ні електронні адреси, ні IP-адреси, ні URL-адреси, ніщо). Цей підхід відповідає правилам конфіденційності, таким як GDPR, оскільки ніяка особиста інформація не збирається і не зберігається.
- Політика конфіденційності: містить посилання на політику конфіденційності, яку користувач повинен прочитати і прийняти перед відправкою форми.
4. Повідомлення зворотного зв'язку
- Повідомлення про помилки: Відображаються у блоці у верхній частині форми, якщо є помилки при валідації.
- Повідомлення про успіх: Після успішного відправлення форми відображається повідомлення про успіх зеленим кольором, розміром 14px і жирним шрифтом:"Дякуємо! Ваше повідомлення надіслано". Ви можете змінити цей текст і його форматування в коді. Решта стилів, таких як жовтий фон, рамка і тінь поля з формою, які ви можете побачити тут, а також інші зовнішні елементи не включені в код, оскільки вони додаються за допомогою контейнера GenerateBlocks.
5. Персоналізація
- Текст капчі: Налаштовується (за замовчуванням: "Ви людина? Розв'яжіть цю суму:").
- Заборонені слова: можна додати список заборонених слів через кому.
- Google reCAPTCHA: Необов'язково, додається тільки якщо ви налаштуєте і додасте в код сайт і секретні ключі вашої капчі.
6. Перформанс
Код перевіряє наявність шорткоду, і якщо його немає, він нічого не покаже, тобто буде виконуватися лише на тій сторінці або в тому дописі, де його було додано.
Продуктивність там, де вона показана, є оптимальною.
Інструкції з встановлення та налаштування
1. скопіюйте та додайте код
- Відкрийте файл functions.php вашої теми WordPress (або створіть власний плагін, якщо ви не хочете змінювати тему або використовувати фрагменти коду).
- Скопіюйте та вставте повний код форми у ваш файл functions.php.
2. Налаштуйте Google reCAPTCHA (необов'язково)
- Перейдіть до Google reCAPTCHA.
- Виберіть reCAPTCHA v2 і встановіть прапорець "Я не робот".
- Зареєструйте свій сайт та отримайте ключі
:Заповнювач Polylang не змінювати
- У коді форми замініть
'YOUR_SITE_KEY' і'YOUR_SECRET_KEY' на отримані вами ключі. Заповнювач Polylang не змінюйте
3. Встановити заборонені слова (необов'язково)
1 - У коді форми знайдіть рядок:
$palabras_prohibidas = ' ';2 - Додайте слова, які ви хочете заблокувати, через кому. Наприклад:
$palabras_prohibidas = 'caca,culo,pedo,pis';Якщо ви не хочете блокувати жодного слова, залиште змінну порожньою.
4. Налаштуйте текст капчі суми (за бажанням)
У коді форми знайдіть цей рядок:
<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');
