Cómo cambiar el indicador de campo obligatorio

¿Quieres cambiar el indicador de campo obligatorio en tu WPForms? Si deseas usar una cadena de texto diferente o incluso un símbolo, puedes hacerlo fácilmente con PHP. Este artículo te mostrará cómo usar PHP para cambiar este texto para los campos obligatorios de tu formulario.

Cuando un campo está marcado como obligatorio en WPForms, por defecto, se mostrará un asterisco rojo al final de la etiqueta del campo, como puedes ver en la siguiente captura de pantalla.

Creación de su formulario

Para empezar, vamos a crear un nuevo formulario y añadir nuestros campos. Al menos uno de estos campos deberá estar configurado como campo obligatorio.

Si necesitas ayuda para crear un formulario, revisa esta documentación.

Personalización del indicador de campo obligatorio

A continuación, vamos a añadir este fragmento a nuestro sitio.

Si necesitas ayuda sobre cómo añadir fragmentos a tu sitio, consulta este tutorial.

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 */

function wpf_dev_required_indicator( $text ) {

	return ' <span class="wpforms-required-label">' . __( '(Required)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 10, 1 );

Simplemente cambiarás el texto (Obligatorio) para que coincida con el texto que deseas mostrar.

¡Y eso es todo! ¡Has cambiado con éxito el aspecto de tus campos obligatorios! ¿Te gustaría dar estilo al texto de marcador de posición en los campos de tu formulario? Echa un vistazo a nuestro artículo sobre Cómo dar estilo al texto de marcador de posición para campos de formulario.

Filtro de Referencia

wpforms_get_field_required_label

Preguntas frecuentes

P: ¿Cómo cambio solo el color del símbolo del asterisco?

R: Para hacer esto, solo añade este CSS a tu sitio.

Si necesitas ayuda sobre cómo añadir CSS a tu sitio, consulta este tutorial.

.wpforms-form .wpforms-required-label {
    color: #1e73be !important;
}

P: ¿Por qué no me funciona el fragmento?

R: Si has limpiado la caché de tu sitio y sigues sin ver ningún cambio, intenta cambiar la prioridad de tu función. En un fragmento de código, la prioridad se refiere al orden en que deben ejecutarse las tareas o líneas de código. Al igual que en una lista de tareas pendientes, algunas tareas son más importantes y deben hacerse antes que otras. Por lo tanto, en este fragmento en particular, nuestra prioridad está establecida en 10. Si notas que el cambio no se aplica, intenta cambiar ese número por uno más alto para ver si ayuda.

En este ejemplo, estamos estableciendo el número de prioridad en 20.

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 */

function wpf_dev_required_indicator( $text ) {

	return ' <span class="wpforms-required-label">' . __( '(Required)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 20, 1 );