How to Populate a Form Field from an Anchor Link

Visualizza Markdown

Desideri popolare automaticamente i campi del modulo quando gli utenti fanno clic sui collegamenti nella tua pagina? Utilizzando collegamenti di ancoraggio e JavaScript, puoi compilare i campi del modulo con testo predefinito quando i visitatori fanno clic su collegamenti specifici.

Questa guida ti mostrerà come implementare questo popolamento dinamico dei moduli.

Comprensione del concetto

Quando un utente fa clic su un collegamento di ancoraggio (come #daily o #weekly), cattureremo quell'interazione e popoleremo automaticamente un campo del modulo con il testo corrispondente. Questo è utile per:

Moduli di selezione del servizio
Moduli di richiesta prodotto
Moduli di richiesta di supporto
Moduli di contatto con oggetti predefiniti

Configurazione del tuo modulo

Innanzitutto, creiamo il nostro modulo. È un modulo semplice con campi per Nome, Indirizzo email, Oggetto (Testo a riga singola) e Messaggio (Testo paragrafo).

Se hai bisogno di una guida su come creare il tuo modulo, consulta la nostra guida sulla creazione del tuo primo modulo.

Successivamente, annota i numeri ID del tuo modulo e dei campi. Ti serviranno per lo snippet di codice. Se non sei sicuro di come trovare questi ID, rivedi la nostra guida sulla ricerca degli ID dei moduli e dei campi.

dovrai registrare l'ID del modulo e del campo poiché ne avremo bisogno nel prossimo passaggio

Impostazione delle notifiche del modulo

In questo passaggio, faremo in modo che il nostro campo Oggetto popoli automaticamente il campo Oggetto nella scheda Notifiche del generatore di moduli.

Vai semplicemente alla scheda Notifiche e, nel campo Oggetto, digita il testo desiderato insieme all'ID del campo, proprio come usi i Tag Intelligenti altrove nel generatore di moduli.

Per maggiori dettagli sull'utilizzo degli ID dei campi in questo modo, consulta la nostra guida dettagliata su come utilizzare i tag intelligenti.

Nel nostro esempio, l'ID del nostro campo è 3, quindi la riga dell'Oggetto sarà: "Sono interessato alla pulizia {field_id="3"} per la mia azienda".

lo Smart Tag dell'ID del campo popolerà ora anche la riga dell'oggetto delle notifiche via email

Creazione di collegamenti di ancoraggio

Successivamente, creiamo una nuova pagina sul nostro sito con collegamenti di ancoraggio e il modulo che abbiamo appena creato.

Se hai bisogno di aiuto per comprendere i collegamenti di ancoraggio o per crearli, consulta questo tutorial di WPBeginner.

Per creare collegamenti di ancoraggio, digita semplicemente il contenuto della tua pagina e utilizza le intestazioni in WordPress. Nell'editor a blocchi, seleziona un'intestazione, vai alla scheda Avanzate e aggiungi il testo che desideri utilizzare per il collegamento di ancoraggio. WordPress consiglia di mantenerlo breve, senza spazi, o di utilizzare trattini per parole multiple. Ad esempio, "chi-siamo" per una sezione "Chi siamo".

Per il nostro tutorial, avremo sezioni per Giornaliero, Settimanale, Mensile e Trimestrale.

crea il link di ancoraggio all'interno di WordPress aggiungendo questo all'intestazione, ora creeremo il link.

Per ogni intestazione, inseriremo un collegamento di ancoraggio di una sola parola. Ad esempio, la sezione Giornaliera avrà il collegamento di ancoraggio daily.

Una volta aggiunti i collegamenti di ancoraggio, selezioneremo il testo nel contenuto che salterà a ciascuna sezione quando cliccato e popolerà il campo Oggetto del nostro modulo.

Per collegare il testo ai collegamenti di ancoraggio, aggiungeremo un collegamento come al solito in WordPress. Seleziona il testo, fai clic sull'icona della catena e, invece di un URL completo, aggiungi un segno di cancelletto e poi la parola del collegamento di ancoraggio. Ad esempio, #daily.

seleziona il tuo testo per aggiungere il tuo link interno al link di ancoraggio sulla stessa pagina

WordPress assegnerà automaticamente a ogni link un data-id univoco basato sul nome del link. Quindi #daily avrà un data-id di #daily.

Faremo lo stesso per le sezioni #weekly, #monthly e #quarterly della nostra pagina.

Popolare il modulo con il testo del link di ancoraggio

Ora è il momento di aggiungere lo snippet che unirà tutto. Se hai bisogno di aiuto per aggiungere snippet al tuo sito, consulta questo tutorial.

Dovrai aggiornare lo snippet per farlo corrispondere allo stesso nome dei link interni, nonché all'ID del modulo (378) e all'ID del campo (-field_3).

ora puoi facilmente popolare un campo da un link di ancoraggio

E questo è tutto! Sapevi che puoi fare qualcosa di molto simile all'interno del modulo stesso? Dai un'occhiata al nostro tutorial su Come aggiungere un indice per moduli lunghi.

Azione di riferimento

wpforms_wp_footer_end

Domande frequenti

D: Posso usare anche un nome di classe CSS o un ID?

R: Assolutamente! Se preferisci attivare JavaScript tramite una classe o un ID CSS, dovrai semplicemente cambiare lo script. Ad esempio, se i nomi delle tue 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 stessi usando un ID invece di una classe, sostituisci semplicemente il punto con un cancelletto in ciascuno dei link. Esempio: a#daily-link.

E questo è tutto. Successivamente, vorresti creare dei Smart Tag personalizzati? Dai un'occhiata al nostro tutorial su creazione di smart tag personalizzati per maggiori dettagli.

Popolare un campo del modulo da un link di ancoraggio

Riassunto AI