Vuoi aggiungere un modulo contatti senza plugin su WordPress? Scopri come fare in modo semplice utilizzando Gutenberg o Elementor, e per chi desidera maggiore controllo, troverà anche una soluzione con PHP.
Indice
Un modulo contatti leggero migliora la velocità del sito e l’esperienza utente.
Perché Evitare i Plugin per Moduli di Contatto
Molti plugin per moduli di contatto possono appesantire il tuo sito e rappresentare un rischio per la sicurezza. Creare un modulo senza plugin riduce la complessità, migliora la velocità del sito e ti dà più controllo sul design e le funzionalità.
Vantaggi:
- Velocità: Ridurre il numero di plugin migliora il tempo di caricamento del sito.
- Sicurezza: Meno plugin significa meno vulnerabilità potenziali.
- Controllo: Puoi personalizzare completamente l’aspetto e il comportamento del modulo.
Creare un Modulo Contatti Senza Plugin
Creare un Modulo Contatti con Gutenberg
Aggiungi un Blocco HTML Personalizzato
Vai all’editor della tua pagina o del tuo articolo in WordPress.
Clicca su “Aggiungi Blocco” e seleziona “HTML Personalizzato”.
Inserisci il Codice HTML
Copia e incolla il seguente codice nel blocco HTML Personalizzato:
<form method="post" action="#"> <p> <label for="name">Nome (obbligatorio)</label> <input type="text" name="name" required> </p> <p> <label for="email">Email (obbligatorio)</label> <input type="email" name="email" required> </p> <p> <label for="message">Messaggio</label> <textarea name="message" required></textarea> </p> <p><input type="submit" value="Invia Messaggio"></p> </form>
Aggiungi lo Script PHP per Gestire l’Invio
Apri l’editor del tema (Aspetto > Editor del Tema) e aggiungi il seguente codice PHP nel file del template (ad esempio “page-contact.php”):
<?php if ( $_SERVER["REQUEST_METHOD"] == "POST" ) { $name = sanitize_text_field( $_POST["name"] ); $email = sanitize_email( $_POST["email"] ); $message = sanitize_textarea_field( $_POST["message"] ); $to = "[email protected]"; // Sostituisci con il tuo indirizzo email $subject = "Nuovo messaggio dal modulo di contatto"; $headers = "Da: $name <$email>\r\n"; if ( wp_mail( $to, $subject, $message, $headers ) ) { echo '<p>Messaggio inviato con successo!</p>'; } else { echo '<p>Si è verificato un errore. Riprova più tardi.</p>'; } } ?>
Creare un Modulo con Elementor
Se usi Elementor, puoi creare un modulo visivamente, senza bisogno di codice.
Aggiungi un Modulo con Elementor
- Apri la pagina con Elementor.
- Trascina il widget “Modulo” (disponibile nella versione Pro) sulla tua pagina.
- Personalizza i campi, come Nome, Email e Messaggio.
- Configura le azioni post-invio (es. invio email o reindirizzamento a una pagina).
Se non hai Elementor Pro, puoi usare un widget HTML per inserire il codice del modulo personalizzato.
Creare un Modulo Personalizzato con PHP
Questa opzione è per utenti più esperti che desiderano un maggiore controllo sul modulo.
Aggiungi il Codice HTML per il Modulo
Inserisci questo codice nel file del template in cui vuoi che appaia il modulo:
<form method="post" action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>">
<p>
<label for="name">Nome (obbligatorio)</label>
<input type="text" name="name" required>
</p>
<p>
<label for="email">Email (obbligatorio)</label>
<input type="email" name="email" required>
</p>
<p>
<label for="message">Messaggio</label>
<textarea name="message" required></textarea>
</p>
<p><input type="submit" value="Invia Messaggio"></p>
</form>Aggiungi il Codice PHP per Gestire l’Invio
Subito dopo, aggiungi questo script PHP per inviare i dati via email:
<?php
if ( $_SERVER["REQUEST_METHOD"] == "POST" ) {
$name = sanitize_text_field( $_POST["name"] );
$email = sanitize_email( $_POST["email"] );
$message = sanitize_textarea_field( $_POST["message"] );
$to = "[email protected]"; // Sostituisci con il tuo indirizzo email
$subject = "Nuovo messaggio dal modulo di contatto";
$headers = "Da: $name <$email>\r\n";
if ( wp_mail( $to, $subject, $message, $headers ) ) {
echo '<p>Messaggio inviato con successo!</p>';
} else {
echo '<p>Si è verificato un errore. Riprova più tardi.</p>';
}
}
?>Suggerimenti per Ottimizzare il Modulo di Contatto
- Etichette Chiare: Utilizza etichette descrittive per aiutare gli utenti e migliorare l’accessibilità.
- Velocità del Sito: Testa il tempo di caricamento della pagina per assicurarti che il modulo non rallenti il sito.
- Accessibilità Mobile: Verifica che il modulo sia facile da usare su dispositivi mobili.
Vorresti migliorare la visibilità del tuo sito e ricevere più contatti?
Richiedi una consulenza SEO completamente gratuita e scopri come possiamo aiutarti!
Domande Frequenti (FAQ)
Posso usare un tema figlio per inserire il modulo?
Sì, è consigliato utilizzare un tema figlio per evitare che le modifiche vengano sovrascritte durante gli aggiornamenti.
Come posso proteggere il modulo dallo spam?
Aggiungi un captcha o usa wp_nonce_field() per proteggere il modulo.
Posso aggiungere più campi al modulo?
Puoi personalizzare il modulo aggiungendo campi come numero di telefono o opzioni a discesa.
Il modulo di Elementor funziona nella versione gratuita?
La versione gratuita di Elementor non include il widget “Modulo”, ma puoi utilizzare un widget HTML per inserire il codice.