En sak som jag inte förstår är att WordPress ännu inte innehåller ett enkelt men komplett kontaktformulär som standard.
Eftersom jag regelbundet arbetar med WordPress-optimering , både här och på tredjepartssajter, ersätter jag ofta onödigt uppblåsta plugins med alternativ, block och dekorationer som aldrig används eller inte behövs med kod för att minska belastningen.
Detta kontaktformulär är en komplett och anpassningsbar lösning för WordPress som är utformad för att vara säker, enkel att använda och respektera användarnas integritet. Dessutom kan du lägga till eller ta bort alternativ som du vill. Det är det här formuläret jag använder här.
Det här är dess huvudfunktioner och funktioner och instruktionerna för att lägga till den på alla sidor eller inlägg i din blogg med en kortkod.
Struktur och alternativ Name : Obligatoriskt fält där användaren kan ange sitt namn.E-post adress : Obligatoriskt fält för att användaren ska kunna ange sin e-postadress.Message : Obligatoriskt fält där användaren kan skriva sitt meddelande. Det måste vara minst 15 tecken långt.Sum captcha : En enkel captcha som ber användaren att lösa en summa av två slumpmässiga tal mellan 1 och 9.Godkännande av sekretesspolicy : Obligatorisk kryssruta för att godkänna sekretesspolicyn innan formuläret skickas in.Valideringar och säkerhet Validering av obligator iska fält: Alla fält är obligatoriska. Om något saknas visas ett felmeddelande.Validering av länkar : Inga länkar (URL:er) tillåts i namn- eller meddelandefälten.Addition Captcha : Förhindrar automatiserad skräppost genom att användaren måste lösa en enkel matematisk operation.Google reCAPTCHA (valfritt) : Om Google reCAPTCHA-nycklar konfigureras läggs en andra säkerhetsnivå till för att förhindra bots. Om reCAPTCHA-nycklar inte läggs till i koden kommer koden inte att läggas till i formuläret.Validering av förbjudna ord: Som tillval kan specifika ord blockeras i meddelandet, t.ex.: ananas, pizza, bitcoin (separerade med kommatecken och utan mellanslag).Nonce-säkerhet : Skyddar mot CSRF-attacker (Cross-Site Request Forgery).3. Sekretess Ingen datalagring : Ingen användardata lagras (inga e-postmeddelanden, inga IP-adresser, inga hänvisande webbadresser, ingenting). Detta tillvägagångssätt är förenligt med sekretessbestämmelser som GDPR, eftersom ingen personlig information samlas in eller lagras.Integritetspolicy : Innehåller en länk till den integritetspolicy som användaren måste läsa och godkänna innan formuläret skickas in.4. Återkopplingsmeddelanden Felmeddelanden : Visas i ett block längst upp i formuläret om det finns fel i valideringen.Framgångsmeddelande : När formuläret har skickats in visas ett framgångsmeddelande i grönt, 14px i storlek och i fetstil:"Thank you! Ditt meddelande har skickats ". Du kan ändra denna text och dess formatering i koden. Resten av stilarna, t.ex. den gula bakgrunden, kanten och skuggan på rutan som innehåller formuläret som du kan se här , samt andra externa element ingår inte i koden eftersom de läggs till med en GenerateBlocks-behållare 5. Personlig anpassning Captcha-text : Anpassningsbar (standard: "Är du människa? Lös den här summan:").Förbjudna ord : En kommaseparerad lista med förbjudna ord kan läggas till.Google reCAPTCHA : Valfritt, läggs endast till om du konfigurerar och lägger till webbplatsen och de hemliga nycklarna för din captcha i koden.6. Utförande Koden kontrollerar om kortkoden finns och om kortkoden inte finns kommer den inte att visa något, så den kommer bara att köras på den sida eller det inlägg där kortkoden har lagts till.
Prestanda där den visas är optimal.
Installations- och konfigurationsinstruktioner 1. Kopiera och lägg till koden Öppna filen functions.php i ditt WordPress-tema (eller skapa ett anpassat plugin om du föredrar att inte ändra temat eller använda Code Snippets Kopiera och klistra in hela formulärkoden i din functions.php-fil. Gå till Google reCAPTCHA . Välj reCAPTCHA v2 och markera kryssrutan "Jag är inte en robot". Registrera din webbplats och få nycklarna:Polylang platshållare får inte modifieras I formulärkoden ska du ersätta "YOUR_SITE_KEY " och "YOUR_SECRET_KEY " med de nycklar du fick.Polylang platshållare får inte ändras 3. Ange förbjudna ord (valfritt) 1 - Leta reda på raden i formulärkoden:
$palabras_prohibidas = ' ';2 - Lägg till de ord som du vill blockera, åtskilda med kommatecken. Till exempel
$palabras_prohibidas = 'caca,culo,pedo,pis';Om du inte vill blockera några ord lämnar du variabeln tom.
4. Anpassa captcha-texten för summan (valfritt) I formulärkoden letar du efter den här raden:
<label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label>Ändra texten "Är du människa? Lös den här summan:" med den du vill visa.
5. Lägg till webbadressen till din integritetspolicy Ersätt exempelets webbadress med webbadressen till din webbplats integritetspolicy på den här raden:
$politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';6. Kortkod Lägg till kortkoden på den sida eller i det inlägg där du vill att formuläret ska visas.
[formulario_contacto]Slutligen behöver du bara testa den för att verifiera att e-postmeddelandena skickas och kommer fram och observera användningen för att förhindra att obevekliga spammare smyger in sin skit genom att komplicera den matematiska captchan och/eller aktivera båda captchorna samtidigt. Koden kan alltid förbättras och kan felsökas och optimeras. Du kan också översätta den om du behöver använda den på ett annat språk.
Om jag gör ändringar eller förbättringar i koden beroende på resultatet, kommer jag att lägga till anteckningarna här.
Kod //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');
