Attenzione!

Questo articolo contiene codice CSS ed è destinato agli sviluppatori. Offriamo questo codice per cortesia, ma non forniamo supporto per personalizzazioni del codice o sviluppo di terze parti.

Per ulteriore assistenza, consulta il tutorial di WPBeginner su come aggiungere CSS personalizzato.

Chiudi

Modifica del testo chiave sui moduli conversazionali

Aggiornato:
Visualizza Markdown

Stai usando l'addon Conversational Forms e vuoi cambiare il testo chiave che vedi nei campi di input di selezione? Per impostazione predefinita, l'addon aggiungerà Chiave A, Chiave B, Chiave C, ecc., per i campi di input a scelta multipla quando visualizzi il modulo in modalità conversazionale. Tuttavia, puoi cambiare questo testo con CSS personalizzato.

Per impostazione predefinita, i campi casella di controllo e scelta multipla mostreranno Chiave e poi una lettera per ogni opzione sul tuo modulo conversazionale

In questo tutorial, condivideremo lo snippet CSS che cambierà il testo Chiave in qualcos'altro.

Creazione del tuo modulo

Per iniziare, creeremo un nuovo modulo Conversazionale e vi aggiungeremo i nostri campi. Questo includerà almeno un campo Checkbox e un campo Scelta Multipla (radio).

crea il modulo e aggiungi i tuoi campi, includendo almeno un campo casella di controllo e un campo scelta multipla

Ti stai chiedendo la differenza tra i campi Checkbox e Scelta Multipla?

Le checkbox consentono all'utente di scegliere elementi da un numero fisso di alternative. Al contrario, i pulsanti di opzione (campo Scelta Multipla) consentono all'utente di scegliere un solo elemento da un elenco di diverse alternative predefinite. Se lo desideri, puoi limitare il numero di opzioni che gli utenti scelgono nel campo Checkbox.

Aggiungere il CSS per cambiare il testo Chiave

Per questo tutorial, non vogliamo mostrare la parola 'Chiave' sul nostro modulo. Vogliamo cambiare questo testo in 'Articolo'.

Inseriremo il nostro CSS all'interno di quella che viene chiamata media query. Questo è solo un modo per far sapere al CSS che non dovrebbe essere applicato a meno che la min-width del dispositivo non sia quella che abbiamo specificato nel nostro CSS. Per saperne di più sulle media query, consulta la guida per sviluppatori di Mozilla su cosa sia una media query e come usarla.

Ora è il momento di aggiungere il CSS al tuo sito in modo da poter cambiare questo testo. Copia e incolla semplicemente il CSS qui sotto sul tuo sito. Se hai bisogno di aiuto per aggiungere CSS al tuo sito, rivedi questo tutorial.

#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item) label:before {
    counter-increment: wpforms-radio;
    content: counter(wpforms-radio, upper-alpha);
    left: 10px;
}
 
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before, 
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before {
      content: counter(wpforms-radio, upper-alpha);
    content: "Item " counter(wpforms-radio, upper-alpha);
  }

Il CSS cambierà la parola Chiave in Articolo su tutti i campi modulo Checkbox e Scelta Multipla, inclusi eventuali campi di pagamento come i campi Elementi Checkbox e Elementi Multipli. Sostituisci semplicemente la parola Articolo con ciò che desideri visualizzare sui tuoi moduli.

Nota: Quando si utilizza questo CSS, questo testo non sarà traducibile poiché viene aggiunto tramite CSS. Se hai un sito multilingue, questo tutorial non è raccomandato.

Dopo aver aggiunto i CSS, puoi vedere la modifica al testo chiave

Domande frequenti

Queste sono le risposte ad alcune delle domande più frequenti sulla personalizzazione dell'anteprima dell'addon Conversational Forms.

Come posso rimuovere completamente il testo?

Per rimuovere completamente il testo, aggiungi questo CSS al tuo sito. Per assistenza nell'aggiungere CSS al tuo sito, vedi questo tutorial.

#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before {
  content:none;
}
 
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label {
  padding: 9px 9px 9px 9px;
}

Fatto! Hai cambiato con successo il testo chiave sui moduli conversazionali.

Successivamente, vorresti includere il tuo foglio di stile dedicato per i moduli conversazionali? Dai un'occhiata al nostro tutorial su come accodare un foglio di stile per i moduli conversazionali.

Taggato:
Ancora bloccato? Come possiamo aiutarti?
Ultimo aggiornamento il 09 dic 2024