Introducción
¿Le gustaría añadir la validación del campo de código postal a sus WPForms? Por defecto, cuando se utiliza el campo Dirección, sólo hay un lugar para introducir un código postal junto con la dirección. Sin embargo, en este tutorial, vamos a mostrarle cómo puede crear un campo que buscará sus códigos postales y fallará al enviar el formulario si el código postal no está en su área de servicio preferida.
Creación del formulario
Vamos a empezar creando un nuevo formulario y añadiendo todos los campos obligatorios.
Añadiremos un campo de formulario de texto de una sola línea que tendrá una máscara de entrada que funcionará como nuestro campo de código postal. Esto permitirá que cuando se envíe el formulario, el fragmento de código tome el valor introducido en este campo y lo compare con una lista de códigos postales de nuestra área de servicio. Si falla, el usuario verá un mensaje indicando que no prestamos servicio en esa zona en este momento.
Si necesita ayuda para crear formularios, consulte esta útil guía.
Utilización de la máscara de entrada
Dado que queremos que nuestro campo de formulario Texto en una línea aparezca como lo haría un campo de código postal estándar, vamos a añadir una máscara de entrada a este campo. Para ello, haga clic en el campo y vaya a la pestaña Avanzado. En el campo Máscara de entrada, introduzca 99999. Esto significa que este campo en particular sólo aceptará 5 dígitos numéricos.
Para más información sobre máscaras de entrada en WPForms, por favor revise este tutorial para más ejemplos.
Añadir el fragmento
Ahora es el momento de añadir nuestro snippet. Si necesita ayuda sobre cómo y dónde añadir fragmentos, consulte esta documentación.
/**
* 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 );
Vamos a desglosar este fragmento para explicar cada parte. La primera sección del fragmento comprueba si el ID del formulario que está consultando coincide con el ID del formulario que hemos especificado en el fragmento. En este ejemplo, este fragmento sólo se ejecutará en el formulario ID 3382.
La siguiente línea del snippet busca el campo ID 6 y toma el valor introducido en el formulario. Una vez que tiene este valor, va a comparar ese valor introducido con la lista de códigos postales que hemos introducido en la matriz $zip_code_list. Usted tendrá que actualizar el ID del formulario, ID de campo y actualizar los códigos postales que se muestran en esta matriz para que coincida con sus propios códigos postales.
Si necesita ayuda para encontrar sus números de ID de formulario y de campo, consulte nuestro tutorial Cómo localizar el ID de formulario y el ID de campo.
Una vez que haya realizado los ajustes en el fragmento, observará que el formulario no procesará el envío si el código postal introducido no se encuentra en la lista de la matriz $zip_code_list.
Y eso es todo lo que necesita para añadir con éxito la validación del campo de código postal a un campo de texto de una sola línea. ¿Desea limitar también los países que se muestran al utilizar el campo Dirección y autocompletar? Eche un vistazo a nuestro tutorial sobre Cómo restringir la función Autocompletar dirección a un país específico.
Relacionado
Acción Referencia: wpforms_process