Contact Form 7
https://it.wordpress.org/plugins/contact-form-7/

Questo è uno dei migliori plugin per creare e gestire form usati per invio delle email.

Ci sono alcune caratteristiche utili che si possono implementare lato codice, oltre all'installazione e alla creazione dei form base tramite il plugin stesso.

• compilazione di campi in fase di generazione del codice, sfruttando non tanto il plugin quanto php e i data attribute
• esecuzione di codice js prima e/o dopo l'invio della mail

Se avessimo un form e avessimo la necessità di inserire dei valori da noi stabiliti in modo da inviarli tramite mail, potremmo inserire questo codice nel form

<div>
[text download_title]
[text download_url]
</div>

in fase di generazione dell'html, con php andremo a definire ad esempio (dove i valori ovviamente saranno estratti in base alle selezioni fatte)

<p
data-download-title="<?php echo $titolo; ?>"
data-download-url="<?php echo $url; ?>">
</p>

poi dovremo preoccuparci con jQuery di prendere quei valori ed inserirli nei campi del form che saranno ovviamente vuoti

jQuery(document).ready(function(){
	setTimeout(function(){
		var download_title = jQuery(".information-form-data").attr("data-download-title");
		var download_url = jQuery(".information-form-data").attr("data-download-url");
		jQuery("input[name='download_title']").val(download_title);
		jQuery("input[name='download_url']").val(download_url);
	}, 1000);
});

Il timeout è messo come sicurezza che tutti i dati siano stati caricati. Tanto l'utente dovrà comunque preoccuparsi di compilare gli altri campi.

 

Per l'esecuzione di codice js prima e/o dopo l'invio della mail, nel backend di wp, nel singolo form apriamo l'utlimo tab "Additional setting"

e potremo scrivere:

• on_sent_ok: "alert('sent ok');"
• on_submit: "alert('submit');"

Il primo comando (al posto di alert potremo scrivere il nome di una funzione js scritta da noi, ad esempio: on_sent_ok: "test();" ) serve per eseguire del codice js dopo l'invio corretto dell'email, mentre il secondo per eseguire del codice js al clic sul bottone.

Ad esempio se volessimo collegare l'invio di una mail con google analytics (avendo precedentemente impostato quanto serve lato google) scriveremo:

on_sent_ok: "ga('send', 'event', 'Contact Form - Contatti', 'Inviato');"

IMPORTANTE : se si installa anche il plugin YOAST SEO, il precedente codice diventa:

on_sent_ok: "__gaTracker('send', 'event', 'Contact Form - Contatti', 'Inviato');"

 

ESERCIZI

1. Installare CF7
2. Creare un form e testare l'invio mail
3. Aggiungere un widget che carichi il form nel template di pagina del singolo custom post type
4. Personalizzare il form in modo che invii una mail con il testo "Hai richiesto informazioni su:" seguito dal titolo del custom post type che si sta vsualizzando. Il campo nel form deve essere nascosto (tramite css).