Come individuare l'ID del modulo e l'ID del campo

Quando si utilizzano snippet di codice personalizzati o CSS con WPForms, spesso è necessario trovare ID specifici di moduli e campi. Questi ID ti aiutano a individuare esattamente il modulo o il campo che desideri personalizzare.

Questa guida ti mostrerà i modi più rapidi per trovare questi ID.

Trovare l'ID del tuo modulo

Il modo più semplice per trovare rapidamente l'ID di un modulo è nella pagina Panoramica moduli. Per accedere a questa pagina, vai su WPForms » Tutti i moduli e cerca la colonna Shortcode. L'ID del tuo modulo è il numero all'interno dello shortcode.

Ad esempio, lo screenshot seguente indica lo shortcode [wpforms id="1233"]. L'ID per questo modulo sarebbe 1233.

Trovare l'ID del tuo campo

Per trovare l'ID di un campo specifico, modifica il tuo modulo nell'Editor moduli. Quindi, fai clic sul campo che desideri identificare e guarda il pannello Opzioni campo sulla sinistra. L'ID del campo appare nella parte superiore della scheda Generale.

Ad esempio, se vedi "Testo a riga singola (ID #15)", il tuo ID campo è 15.

Come utilizzare questi ID

Quando vedi snippet di codice nella nostra documentazione, dovrai sostituire gli ID di esempio con i tuoi ID effettivi. Ecco come usarli correttamente:

• Per gli ID dei moduli, sostituisci TUO-ID-MODULO con il numero effettivo del tuo modulo. Ad esempio, se il tuo ID modulo è 561, cambia wpforms-TUO-ID-MODULO in wpforms-561
• Per gli ID dei campi, sostituisci TUO-ID-CAMPO con il numero effettivo del tuo campo. Ad esempio, se il tuo ID campo è 13, cambia field_TUO-ID-CAMPO in field_13.

Quindi, se il tuo ID modulo è 999 e il tuo ID campo è 4, dovresti cambiare:

jQuery('#wpforms-123-field_13')

in:

jQuery('#wpforms-999-field_4')

Questi ID sono essenziali per molte personalizzazioni:

• Gli ID dei moduli sono necessari quando si applica CSS a un modulo specifico, si aggiungono convalide personalizzate o si creano funzionalità specifiche per il modulo.
• Gli ID dei campi sono necessari quando si stilizzano campi specifici, si aggiungono regole di convalida personalizzate o si creano calcoli specifici per i campi.

Ad esempio, quando si personalizzano i colori del pulsante di invio, l'uso di ID modulo specifici garantisce che le modifiche interessino solo i moduli desiderati:

/* Customize submit button color for specific forms */
#wpforms-form-561 .wpforms-submit {
    background-color: red;
}

E questo è tutto ciò che ti serve per trovare e utilizzare gli ID dei moduli e dei campi!

Successivamente, vorresti saperne di più sulla personalizzazione dei tuoi moduli? Dai un'occhiata alla nostra guida su come aggiungere stili CSS personalizzati per i tuoi moduli.