# Modulo di Contatto Personalizzato in WordPress con Divi

Per creare un modulo di contatto personalizzato in WordPress con Divi, puoi utilizzare HTML, CSS e JavaScript per costruire il modulo e inserirlo nel modulo Codice di Divi. Di seguito trovi un esempio completo:

## HTML (da inserire nel modulo Codice di Divi)
“`html
<form id=”custom-contact-form” action=”#” method=”POST”>
<label for=”name”>Nome:</label>
<input type=”text” id=”name” name=”name” required>

<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>

<label for=”message”>Messaggio:</label>
<textarea id=”message” name=”message” required></textarea>

<button type=”submit”>Invia</button>
</form>
“`

## CSS (da inserire nel modulo Codice di Divi o nel CSS personalizzato del sito)
“`css
#custom-contact-form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}

#custom-contact-form label {
display: block;
margin-bottom: 5px;
}

#custom-contact-form input,
#custom-contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}

#custom-contact-form button {
padding: 10px 20px;
background-color: #0073e6;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

#custom-contact-form button:hover {
background-color: #005bb5;
}
“`

## JavaScript (per inviare il modulo senza ricaricare la pagina, da inserire nel modulo Codice di Divi)
“`javascript
document.getElementById(‘custom-contact-form’).addEventListener(‘submit’, function(event) {
event.preventDefault();

const formData = new FormData(this);

fetch(‘https://tuo-sito.com/api/contact’, {
method: ‘POST’,
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert(‘Messaggio inviato con successo!’);
} else {
alert(‘Si è verificato un errore. Riprova.’);
}
})
.catch(error => {
console.error(‘Errore:’, error);
alert(‘Si è verificato un errore. Riprova.’);
});
});
“`

## PHP (utilizza il plugin Code Snippets per aggiungere questo codice al tuo sito in modo sicuro)
“`php
add_action(‘rest_api_init’, function() {
register_rest_route(‘custom/v1’, ‘/contact’, array(
‘methods’ => ‘POST’,
‘callback’ => ‘handle_custom_contact_form’
));
});

function handle_custom_contact_form(WP_REST_Request $request) {
$params = $request->get_params();

$name = sanitize_text_field($params[‘name’]);
$email = sanitize_email($params[‘email’]);
$message = sanitize_textarea_field($params[‘message’]);

// Invia email o salva i dati nel database
$to = get_option(‘admin_email’);
$subject = “Nuovo messaggio da $name”;
$body = “Nome: $name\nEmail: $email\nMessaggio: $message”;
$headers = array(‘Content-Type: text/plain; charset=UTF-8’);

if (wp_mail($to, $subject, $body, $headers)) {
return new WP_REST_Response(array(‘success’ => true), 200);
} else {
return new WP_REST_Response(array(‘success’ => false), 500);
}
}
“`

## Spiegazione
1. **HTML**: Crea un modulo di contatto con campi per nome, email e messaggio.
2. **CSS**: Applica lo stile al modulo, assicurandoti che sia responsive.
3. **JavaScript**: Gestisce l’invio del modulo senza ricaricare la pagina, utilizzando `fetch` per comunicare con il server.
4. **PHP**: Utilizza un endpoint REST per gestire l’invio del modulo e inviare un’email.

Puoi copiare e incollare ogni parte del codice nelle rispettive sezioni del tuo sito WordPress/Divi, utilizzando i moduli di codice e plugin come Code Snippets per il PHP.