Introducción
¿Le gustaría cambiar las sub-etiquetas del campo Nombre en sus formularios? Usando un pequeño fragmento de PHP, esto es muy fácil de hacer.
En WPForms, el campo Nombre puede mostrarse en tres formatos:
- Simple (muestra un único campo, por lo que no hay subetiquetas)
- Primero Último
- Nombre Segundo apellido
En este tutorial, le mostraremos los conceptos básicos de cómo puede cambiar las sub-etiquetas utilizando un fragmento de código PHP.
Creación del formulario
Empezaremos creando nuestro formulario y añadiendo el campo que incluirá el campo Nombre.
Si necesita ayuda para crear su formulario, consulte esta documentación.
Añadir el fragmento
Para cambiar las subetiquetas del campo de dirección, tendremos que añadir este fragmento a nuestro sitio.
Si necesitas ayuda sobre cómo y dónde añadir snippets a tu sitio, consulta este tutorial.
/**
* Customize name field properties.
*
* @link https://wpforms.com/developers/how-to-change-sublabels-for-the-name-field/
*/
function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
// Change sublabel values
$properties[ 'inputs' ][ 'first' ][ 'sublabel' ][ 'value' ] = __( 'First Name', 'plugin-domain' );
$properties[ 'inputs' ][ 'middle' ][ 'sublabel' ][ 'value' ] = __( 'Middle Initial', 'plugin-domain' );
$properties[ 'inputs' ][ 'last' ][ 'sublabel' ][ 'value' ] = __( 'Last Name', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );
Este fragmento cambiará todas las subetiquetas de todos los formularios.
Y ya está. Ha cambiado correctamente las subetiquetas del campo Nombre. ¿Desea cambiar el símbolo de campo obligatorio en los campos obligatorios? Eche un vistazo a nuestro artículo sobre Cómo cambiar el indicador de campo obligatorio.
Relacionado
Referencia del filtro: wpforms_field_properties
PREGUNTAS FRECUENTES
P: ¿Puedo cambiarlas sólo para un formulario?
R: Por supuesto, si sólo desea cambiar estas subetiquetas para un formulario en particular, utilice este fragmento en su lugar y recuerde actualizar el ID de formulario 123 para que coincida con su propio ID de formulario. Si necesita ayuda para encontrar su ID de formulario, consulte esta útil guía.
/**
* Customize name field properties.
*
* @link https://wpforms.com/developers/how-to-change-sublabels-for-the-name-field/
*/
function wpf_dev_name_field_properties( $properties, $field, $form_data ) {
// Only process this snippet on the form ID 123
if ( absint( $form_data[ 'id' ] ) !== 123 ) {
return $properties;
}
// Change sublabel values
$properties[ 'inputs' ][ 'first' ][ 'sublabel' ][ 'value' ] = __( 'First Name', 'plugin-domain' );
$properties[ 'inputs' ][ 'middle' ][ 'sublabel' ][ 'value' ] = __( 'Middle Initial', 'plugin-domain' );
$properties[ 'inputs' ][ 'last' ][ 'sublabel' ][ 'value' ] = __( 'Last Name', 'plugin-domain' );
return $properties;
}
add_filter( 'wpforms_field_properties_name' , 'wpf_dev_name_field_properties', 10, 3 );
Como se puede ver en el fragmento de código, todo lo que tenemos que hacer es añadir la comprobación del ID del formulario con if ( absint( $form_data[ 'id' ] ) !== 123 ) { return $properties; } El resto del fragmento sigue siendo exactamente igual que en el ejemplo con todas las formas.