Rellenar un campo de formulario desde un enlace de anclaje

¿Le gustaría rellenar automáticamente los campos del formulario cuando los usuarios hagan clic en los enlaces de su página? Usando enlaces de anclaje y JavaScript, puede rellenar campos de formulario con texto predefinido cuando los visitantes hagan clic en enlaces específicos.

Esta guía le mostrará cómo implementar esta población dinámica de formularios.

Comprender el concepto

Cuando un usuario hace clic en un enlace de anclaje (como #diario o #semanal), capturaremos esa interacción y rellenaremos automáticamente un campo de formulario con el texto correspondiente. Esto es útil para:

• Formularios de selección de servicios
• Formularios de consulta de productos
• Formularios de solicitud de soporte
• Formularios de contacto con asuntos predefinidos

Configuración de tu formulario

Primero, creemos nuestro formulario. Es uno simple con campos para Nombre, Dirección de correo electrónico, Asunto (Texto de una sola línea) y Mensaje (Texto de párrafo).

Si necesita ayuda para crear su formulario, consulte nuestra guía sobre cómo crear su primer formulario.

A continuación, anote los números de ID de su formulario y campos. Los necesitará para el fragmento de código. Si no está seguro de cómo encontrar estas ID, revise nuestra guía sobre cómo encontrar ID de formularios y campos.

Configuración de las notificaciones del formulario

En este paso, haremos que nuestro campo Asunto rellene automáticamente el campo Asunto en la pestaña Notificaciones del creador de formularios.

Simplemente vaya a la pestaña Notificaciones y, en el campo Asunto, escriba el texto que desee junto con la ID del campo, tal como usa las etiquetas inteligentes en otras partes del creador de formularios.

En nuestro ejemplo, la ID de nuestro campo es 3, por lo que la línea de Asunto será: “Estoy interesado en la limpieza {field_id=”3″} para mi empresa”.

Creación de enlaces de anclaje

A continuación, creemos una nueva página en nuestro sitio con enlaces de anclaje y el formulario que acabamos de crear.

Si necesita ayuda para comprender los enlaces de anclaje o crearlos, consulte este tutorial de WPBeginner.

Para crear enlaces de anclaje, simplemente escriba el contenido de su página y use Encabezados en WordPress. En el Editor de Bloques, seleccione un Encabezado, vaya a la pestaña Avanzado y agregue el texto que desea usar para el enlace de anclaje. WordPress recomienda mantenerlo corto, sin espacios, o usar guiones para múltiples palabras. Por ejemplo, "sobre-nosotros" para una sección "Sobre nosotros".

Para nuestro tutorial, tendremos secciones para Diario, Semanal, Mensual y Trimestral.

Para cada encabezado, insertaremos un enlace de anclaje de una sola palabra. Por ejemplo, la sección Diaria tendrá el enlace de anclaje diario.

Una vez que hayamos agregado los enlaces de anclaje, seleccionaremos texto en el contenido que saltará a cada sección al hacer clic y rellenará el campo Asunto de nuestro formulario.

Para vincular texto a los enlaces de anclaje, agregaremos un enlace como de costumbre en WordPress. Selecciona el texto, haz clic en el ícono de la cadena y, en lugar de una URL completa, agrega un signo de almohadilla y luego la palabra del enlace de anclaje. Por ejemplo, #daily.

WordPress asignará automáticamente a cada enlace un data-id único basado en el nombre del enlace. Así que #daily tendrá un data-id de #daily.

Haremos lo mismo para las secciones #weekly, #monthly y #quarterly de nuestra página.

Poblar el formulario con el texto del enlace de anclaje

Ahora es el momento de agregar el fragmento que unirá todo esto. Si necesitas ayuda para agregar fragmentos a tu sitio, consulta este tutorial.

¡Y eso es todo! ¿Sabías que puedes hacer algo muy similar dentro del propio formulario? Echa un vistazo a nuestro tutorial sobre Cómo agregar una tabla de contenido para formularios largos.

Acción de referencia

wpforms_wp_footer_end

Preguntas frecuentes

P: ¿También puedo usar un nombre de clase o ID de CSS?

R: ¡Absolutamente! Si prefieres activar el JavaScript mediante una clase o ID de CSS, simplemente cambiarías el script. Por ejemplo, si los nombres de tus clases de CSS fueran daily-link, weekly-link, monthly-link y quarterly-link, el fragmento sería este.

/**
 * Populate field from anchor link.
 *
 * @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
 */
 
function wpf_dev_autofill_field() {
?>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery( 'a.daily-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
        });  
        jQuery( 'a.weekly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
        });  
        jQuery( 'a.monthly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
        });  
        jQuery( 'a.quarterly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
        });  
    });
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );

Si estuvieras usando un ID en lugar de una clase, simplemente reemplaza el punto con un signo de almohadilla en cada uno de los enlaces. Ejemplo: a#daily-link.

Y eso es todo. A continuación, ¿te gustaría crear algunas etiquetas inteligentes personalizadas? Consulta nuestro tutorial sobre creación de etiquetas inteligentes personalizadas para más detalles.