Adicionar Índice para Formulários Longos

Tem um formulário longo ao qual gostaria de adicionar um índice? Pode facilmente adicionar links HTML ao topo do seu formulário, bem como aos cabeçalhos das secções do seu formulário, que permitem aos utilizadores navegar de forma rápida e sem esforço entre as secções do seu formulário.

Neste tutorial, mostraremos o HTML necessário para ativar o índice nos seus formulários WordPress.

Criar o Seu Formulário

No nosso exemplo, criaremos um formulário de pessoal de funcionários para recolher informações como dados pessoais, dependentes, contactos de emergência e interesses.

Assim, para começar, crie um novo formulário ou edite um existente para aceder ao construtor de formulários. No construtor de formulários, adicione os campos relevantes. As várias categorias de informação, como mencionado anteriormente, serão divididas utilizando o campo de formulário HTML.

Adicionar os Links HTML aos Cabeçalhos

Agora que o formulário está configurado, é hora de adicionar os nossos links aos cabeçalhos das secções.

Por exemplo, vamos adicionar um link à secção Informações Pessoais.

<h2><a id="personal">Informações Pessoais</a></h2>

Com este HTML, estamos a adicionar um cabeçalho HTML h2 ao nosso formulário e, dentro desse cabeçalho, vamos adicionar um link. O id do link é o mais importante, pois determina o destino do link.

Terá de repetir este passo para cada secção que tenha.

Criar o Índice

Com o nosso último passo de HTML, adicionaremos um campo HTML no topo do formulário que conterá uma lista não ordenada em HTML com links que apontam para cada secção do nosso formulário.

Quando estes links forem clicados, a página saltará para a secção apropriada do formulário.

<ul>
<li><h2><a href="#personal">Informações Pessoais</a></h2></li>
<li><h2><a href="#dependents">Dependentes</a></h2></li>
<li><h2><a href="#emergency">Contactos de Emergência</a></h2></li>
<li><h2><a href="#hobbies">Passatempos e Interesses</a></h2></li>
</ul>


Estilizar o Índice

Este passo é completamente opcional, no entanto, se desejar adicionar algum estilo a estes links, basta copiar este CSS para o seu site. Se precisar de ajuda para adicionar CSS ao seu site, reveja 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;
}

No nosso exemplo, o ID do campo de formulário HTML é 14 e o ID do nosso formulário é 1279. Isto significa que o nosso CSS só será aplicado a este formulário e ID de campo específicos.

Se precisar de ajuda para encontrar os IDs dos seus campos e formulários, veja este tutorial.

É isso! Agora sabe como criar facilmente um índice no início do seu formulário longo!

Em seguida, gostaria de criar um campo interno que possa usar para filtrar as suas entradas? Dê uma vista de olhos ao nosso tutorial sobre adicionar um campo filtrável a um formulário para uso interno.