¿Tienes un formulario largo al que te gustaría añadir una tabla de contenidos? Puedes añadir fácilmente enlaces HTML en la parte superior de tu formulario, así como en los títulos de las secciones del formulario, para que los usuarios puedan saltar rápidamente y sin esfuerzo entre las secciones de tu formulario.
En este tutorial, le mostraremos el HTML que necesita para habilitar la tabla de contenidos en sus formularios de WordPress.
Creación del formulario
En nuestro ejemplo, crearemos un formulario de personal de empleado para recopilar información como datos personales, dependientes, contactos de emergencia e intereses.
Para empezar, cree un nuevo formulario o edite uno existente para acceder al generador de formularios. En el constructor de formularios, siga adelante y añada los campos pertinentes. Las diversas categorías de información, como se mencionó anteriormente, se dividirán utilizando el campo de formulario HTML.
Añadir enlaces HTML a los títulos
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.
<h2><a id="personal">Personal Information</a></h2>
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 esto determina el destino del enlace.
Tendrás que repetir este paso para cada sección que tengas.
Nota: El id de cada enlace debe ser único. Utilizar el mismo id para varias secciones de una página confundirá al navegador y el selector no funcionará.
Creación del índice
Con nuestro último paso HTML, añadiremos un campo HTML en la parte superior del formulario que contendrá una lista HTML desordenada con enlaces que apunten a cada sección de nuestro formulario.
Al hacer clic en estos enlaces, la página saltará a la sección correspondiente del formulario.
<ul>
<li><h2><a href="#personal">Personal Information</a></h2></li>
<li><h2><a href="#dependents">Dependents</a></h2></li>
<li><h2><a href="#emergency">Emergency Contacts</a></h2></li>
<li><h2><a href="#hobbies">Hobbies & Interests</a></h2></li>
</ul>
Nota: El id del paso anterior y el href de este paso deberán 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 desea añadir un poco de estilo a estos enlaces sólo tiene que copiar este CSS a su sitio. Si necesitas ayuda para añadir CSS a tu sitio, consulta 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 del formulario HTML es 14 y el ID de nuestro formulario es 1279. Esto significa que nuestro CSS solo se aplicará a este formulario e ID de campo específicos.
Si necesitas ayuda para encontrar los ID de tus campos y formularios, consulta este tutorial.
Ya está. Ahora ya sabes cómo crear fácilmente un índice al principio de tu formulario largo.
A continuación, ¿le gustaría crear un campo interno que pueda utilizar para filtrar sus entradas? Echa un vistazo a nuestro tutorial sobre cómo añadir un campo filtrable a un formulario para uso interno.