Resumen de IA
¿Tienes un formulario largo al que te gustaría añadir un índice? Puedes añadir fácilmente enlaces HTML en la parte superior de tu formulario, así como a los encabezados de sección de tu formulario, que permiten a los usuarios saltar rápida y fácilmente entre las secciones de tu formulario.
En este tutorial, te mostraremos el HTML que necesitas para habilitar el índice en tus formularios de WordPress.
Creación de su formulario
En nuestro ejemplo, crearemos un formulario de personal de empleados para recopilar información como datos personales, dependientes, contactos de emergencia e intereses.
Así que, para empezar, crea un nuevo formulario o edita uno existente para acceder al constructor de formularios. En el constructor de formularios, procede a añadir los campos relevantes. Las diversas categorías de información, como se mencionó anteriormente, se dividirán utilizando el campo de formulario HTML.
Añadir los enlaces HTML a los encabezados
Ahora que el formulario está configurado, es hora de añadir nuestros enlaces a los encabezados de sección.
Por ejemplo, añadamos un enlace a la sección Información Personal.
Con este HTML, estamos añadiendo un encabezado HTML de h2 a nuestro formulario, y dentro de ese encabezado, vamos a añadir un enlace. El id del enlace es lo más importante, ya que determina el destino del enlace.
Deberás repetir este paso para cada sección que tengas.
Nota: El id de cada enlace debe ser único. Usar el mismo id para varias secciones en una página confundirá al navegador y el selector no funcionará.
Crear el índice
Con nuestro último paso de HTML, añadiremos un campo HTML en la parte superior del formulario que contendrá una lista desordenada HTML con enlaces que apuntan a cada sección de nuestro formulario.
Cuando se haga clic en estos enlaces, la página saltará a la sección apropiada del formulario.
Nota: El id del paso anterior y el href de este paso deben coincidir exactamente con un signo de almohadilla (#) delante del texto o uno no enlazará con el otro.
Estilizar el índice
Este paso es completamente opcional, sin embargo, si deseas añadir algo de estilo a estos enlaces, simplemente copia este CSS en tu sitio. Si necesitas ayuda para añadir CSS a tu sitio, por favor revisa este tutorial.
div#wpforms-1279-field_34 ul {
text-align: center;
}
div#wpforms-1279-field_14 ul li {
list-style: none !important;
display: inline-block;
margin: 5px 10px !important;
}
div#wpforms-1279-field_14 ul li h2 a {
font-size: 18px;
}
#wpforms-form-1279 h2 a {
font-size:26px;
width: 100%;
display: block;
color: #000000;
}
div#wpforms-1279-field_14 ul li h2 a:hover {
color: #b95d52;
text-decoration: underline;
}
En nuestro ejemplo, el ID del campo de formulario HTML es 14 y nuestro ID de formulario es 1279. Esto significa que nuestro CSS solo se aplicará a este ID de formulario y campo específico.
Si necesitas ayuda para encontrar los IDs de tus campos y formularios, consulta este tutorial.
¡Eso es todo! Ahora sabes cómo crear fácilmente una tabla de contenidos al principio de tu formulario largo.
¿A continuación, te gustaría crear un campo interno que puedas usar para filtrar tus entradas? Echa un vistazo a nuestro tutorial sobre cómo añadir un campo filtrable a un formulario para uso interno.