En ting jeg ikke forstår, er at WordPress ennå ikke inkluderer et enkelt, men komplett kontaktskjema som standard.
Siden jeg jevnlig jobber med WordPress-optimalisering, både her og på tredjeparts nettsteder, erstatter jeg ofte unødvendig oppblåste plugins med alternativer, blokker og dekorasjoner som aldri brukes eller ikke er nødvendige, med kode for å lette belastningen.
Dette kontaktskjemaet er en komplett og tilpassbar løsning for WordPress, designet for å være sikker, enkel å bruke og respektere brukernes personvern. I tillegg kan du legge til eller fjerne alternativer som du ønsker. Dette er skjemaet jeg bruker her.
Dette er de viktigste funksjonene og funksjonene og instruksjonene for å legge den til på en hvilken som helst side eller innlegg på bloggen din med en kortkode.
Struktur og alternativer
1. Skjemafelt
- Navn: Obligatorisk felt der brukeren kan skrive inn navnet sitt.
- E-postadresse: Obligatorisk felt der brukeren kan skrive inn e-postadressen sin.
- Melding: Obligatorisk felt der brukeren kan skrive sin egen melding. Den må være på minst 15 tegn.
- Addisjons captcha: En enkel captcha som ber brukeren om å løse en sum av to tilfeldige tall mellom 1 og 9.
- Godkjennelse av personvernerklæring: Obligatorisk avkrysningsboks for å godta personvernerklæringen før du sender inn skjemaet.
Valideringer og sikkerhet
- Validering av obligatoriske felt: Alle feltene er obligatoriske. Hvis noen mangler, vises en feilmelding.
- Validering av lenker: Ingen lenker (URL-er) er tillatt i navne- eller meldingsfeltene.
- Addition Captcha: Forhindrer automatisert søppelpost ved å kreve at brukeren løser en enkel matematisk operasjon.
- Google reCAPTCHA (valgfritt): Hvis Google reCAPTCHA-nøkler er konfigurert, legges det til et ekstra sikkerhetsnivå for å forhindre bots. Hvis reCAPTCHA-nøkler ikke er lagt til i koden, vil koden ikke bli lagt til i skjemaet.
- Validering av forbudte ord: Eventuelt kan spesifikke ord blokkeres i meldingen, f.eks. ananas, pizza, bitcoin (adskilt med komma og uten mellomrom).
- Nonce-sikkerhet: Beskytter mot CSRF-angrep (Cross-Site Request Forgery).
3. Personvern
- Ingen datalagring: Ingen brukerdata lagres (ingen e-post, ingen IP-er, ingen henvisende nettadresser, ingenting). Denne tilnærmingen er i samsvar med personvernforskrifter som GDPR, ettersom ingen personopplysninger samles inn eller lagres.
- Personvernerklæring: Inkluderer en lenke til personvernerklæringen som brukeren må lese og godta før han eller hun sender inn skjemaet.
4. Tilbakemeldingsmeldinger
- Feilmeldinger: Vises i en blokk øverst i skjemaet hvis det er feil i valideringen.
- Suksessmelding: Når du har sendt inn skjemaet, vises en suksessmelding i grønt, 14 px i størrelse og i fet skrift:"Takk! Meldingen din er sendt". Du kan endre denne teksten og formateringen av den i koden. Resten av stilene, for eksempel den gule bakgrunnen, rammen og skyggen på boksen som inneholder skjemaet som du kan se her, samt andre eksterne elementer, er ikke inkludert i koden ettersom de legges til med en GenerateBlocks-container.
5. Personlig tilpasning
- Captcha-tekst: Kan tilpasses (standard: "Er du et menneske? Løs denne summen:").
- Forbudte ord: En kommaseparert liste over forbudte ord kan legges til.
- Google reCAPTCHA: Valgfritt, bare lagt til hvis du konfigurerer og legger til nettstedet og de hemmelige nøklene til captchaen din i koden.
6. Ytelse
Koden sjekker om kortkoden er til stede, og hvis kortkoden ikke er til stede, vil den ikke vise noe, så den vil bare kjøre på siden eller innlegget der kortkoden er lagt til.
Ytelsen der den vises, er optimal.
Installasjons- og konfigurasjonsinstruksjoner
1. Kopier og legg til koden
- Åpne functions.php-filen i WordPress-temaet ditt (eller opprett en egendefinert plugin hvis du foretrekker å ikke endre temaet eller bruke Code Snippets).
- Kopier og lim inn hele skjemakoden i filen functions.php.
2. Konfigurer Google reCAPTCHA (valgfritt)
- Gå til Google reCAPTCHA.
- Velg reCAPTCHA v2, og merk av i avmerkingsboksen "Jeg er ikke en robot".
- Registrer nettstedet ditt og få nøklene
:Polylang plassholder ikke endre
- I skjemakoden erstatter du
'YOUR_SITE_KEY'og'YOUR_SECRET_KEY'med nøklene du har fått tak i.Polylang-plassholderen må ikke endres
3. Angi forbudte ord (valgfritt)
1 - Finn linjen i skjemakoden:
$palabras_prohibidas = ' ';2 - Legg til ordene du vil blokkere, atskilt med komma. For eksempel
$palabras_prohibidas = 'caca,culo,pedo,pis';Hvis du ikke vil blokkere noen ord, lar du variabelen være tom.
4. Tilpass captcha-teksten for summen (valgfritt)
Se etter denne linjen i skjemakoden:
<label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label>Endre teksten "Are you human? Løs denne summen:" med den du ønsker å vise.
5. Legg til nettadressen til personvernerklæringen din
Bytt ut eksempel-URL-en med URL-en til nettstedets personvernerklæring på denne linjen:
$politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';6. Kortkode
Legg til kortkoden på siden eller i innlegget der du vil at skjemaet skal vises.
[formulario_contacto]Til slutt må du bare teste den for å verifisere at e-postene blir sendt og kommer frem, og observere bruken for å forhindre at ubarmhjertige spammere sniker seg inn ved å komplisere den matematiske captchaen og/eller aktivere begge captchaene samtidig. Koden kan alltid forbedres og kan feilsøkes og optimaliseres. Du kan også oversette den hvis du trenger å bruke den på et annet språk.
Hvis jeg gjør endringer eller forbedringer i koden avhengig av resultatet, vil jeg legge til merknadene her.
Kode
//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');
