Una cosa che non capisco è che WordPress non include ancora un modulo di contatto semplice ma completo per impostazione predefinita.
Poiché svolgo regolarmente lavori di ottimizzazione di WordPress, sia qui che su siti di terzi, spesso sostituisco i plugin inutilmente gonfiati con opzioni, blocchi e decorazioni che non vengono mai utilizzati o non sono necessari con codice per alleggerire il carico.
Questo modulo di contatto è una soluzione completa e personalizzabile per WordPress, progettata per essere sicura, facile da usare e rispettosa della privacy degli utenti. Inoltre, è possibile aggiungere o rimuovere opzioni a piacimento. Questo è il modulo che utilizzo qui.
Ecco le sue funzioni e caratteristiche principali e le istruzioni per aggiungerlo a qualsiasi pagina o post del vostro blog con uno shortcode.
Struttura e opzioni
1. Campi modulo
- Nome: campo obbligatorio per l'inserimento del nome dell'utente.
- Indirizzo e-mail: Campo obbligatorio per l'inserimento dell'indirizzo e-mail da parte dell'utente.
- Messaggio: campo obbligatorio per la scrittura del messaggio da parte dell'utente. Deve essere lungo almeno 15 caratteri.
- Somma captcha: un captcha semplice che chiede all'utente di risolvere una somma di due numeri casuali compresi tra 1 e 9.
- Accettazione dell'informativa sulla privacy: casella di controllo obbligatoria per accettare l'informativa sulla privacy prima di inviare il modulo.
Convalide e sicurezza
- Convalida dei campi obbligatori: tutti i campi sono obbligatori. Se ne manca qualcuno, viene visualizzato un messaggio di errore.
- Convalida dei link: Non sono ammessi link (URL) nei campi del nome o del messaggio.
- Captcha di aggiunta: previene lo spam automatico richiedendo all'utente di risolvere una semplice operazione matematica.
- Google reCAPTCHA (facoltativo): se sono configurate le chiavi Google reCAPTCHA, viene aggiunto un secondo livello di sicurezza per prevenire i bot. Se le chiavi reCAPTCHA non sono aggiunte al codice, il codice non sarà aggiunto al modulo.
- Convalida delle parole vietate: è possibile bloccare parole specifiche nel messaggio, ad esempio: ananas, pizza, bitcoin (separate da virgola e senza spazi).
- Sicurezza nonce: protegge dagli attacchi CSRF (Cross-Site Request Forgery).
3. La privacy
- Nessuna memorizzazione dei dati: non viene memorizzato alcun dato dell'utente (nessuna e-mail, nessun IP, nessun URL di riferimento, nulla). Questo approccio è conforme alle normative sulla privacy come il GDPR, poiché non vengono raccolte o memorizzate informazioni personali.
- Informativa sulla privacy: include un link all'informativa sulla privacy che l'utente deve leggere e accettare prima di inviare il modulo.
4. Messaggi di feedback
- Messaggi di errore: visualizzati in un blocco nella parte superiore del modulo in caso di errori nella convalida.
- Messaggio di successo: dopo aver inviato il modulo, viene visualizzato un messaggio di successo in verde, di 14px e in grassetto:"Grazie! Il messaggio è stato inviato". È possibile modificare questo testo e la sua formattazione nel codice. Il resto degli stili, come lo sfondo giallo, il bordo e l'ombra del riquadro che contiene il modulo, che potete vedere qui, e altri elementi esterni non sono inclusi nel codice, poiché vengono aggiunti con il contenitore GenerateBlocks.
5. La personalizzazione
- Testo del Captcha: personalizzabile (predefinito: "Sei umano? Risolvi questa somma:").
- Parole proibite: È possibile aggiungere un elenco di parole proibite separato da virgole.
- Google reCAPTCHA: facoltativo, aggiunto solo se si configura e si aggiungono al codice il sito e le chiavi segrete del captcha.
6. Prestazioni
Il codice controlla se lo shortcode è presente e se non lo è non visualizzerà nulla, quindi verrà eseguito solo nella pagina o nel post in cui è stato aggiunto lo shortcode.
Le prestazioni dove sono indicate sono ottimali.
Istruzioni per l'installazione e la configurazione
1. Copiare e aggiungere il codice
- Aprite il file functions.php del vostro tema WordPress (o create un plugin personalizzato se preferite non modificare il tema o usare Code Snippets).
- Copiare e incollare il codice completo del modulo nel file functions.php.
2. Impostare Google reCAPTCHA (facoltativo)
- Andate su Google reCAPTCHA.
- Selezionare reCAPTCHA v2 e selezionare la casella di controllo "Non sono un robot".
- Registra il tuo sito web e ottieni le chiavi
:Segnaposto Polylang non modificare
- Nel codice del modulo, sostituire
'YOUR_SITE_KEY'e'YOUR_SECRET_KEY'con le chiavi ottenute.Segnaposto Polylang non modificare
3. Impostare le parole vietate (opzionale)
1 - Nel codice del modulo, trovare la riga:
$palabras_prohibidas = ' ';2 - Aggiungete le parole che volete bloccare, separate da virgole. Ad esempio:
$palabras_prohibidas = 'caca,culo,pedo,pis';Se non si vuole bloccare nessuna parola, lasciare la variabile vuota.
4. Personalizzare il testo del captcha della somma (facoltativo)
Nel codice del modulo, cercate questa riga:
<label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label>Cambiare il testo "Sei umano? Risolvi questa somma:" con quello che si desidera mostrare.
5. Aggiungere l'URL dell'informativa sulla privacy
In questa riga, sostituire l'url di esempio con l'URL dell'informativa sulla privacy del proprio sito:
$politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';6. Codice breve
Aggiungere lo shortcode alla pagina o al post in cui si desidera visualizzare il modulo.
[formulario_contacto]Infine, dovrete solo testarlo per verificare che le e-mail vengano inviate e arrivino e osservare l'utilizzo per evitare che gli implacabili spammer si intrufolino complicando il captcha matematico e/o attivando entrambi i captcha contemporaneamente. Il codice può sempre essere migliorato e può essere sottoposto a debug e ottimizzato. È anche possibile tradurlo se si desidera utilizzarlo in un'altra lingua.
Se apporterò modifiche o miglioramenti al codice in base ai risultati, aggiungerò le note qui.
Codice
//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');
