Cómo añadir un marcador de posición al campo de cupón

Introducción

¿Buscas añadir un marcador de posición al campo Cupón? Implementando un pequeño script, puedes integrar perfectamente esta funcionalidad de marcador de posición. Este tutorial te guiará a través de cada paso del proceso, haciendo que sea sencillo mejorar tu formulario con esta valiosa característica. ¡Vamos a sumergirnos y empezar!

Creación del formulario

Para empezar, necesitarás crear tu formulario y añadir tus campos, que incluirán el campo Cupón.

Si necesitas ayuda para usar este campo, por favor consulta esta útil guía.

Añadir el fragmento

Ahora es el momento de añadir el fragmento. Si necesitas ayuda sobre cómo y dónde añadir fragmentos a tu sitio, por favor revisa este tutorial.

/* Set a placeholder to the Coupon field 
 *
 * @link https://wpforms.com/developers/how-to-schedule-a-form-base-on-the-time-of-day/
*/
function wpf_add_coupon_placeholder() {
	
	// Set the placeholder text here to keep it available for translation
	$couponPlaceholder=__( 'Enter your coupon code here', 'textdomain' );
	
    ?>
    <script type="text/javascript">
		var placeholderText='<?=$couponPlaceholder?>';
        document.addEventListener('DOMContentLoaded', function() {
            var couponInput = document.querySelector('.wpforms-field-payment-coupon-input');
            if (couponInput) {
                couponInput.placeholder = placeholderText;
            }
        });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_add_coupon_placeholder', 30);

Vamos a desglosar este fragmento. Primero, vamos a establecer una variable llamada $couponPlaceholder para el texto que queremos que aparezca dentro del campo del cupón. Al colocar el texto dentro de esta variable, significa que al usarla en sitios multilingües, el texto se traducirá automáticamente.

A continuación, .wpforms-field-payment-coupon-input busca la clase CSS que se aplica al campo Cupón y, cuando encuentra una en tu formulario, este script aplicará el marcador de posición que definiste en $couponPlaceholder.

Ahora, cuando los visitantes vean tu campo, verán el texto del marcador de posición.

Y eso es todo lo que necesitas para configurar tu marcador de posición. ¿Te gustaría también hacer que este campo sea condicional según una selección en tu formulario? Consulta nuestro tutorial sobre Cómo crear lógica condicional para cupones.

Relacionado

Referencia de acción: wpforms_wp_footer_end