Utilizzo delle stringhe di query per precompilare un campo di testo

Vuoi precompilare un campo di testo per un utente in base al link che clicca? I link possono essere impostati per inviare informazioni in un campo in modo che l'utente possa risparmiare un passaggio durante la compilazione del tuo modulo.

Questo tutorial ti mostrerà come sfruttare le stringhe di query per precompilare un campo in un modulo.


Nota: Stai cercando di creare stringhe di query più avanzate per WPForms? Dai un'occhiata al nostro tutorial su abilitare il prefill tramite URL per saperne di più sulla creazione di stringhe di query. Se desideri precompilare i campi del modulo con informazioni estratte da un altro modulo, consulta il nostro articolo su precompilazione dei moduli con stringhe di query.

Cos'è una stringa di query?

Una stringa di query è una parte di un URL che fornisce o recupera informazioni. Su alcuni siti, ad esempio, le stringhe di query vengono utilizzate per eseguire ricerche di post o prodotti.

Se hai mai notato un URL con un punto interrogativo nel mezzo, hai visto una stringa di query in azione. Un URL con una stringa di query apparirà più o meno così:

http://example.com/plugin?name=wpforms

In questo esempio, ti mostreremo come utilizzare una stringa di query per inserire una parola o una frase specifica in un campo del modulo.

Per fare ciò, creeremo un link speciale che gli utenti possono cliccare se desiderano saperne di più su "Eventi e Feste". L'URL di quel link porterà l'utente al nostro modulo "Richiedi maggiori informazioni". La stringa di query che creeremo precompilerà il nostro campo "Vorrei saperne di più su:" con "Eventi e Feste".

Nota: Stai cercando di precompilare la data odierna o il nome e l'email di un utente connesso? L'utilizzo dei tag intelligenti in WPForms è un ottimo modo per raggiungere questo obiettivo.

Creazione di un nuovo modulo

Prima di iniziare, dovrai assicurarti che WPForms sia installato e attivato sul tuo sito WordPress e che tu abbia verificato la tua licenza. Quindi puoi creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli.

Se stai creando un nuovo modulo, dovrai fornire un titolo al tuo modulo e scegliere un modello. Stiamo usando il modello Modulo di contatto semplice qui.

Modello di modulo di contatto semplice

Per questo esempio, creeremo un link che precompilerà un campo Testo a riga singola nel nostro modulo. Per aggiungere questo campo al tuo modulo, fai clic su di esso o trascinalo nell'area di anteprima.

Aggiungi campo di testo a riga singola

Aggiunta di un tag intelligente per variabili di stringa di query

Successivamente, dobbiamo configurare il valore predefinito per il campo Testo a riga singola (che abbiamo rinominato "Vorrei saperne di più su") per essere pronto ad accettare informazioni da una stringa di query.

Per fare ciò, fai clic sul campo per aprire la schermata Opzioni campo. Da qui, dovrai aprire la scheda Avanzate, scorrere fino alla casella etichettata Valore predefinito, quindi fare clic su Mostra tag intelligenti.

Mostra Smart Tag

Dall'elenco a discesa, seleziona l'opzione chiamata Variabile stringa di query.

Smart tag variabile stringa di query

Una volta effettuata questa selezione, noterai che {query_var key=""} è stato aggiunto alla casella Valore predefinito. Tra quelle virgolette vuote, devi aggiungere un nome (chiamato chiave) per rappresentare questo campo. Questa chiave verrà utilizzata in seguito nella nostra stringa di query.

Daremo al nostro campo una chiave chiamata “contact-reason”. È importante notare che il nome che usi per questa chiave sarà visibile nell'URL che imposteremo in seguito, quindi il nome dovrebbe essere logico rispetto allo scopo della chiave. Inoltre, assicurati che la tua chiave non includa spazi: sostituisci gli spazi con un trattino “-” o un underscore “_”.

Stringa di query come valore predefinito

Pubblicazione del tuo modulo

Ora che hai configurato il modulo, puoi tornare alla tua bacheca di WordPress. Quindi, puoi creare una nuova pagina o modificare una pagina esistente per pubblicare il modulo che hai appena creato.

Per pubblicare il tuo modulo, fai prima clic sul pulsante + (più) per aggiungere un nuovo blocco.

Aggiungi un nuovo blocco nell'editor

Per individuare il blocco WPForms, puoi cercare “WPForms” o aprire la categoria Widget. Quindi, fai clic sul blocco chiamato WPForms.

Seleziona Blocco WPForms

Questo aggiungerà il blocco WPForms alla schermata dell'editor. Successivamente, procedi a incorporare il tuo modulo selezionandolo dal menu a discesa Seleziona un modulo.

Scegli un modulo da visualizzare nell'editor a blocchi

Ora che il tuo modulo è incorporato nella pagina, puoi pubblicarlo e visitarlo sul frontend del tuo sito.

Creazione di un link con una stringa di query

Successivamente, dovrai creare un'altra nuova pagina o modificare una pagina esistente in cui possiamo aggiungere un link a questo modulo.

In questo esempio, il nostro modulo si trova nella nostra pagina dei contatti, quindi un link standard sarebbe simile a: https://example.com/contact.

Nella nuova pagina, aggiungeremo del testo e collegheremo il nostro testo “Eventi e Feste” alla pagina in cui si trova il nostro modulo (https://example.com/contact).

Aggiungi testo al link

Al momento, quel link aprirà semplicemente la pagina Contatti. Successivamente, modificheremo questo link per contenere una stringa di query. Questo link modificato non solo aprirà la pagina dei contatti, ma passerà una stringa di query che precompilerà il campo Testo a riga singola nel nostro modulo:

https://example.com/contact?contact-reason=EventsandParties

Ecco come abbiamo costruito questo nuovo link, in ordine dei suoi componenti:

  • Il link normale (https://example.com/contact)
  • Un punto interrogativo
  • La chiave che hai designato in precedenza (in questo esempio, contact-reason)
  • Un segno di uguale
  • Il testo che desideri sia precompilato

Facendo clic su questo link, la nostra casella di testo a riga singola verrà precompilata con qualsiasi testo dopo il segno di uguale. In questo caso, il link sopra inserirà “EventsandParties” in quel campo:

Precompila testo da stringa di query

Per aggiungere spazi al testo che appare in questo campo, basta inserire %20 ovunque si desideri uno spazio. Ad esempio, il codice https://example.com/contact?contact-reason=Events%20and%20Parties aggiungerà uno spazio al testo risultante precompilato, che si legge “Events and Parties”:

Precompila testo da stringa di query con spazi

Nota: Desideri precompilare due o più campi con la tua stringa di query? Assicurati solo di aggiungere un simbolo “&” (e commerciale) prima di includere una chiave e un testo aggiuntivi.

Ad esempio: https://example.com/contact?contact-reason=Events%20and%20Parties&second-field=OtherValue

Per utilizzare altri simboli, ad esempio "(", ")" o "@", dovrai utilizzare uno strumento come URL Encode/Decode, per convertire questi simboli nei loro codici corrispondenti.

Ecco fatto! Speriamo che questo tutorial ti sia stato d'aiuto per impostare link con stringhe di query che precompileranno un campo di testo in un modulo.

Successivamente, desideri popolare dinamicamente i campi con il contenuto del tuo sito? Assicurati di consultare la nostra guida sulle scelte dinamiche dei campi per tutti i dettagli.

Il miglior plugin per la creazione di moduli drag and drop per WordPress

Facile, veloce e sicuro. Unisciti a oltre 6 milioni di proprietari di siti web che si affidano a WPForms.