Introduzione
Volete aggiungere la convalida del campo del codice postale ai vostri WPForm? Per impostazione predefinita, quando si usa il campo Indirizzo, c'è solo un posto per inserire un codice postale insieme all'indirizzo. Tuttavia, in questo tutorial vi mostreremo come potete creare un campo che cercherà i codici di avviamento postale utilizzabili e fallirà l'invio del modulo se il codice di avviamento postale non rientra nella vostra area di servizio preferita.
Creazione del modulo
Inizieremo creando un nuovo modulo e aggiungendo tutti i campi obbligatori.
Aggiungeremo un campo di testo a riga singola che avrà una maschera di input che fungerà da campo Codice postale. In questo modo, quando il modulo viene inviato, lo snippet prenderà il valore inserito in questo campo e lo confronterà con un elenco di codici di avviamento postale presenti nella nostra area di servizio. Se il confronto non va a buon fine, l'utente vedrà un messaggio che indica che al momento non serviamo quell'area.
Se avete bisogno di aiuto per la creazione di moduli, consultate questa utile guida.
Utilizzo della maschera di ingresso
Poiché vogliamo che il nostro campo del modulo Testo a riga singola appaia come un campo di codice postale standard, aggiungeremo una maschera di input a questo campo. A tale scopo, fare clic sul campo e spostarsi nella scheda Avanzate. Nel campo Maschera di input, inserire 99999. Ciò significa che questo campo accetterà solo 5 cifre numeriche.
Per ulteriori informazioni sulle maschere di input in WPForms, consultare questo tutorial per ulteriori esempi.
Aggiunta dello snippet
Ora è il momento di aggiungere il nostro snippet. Se avete bisogno di assistenza su come e dove aggiungere gli snippet, consultate questa documentazione.
/**
* Add zip code field validation.
*
* @link https://wpforms.com/developers/how-to-add-zip-code-field-validation-on-your-forms/
*/
function wpf_dev_validate_zip_code( $fields, $entry, $form_data ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #3382.
if ( absint( $form_data[ 'id' ] ) !== 3382 ) {
return $fields;
}
// Get the value of the zip code field the user entered
// Field ID for zip code field is '6'
$zip_code = $fields[6][ 'value' ];
// Zip code array, each zip code separated by a comma
$zip_code_list = array(
'85224',
'85225',
'85226',
'85233',
'85234',
'85244',
'85246',
'85248',
'85249',
'85286',
'85295',
'85296',
'85297',
'85298',
'85299'
);
if (!in_array($zip_code, $zip_code_list)) {
// Check the field ID 75 and show an error message at the top of the form and under the specific field
wpforms()->process->errors[ $form_data[ 'id' ] ]['6'] = esc_html__( 'We apologize for the inconvenience, but we currently do not service your area. Please check back in the future.', 'plugin-domain' );
}
}
add_action( 'wpforms_process', 'wpf_dev_validate_zip_code', 10, 3 );
Vediamo di scomporre questo snippet per spiegare ogni parte. La prima sezione dello snippet cerca di vedere se l'ID del modulo che lo snippet sta guardando corrisponde all'ID del modulo che abbiamo specificato nello snippet. Per questo esempio, lo snippet verrà eseguito solo sull'ID 3382 del modulo.
La riga successiva dello snippet cerca l'ID del campo 6 e prende il valore inserito nel modulo. Una volta ottenuto questo valore, confronterà il valore inserito con l'elenco dei codici di avviamento postale che abbiamo inserito nell'array $zip_code_list. È necessario aggiornare l'ID del modulo, l'ID del campo e aggiornare i codici di avviamento postale visualizzati in questo array per farli corrispondere ai propri codici di avviamento postale.
Per assistenza nella ricerca dei numeri di ID del modulo e del campo, consultare il nostro tutorial su Come individuare l'ID del modulo e l'ID del campo.
Una volta apportate le modifiche allo snippet, si noterà che il form non elaborerà l'invio del modulo se il codice postale inserito non è presente nell'array $zip_code_list.
Questo è tutto ciò che serve per aggiungere la convalida del campo del codice postale a un campo di testo a riga singola. Volete anche limitare i Paesi visualizzati quando utilizzate il campo Indirizzo e il completamento automatico? Date un'occhiata al nostro tutorial su Come limitare il completamento automatico dell'indirizzo a un paese specifico.
Correlato
Riferimento azione: wpforms_process