Come creare un campo con il prefisso internazionale in Gravity Forms

*Prima di iniziare la creazione del modulo valuta di usare un tool AI per la generazione della lista dei prefissi.

1. Accedi alla Dashboard di WordPress

1. Effettua il login al tuo sito WordPress.
2. Vai su Forms nel menu laterale e seleziona il modulo in cui vuoi aggiungere i campi o creane uno nuovo cliccando su Add New.

2. Aggiungere il Campo per il Prefisso Internazionale

1. All'interno dell'editor del modulo, fai clic su Add Field.
2. Scegli Drop Down dal menu dei campi standard.
3. Modifica il campo con i seguenti dettagli:
   • Label: Inserisci un'etichetta, ad esempio Prefisso Internazionale.
   • Choices: Aggiungi i prefissi internazionali più comuni. Puoi farlo manualmente oppure caricare un elenco completo:
     • Se manuale: clicca su Add Choice e aggiungi prefissi come +1 (USA), +44 (UK), +39 (Italia), ecc.
     • Se automatizzato: copia e incolla un elenco di prefissi internazionali in formato testo separato da righe.
   • Attiva Enable Enhanced User Interface per migliorare la navigazione nel menu a discesa.
   • Default Value: Imposta un prefisso predefinito, ad esempio +39, se il modulo è rivolto principalmente a utenti italiani.

3. Configurare il Campo per il Numero di Telefono

1. Aggiungi un altro campo dal tipo Phone.
2. Modifica le impostazioni del campo con i seguenti dettagli:
   • Label: Inserisci un’etichetta, ad esempio Numero di Telefono.
   • Field Type: Scegli International per accettare formati telefonici internazionali.
   • Required Field: Abilita questa opzione per assicurarti che il campo sia compilato.
3. Custom Validation (opzionale):
   • Vai su Advanced > Input Mask e definisci un formato preimpostato, ad esempio 999-999-9999, per guidare gli utenti.

4. Allineare e Visualizzare i Campi in Modo Pulito

Per una migliore esperienza utente, è utile che il campo del prefisso e quello del telefono siano allineati orizzontalmente:

1. Vai su Appearance nella sezione del modulo.
2. Modifica la CSS Class personalizzata del campo prefisso aggiungendo gf_left_half.
3. Modifica la CSS Class del campo telefono aggiungendo gf_right_half.

Questo li disporrà fianco a fianco.

5. Personalizzare il Messaggio di Errore

Se desideri aggiungere una verifica sui campi o un messaggio personalizzato per gli errori:

1. Vai su Validation Rules nella scheda Advanced del modulo.
2. Imposta un messaggio, ad esempio:
   • Campo Prefisso Internazionale non selezionato: "Seleziona un prefisso internazionale valido."
   • Numero di Telefono non valido: "Inserisci un numero di telefono corretto."

6. Testare il Modulo

1. Dopo aver completato la configurazione, clicca su Save Form.
2. Vai su una pagina del tuo sito, aggiungi il modulo tramite shortcode o widget, e fai un test.
3. Assicurati che:
   • Il menu a discesa mostri correttamente i prefissi internazionali.
   • Il campo telefono accetti numeri validi.

7. Aggiungere Logica Condizionale (Opzionale)

Se vuoi rendere il campo del prefisso dinamico in base alla selezione di un'altra opzione (es. Paese):

1. Vai su Advanced Settings del campo prefisso.
2. Abilita Conditional Logic e imposta regole, ad esempio:
   • Mostra il campo prefisso solo se il campo "Paese" è compilato.

8. Suggerimenti Finali

• Sicurezza dei Dati: Configura un’integrazione con reCAPTCHA per proteggere il modulo da spam.
• Backup: Fai un backup del modulo prima di apportare modifiche complesse.