Introducción
¿Desea añadir un marcador de posición al campo Cupón? Mediante la implementación de un pequeño script, puede integrar perfectamente esta funcionalidad de marcador de posición. Este tutorial le guiará a través de cada paso del proceso, por lo que es sencillo para mejorar su formulario con esta valiosa característica. ¡Empecemos de una vez!
Creación del formulario
Para empezar, tendrá que crear su formulario y añadir sus campos, que incluirán el campo Cupón.
Si necesita ayuda para utilizar este campo, consulte esta útil guía.
Añadir el fragmento
Ahora es el momento de añadir el snippet. Si necesitas ayuda sobre cómo y dónde añadir snippets a tu sitio, 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. En primer lugar, 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 cuando se utiliza en sitios multilingües, el texto se traducirá automáticamente.
A continuación, el .wpforms-field-payment-coupon-input busca la clase CSS que se aplica a la etiqueta Cupón y cuando encuentre uno en tu formulario, este script aplicará el marcador de posición que definiste en el campo $couponPlaceholder.
Ahora, cuando los visitantes vean su campo, verán el texto del marcador de posición.
Y eso es todo lo que necesita para configurar su marcador de posición. ¿Le gustaría también hacer este campo condicional basado en una selección en su formulario? Echa un vistazo a nuestro tutorial sobre Cómo crear lógica condicional para cupones.
Relacionado
Acción de referencia: wpforms_wp_footer_end