Volete riempire automaticamente i campi dei moduli quando gli utenti fanno clic sui link della vostra pagina? Utilizzando i link di ancoraggio e JavaScript, è possibile riempire i campi del modulo con un testo predefinito quando i visitatori fanno clic su determinati link.
Questa guida vi mostrerà come implementare il popolamento dinamico dei moduli.
Comprendere il concetto
Quando un utente fa clic su un link di ancoraggio (come #quotidiano o #settimanale), catturiamo l'interazione e popoliamo automaticamente un campo del modulo con il testo corrispondente. Questo è utile per:
- Moduli di selezione del servizio
- Moduli di richiesta prodotti
- Moduli di richiesta di assistenza
- Moduli di contatto con argomenti predefiniti
Impostazione del modulo
Per prima cosa, creiamo il nostro modulo. Si tratta di un modulo semplice, con campi per il nome, l'indirizzo e-mail, l'oggetto (testo di una riga) e il messaggio (testo di un paragrafo).
Se avete bisogno di una guida per creare il vostro modulo, consultate la nostra guida sulla creazione del vostro primo modulo.
Quindi, annotare i numeri ID del modulo e dei campi. Ne avremo bisogno per lo snippet di codice. Se non siete sicuri di come trovare questi ID, consultate la guida su come trovare gli ID dei moduli e dei campi.
Impostazione delle notifiche del modulo
In questo passaggio, faremo in modo che il nostro campo Oggetto venga popolato automaticamente nella scheda Notifiche del costruttore di moduli.
Basta andare nella scheda Notifiche e nel campo Oggetto digitare il testo desiderato insieme all'ID del campo, proprio come si usano gli Smart tag in altre parti del costruttore di moduli.
In our example, our field ID is 3, so our Subject line will be: “I’m interested in {field_id=”3″} cleaning for my company”.
Creazione di link di ancoraggio
Quindi, creiamo una nuova pagina sul nostro sito con i link di ancoraggio e il modulo appena creato.
Se avete bisogno di aiuto per capire i link di ancoraggio o per crearli, date un'occhiata a questo tutorial di WPBeginner.
Per creare i link di ancoraggio, è sufficiente scrivere il contenuto della pagina e utilizzare le intestazioni in WordPress. Nell'Editor blocchi, selezionare un titolo, andare alla scheda Avanzate e aggiungere il testo che si desidera utilizzare per il link di ancoraggio. WordPress consiglia di mantenerlo breve, senza spazi, o di usare i trattini per le parole multiple. Ad esempio, "about-us" per una sezione About Us.
Per la nostra esercitazione, avremo delle sezioni per le giornate, le settimane, i mesi e i trimestri.
Per ogni titolo, inseriremo un link di ancoraggio di una parola. Ad esempio, la sezione Quotidiana avrà il link di ancoraggio Quotidiana.
Una volta aggiunti i link di ancoraggio, selezioneremo il testo nel contenuto che salterà a ogni sezione quando si fa clic e popolerà il campo Oggetto del nostro modulo.
Per collegare il testo ai link di ancoraggio, aggiungiamo un link come di consueto in WordPress. Selezionate il testo, fate clic sull'icona della catena e, invece di un URL completo, aggiungete un segno di cancelletto e poi la parola del link di ancoraggio. Ad esempio, #quotidiano.
WordPress assegnerà automaticamente a ogni link un data-id unico basato sul nome del link. Quindi #giornale avrà un data-id di #giornale.
Faremo lo stesso per le sezioni #settimanale, #mensile e #trimestrale della nostra pagina.
Popolamento del modulo con il testo del collegamento di ancoraggio
Ora è il momento di aggiungere lo snippet che metterà insieme tutto questo. Se avete bisogno di aiuto per aggiungere gli snippet al vostro sito, consultate questo tutorial.
Ed ecco fatto! Sapevate che potete fare qualcosa di molto simile all'interno del modulo stesso? Date un'occhiata al nostro tutorial su Come aggiungere un indice per i moduli lunghi.
Azione di riferimento
Domande frequenti
D: Posso utilizzare anche un nome di classe o un ID CSS?
R: Assolutamente sì! Se si preferisce attivare il JavaScript in base a una classe CSS o a un ID, è sufficiente modificare lo script. Per esempio, se i nomi delle vostre classi CSS fossero daily-link, weekly-link, monthly-link e quarterly-link, lo snippet sarebbe questo.
/**
* Populate field from anchor link.
*
* @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
*/
function wpf_dev_autofill_field() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( 'a.daily-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
});
jQuery( 'a.weekly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
});
jQuery( 'a.monthly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
});
jQuery( 'a.quarterly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );
Se si utilizza un ID invece di una classe, basta sostituire il punto con un segno di cancelletto in ogni link. Esempio: a#daily-link.
E questo è tutto. Poi, volete creare degli smart tag personalizzati? Date un'occhiata al nostro tutorial sulla creazione di smart tag personalizzati per maggiori dettagli.